我們在上一篇文章中介紹了input的text,Password,button,radio,checkbox,date元素
這篇文章將介紹其他表單元素，了解各個元素和屬性在網頁上的作用。

• 認識各項input元素

Submit(送出按鈕):將表單資料送回伺服器端
Reset(重設按鈕):將表單元素清空或重回預設值
File(檔案上傳按鈕):可以利用accept屬性指定可上傳的檔案類型
Email(電子郵件輸入框)
Tel(電話號碼輸入框)

<form>
    <h1>報名資料填寫</h1><hr />
    報名檔案:<input type="file" name="file" accept=".pdf" autofocus><p>
    <!--accept屬性為限制使用者上傳的檔案類型-->
    電子郵件:<input type="email" name="mail" autocomplete="off" required></p>
    電話號碼:<input type="tel" name="tel" placeholder="請填寫09開頭" required>
    <p >
    <input type="submit" value="submit" name="submit">
    <input type="reset" value="reset" name="reset"/>
    </p>
</form>

補充:
在上面的範例中可以看到幾個屬性:
Autofocus:網頁開啟後自動聚焦此表單元素，讓使用者注意此元素
Autocomplete:是否要記得並自動填入之前表單元素的輸入值，off/on分別為關閉/開啟
Required:設定為必填，若未輸入將會有提示訊息，且無法送出表單
Placeholder:輸入的提示訊息，不會將此提示訊息設定成預設值

• 認識textarea(文字區域)元素

常用在留言板等功能，提供多行文字的輸入框
<textarea name="" rows="" cols=""></textarea>
Rows:設定輸入框預設需要多少列
Cols: 設定輸入框預設需要多少行

<form>
    <h1>留言板</h1><hr />
    <textarea name="area" rows="8" cols="20" placeholder="右下角可調整輸入框大小喔"></textarea>
</form>

• 認識select/option(下拉式)元素

<select name="" size=2 multiple>
    <option></option>
    <option></option>
    <option></option>
</select>

size:在選框中出現多少個項目，其他項目可經由下拉桿選取
multiple:可複選

<form>
   請選擇:
    <select name="select" size=2 multiple>
        <option>dog</option>
        <option>cat</option>
        <option>horse</option>
    </select>
</form>

結語

這篇文章介紹了表單的input、textarea、select/option元素，html的介紹和認識也到這邊告一個段落，接下來後面的幾篇文章將進入用來美化、排版網頁的CSS，讓網頁的樣子變得更有設計感。