全棧之前端| 6.HTML輸入提交表單標簽元素學習篇

設為「?? 星標」帶你從基礎入門 到 全棧實踐 再到 放棄學習！
涉及 網絡安全運維、應用開發、物聯網IOT、學習路徑、個人感悟 等知識分享。

希望各位看友多多支持【關注、點贊、評論、收藏、投幣】，助力每一個夢想。

【WeiyiGeek Blog's - 花開堪折直須折，莫待無花空折枝 】
作者主頁: 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學習交流群：歡迎各位志同道合的朋友一起學習交流【點擊 ?? 加入交流群】, 或者關注公眾號回復【學習交流群】。

0x00 前言簡述
0x00 表單標簽元素

首發地址: https://mp.weixin.qq.com/s/mew5xq7v-xH9Jc6ecUB8ww

0x00 前言簡述

本章將主要給各位看友介紹表單form中常用的標簽元素屬性，本節標簽一覽如下所示:

<form> : 定義供用戶輸入的 HTML 表單。
<label> : 定義 input 元素的標注。
<input> : 定義輸入控件。
<textarea> : 定義多行的文本輸入控件。
<button> : 定義按鈕。
<select> : 定義選擇列表（下拉列表）。
<optgroup> : 定義選擇列表中相關選項的組合。
<option> : 定義選擇列表中的選項。
<legend> : 定義 fieldset 元素的標題。
<fieldset> : 定義圍繞表單中元素的邊框。
<datalist> HTML5 : 定義下拉列表。
<output> HTML5 : 定義輸出的一些類型。
<keygen> HTML5 : 定義生成密鑰。
<isindex> : 定義與文檔相關的可搜索索引。HTML5 中不支持

0x00 表單標簽元素

form 標簽

描述: 表單是一個包含表單元素的區域，表單元素是允許用戶在表單中輸入內容,其包含 文本框、文本域(textarea)、按鈕、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等元素都要放在form標簽里面或者進行form的id值的調用，否則提交的數據到不了后端。

屬性:

name 屬性: 規定表單的名稱.
action 屬性: 規定當提交表單時向后端URL發送表單數據。
method 屬性: 規定提交發送表單時 HTTP 方法，通常為GET或者POST，當然也有可能為其他方法。
accept-charset 屬性: 規定服務器可處理的表單數據字符集。
enctype 屬性: 規定在向服務器發送表單數據之前如何對其進行編碼, 在 POST 請求使用其值為(text/plain、multipart/form-data、application/x-www-form-urlencoded)。
target 屬性: 規定在窗口何處打開 action URL。
autocomplete 屬性（NEW）: 規定 form 或 input (name: text, search, url, telephone, email, password, date pickers)域應該擁有自動填充功能，在某些瀏覽中需要開啟自動填充才能使其生效, 設置 on 或 off。
novalidate 屬性（NEW）: 規定在提交表單時不應該驗證 form 或 input 域(name: text, search, url, telephone, email, password, date pickers)域應該擁有自動填充功能，在某些瀏覽中需要開啟自動填充才能使其生效。

示例:

<!-- 1.指定表單提交給后端的地址以及方法，實現自動填充。 -->
<form action="https://api.weiygeeek.top/v2/version.jsp" method="get" autocomplete="on">     <!--啟動自動顯現上一次輸入過的數據,當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項 -->
  <label for="username">First name: </label><input type="text" name="username"/><br/>
  <label for="email">E-mail: </label><input type="email" name="email" autocomplete="off"/>   <!--取消自動顯現上一次輸入過的數據 -->
</form>

補充擴展

何時使用 Get ? 何時使用 Post ?

Get 請求：用于沒有敏感信息，且少量數據的提交，其表單數據在頁面地址欄中是可見的，例如 action page.php?firstname=Mickey&lastname=Mouse
Post 請求：通常用于敏感信息以及大量數據的提交，它更加安全其在頁面地址欄中被提交的數據是不可見的。

label 標簽

描述: 該元素（標簽）表示用戶界面中某個元素的說明, 其通常與input連用，它可以標簽文本不僅與其相應的文本輸入元素在視覺上相關聯，也可以點擊關聯的標簽來聚焦或者激活這個輸入元素，就像直接點擊輸入元素一樣。

屬性:

for : 即和 label 元素在同一文檔中的可關聯標簽的元素的 id。
form : 表示與 label 元素關聯的 form 元素（即它的表單擁有者）。

示例:

<!-- # 方式1.lable 與 input 屬性綁定。 -->
<label for="url">URL: </label> <input type="text" name="url" value="https://blog.weiyigeek.top" />

<!-- # 方式2.將input直接放在label里，此時則不需要 for 和 id 屬性，因為關聯已隱含存在 -->
<label> URL:
  <input type="text" name="url" value="https://blog.weiyigeek.top" />
</label>

input 標簽

描述: 該元素用于為基于 Web 的表單創建交互式控件，以便接受來自用戶的數據。取決于設備和用戶代理不同，表單可以使用各種類型的輸入數據和控件。<input> 元素是目前是 HTML 中最強大、最復雜的元素之一，因為它有大量的輸入類型和屬性組合。

屬性:

屬性	類型	描述
`accept`	`file`	文件上傳控件中預期文件類型的提示
`alt`	`image`	圖片類型的 alt 屬性。對無障礙是必需的
`autocomplete`	除了 `checkbox`、`radio` 和按鈕以外	表單自動填充特性提示
`capture`	`file`	文件上傳控件中媒體捕獲方法的提示
`checked`	`checkbox`、`radio`	控件是否選中
`dirname`	`search`、`text`	表單字段的名稱，用于在提交表單時發送元素的方向性
`disabled`	所有類型	表單控件是否禁用
`form`	所有類型	將控件聯系到表單元素中
`formaction`	`image`、`submit`	要提交表單的 URL 地址
`formenctype`	`image`、`submit`	提交表單時使用的表單數據編碼類型
`formmethod`	`image`、`submit`	提交表單時所使用的 HTTP 方法
`formnovalidate`	`image`、`submit`	繞過表單提交時的表單控件驗證
`formtarget`	`image`、`submit`	提交表單時的瀏覽上下文
`height`	`image`	與 `![img]()` 元素的 height 屬性有相同含義，垂直方向上的維度值
`list`	除了 `hidden`、`password`、`checkbox`、`radio` 和按鈕以外	自動完成選項的 `` 的 id 屬性的值
`max`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	最大值
`maxlength`	`text`、`search`、`url`、`tel`、`email`、`password`	`value` 的最大長度（字符數）
`min`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	最小值
`minlength`	`text`、`search`、`url`、`tel`、`email`、`password`	`value` 的最小長度（字符數）
`multiple`	`email`、`file`	布爾值。是否允許多個值
`name`	所有類型	表單的控件名稱，作為鍵值對的一部分與表單一同提交
`pattern`	`text`、`search`、`url`、`tel`、`email`、`password`	為了使得 `value` 有效，必須符合的模式(正在)
`placeholder`	`text`、`search`、`url`、`tel`、`email`、`password`、`number`	當沒有值設定時，出現在表單控件上的文字
`readonly`	除了 `hidden`、`range`、`color`、`checkbox`、`radio` 和按鈕以外	布爾值。如果存在，其中的值將不可編輯。
`required`	除了 `hidden`、`range`、`color` 和按鈕以外	布爾值。如果存在，一個值是必需的，或者必須勾選該值才能提交表格。
`size`	`text`、`search`、`url`、`tel`、`email`、`password`	控件的尺寸
`src`	`image`	與 `![img]()` 元素的 `src` 屬性含義相同，圖片資源的地址
`step`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	有效的增量值
`type`	所有類型	表單控件的類型
`value`	所有類型	表單控件的初始值
`width`	`image`	與 `![img]()` 元素的 `width` 屬性含義相同

type 屬性: 指定該標簽值的類型，其類型如下所示:

type類型	說明
text	文本框
password	密碼框
radio	單選框
checkbox	多選框
email	郵箱格式
tel	電話格式
search	搜索格式
url	Url格式
range	左右范圍格式
number	數字加減格式
color	用于指定顏色的控件
file	上傳文件
hidden	隱藏Input輸入框
time	時間選擇器(mobile）
week、month	周數、日期選擇器 (mobile）
date	日期選擇器 (mobile）
datetime	日期時間選擇器 (mobile）
datetime-local	輸入日期和時間的控件，不包括時區。
image	設置按鈕外觀

示例

1.文本框（Text Fields）、提交按鈕(Submit Button)類型, 文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域, 并且當用戶單擊確認按鈕時，表單的內容會被傳送到服務端。

<form method="get" action="service.php">
  <label for="first-name">First name:</label>
    <input type="text" name="first-name"><br>   
  <label>Last name: <input type="text" name="last-name"></label>
  <input type="submit" value="確定" name="submit" />    <!-- 提交按鈕 -->
  <input type="reset" value="重置" name="reset" />      <!-- 重置按鈕 -->
</form>

<!-- 注意：表單本身是不可見的，并且注意一個文本字段的默認寬度是20個字符。 -->

2.密碼類型，通過標簽 <input type="password"> 來定義, 通常在輸入敏感信息時需要使用該標簽。

<form action="info.php" method="get">
<label>username:<input type="text" name="username" placeholder="請輸入用戶名" /></label>  <!--placeholder屬性可以提示用戶輸入-->
<label>password:<input type="password" name="password" placeholder="請輸入用戶密碼" /></label>
</form>
<!-- 注意: 密碼字段字符不會明文顯示，而是以星號或圓點替代。 -->

WeiyiGeek.上述示例1、2圖

3.單選按鈕（Radio Buttons）、多選按鈕（Checkboxes）類型，通過 <input type="radio|checkbox"> 標簽定義了表單單選框選項以及多選按鈕。

<!-- 單選框 -->
<form action="info.php" method="post">
  <input type="radio" name="sex" value="male">Male|男<br/>
  <input type="radio" name="sex" value="female">Female|女<br/>
</form>

<!-- 多選框 -->
<form action="service.php" method="get">
  <input type="checkbox" name="vehicle" value="HTML" checked="checked">HTML<br/>
  <input type="checkbox" name="vehicle" value="CSS" checked="checked">CSS<br />
  <input type="checkbox" name="vehicle" value="JS">Javascript<br />
  <input type="submit" value="提交" name="ok"> 
</form>

WeiyiGeek.單選框與多選框結果圖

4.email郵箱地址類型，用于應該包含電子郵件地址的輸入字段。根據瀏覽器支持，能夠在被提交時自動對電子郵件地址進行驗證。

<h4>利用form 發送郵件到 master@weiyigeek.top</h4>
<form action="MAILTO:master@weiyigeek.top" method="post" enctype="text/plain">
  Name:<input type="text" name="name" placeholder="your name"><br>
  E-mail:<input type="email" name="mail" placeholder="your email"><br>
  Comment:<input type="text" name="comment" placeholder="your comment" size="50"><br>
  <input type="submit" value="發送">
  <input type="reset" value="重置">
</form>

<!-- 注意: 某些智能手機會識別 email 類型，并在鍵盤增加 ".com" 以匹配電子郵件輸入。 -->

<form action="/demo/demo_form.asp">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

WeiyiGeek.郵箱地址輸入類型結果圖

5.search類型,用于搜索域，比如站點搜索或 Google 搜索，search 域顯示為常規的文本域。

<form action="search.asp">
  搜索谷歌：<input type="search" name="blog-search">
  <input type="submit">
</form>

6.tel類型,用于應該包含電話號碼的輸入字段,目前只有 Safari 8 支持 tel 類型。

<form> Telephone:<input type="tel" name="usrtel"></form>

7.number類型,用于應該包含數字值的輸入字段,您能夠對數字做出限制，根據瀏覽器支持，限制可應用到輸入字段。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <!-- 按照+10進行加減 -->
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

WeiyiGeek.URL與Number類型示意圖

8.url 類型用于應該包含 URL 地址的輸入字段。根據瀏覽器支持，在提交時能夠自動驗證 url 字段。

<form>
  Blog:<input type="url" name="homepage">
</form>

9.color 類型，用于應該包含顏色的輸入字段，根據瀏覽器支持，顏色選擇器會出現輸入字段中。

Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">

10.range 類型, 用于應該包含一定范圍內的值的輸入字段，根據瀏覽器支持，輸入字段能夠顯示為滑塊控件。

Points: 0<input type="range" name="points" min="0" max="10">10

11.image 類型, 用于自定義圖片來表示，功能與Bottun差不多。

User name: <input type="text" name="user_name" /><br />
<input type="image" src="http://weiyigeek.top/img/login.jpg" width="99" height="99" />

12.日期時間類型，用于包含日期時間的的輸入字段，根據瀏覽器（給手機端的）支持，日期（時間）選擇器會出現輸入字段中。

<!-- 語法 -->
<input type="date">  日期的輸入字段
<input type="month"> 選擇月份和年份
<input type="week">  選擇周和年
<input type="time">  選擇時間（無時區）
<input type="datetime"> 選擇日期和時間（有時區）
<input type="datetime-local"> 選擇日期和時間（無時區）

<!-- 示例 -->
生日：<input type="date" name="bday">
生日（月和年）：<input type="month" name="bday_month"><br /><br />
Select a week：<input type="week" name="year_week"><br /><br />
請選取一個時間：<input type="time" name="usr_time"><br /><br />
Birthday (date and time): <input type="datetime" name="bday_time"><br /><br />
Birthday (date and time): <input type="datetime-local" name="bday_time">

WeiyiGeek.示例結果圖

13.file 類型，允許用戶可以從他們的設備中選擇一個或多個文件，選擇后這些文件可以使用提交表單的方式上傳到服務器上，或者通過 Javascript 代碼和文件 API 對文件進行操作，注意該提交必須為POST請求。

<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

<!-- accept 允許的格式 -->
accept=".png, .jpg, .jpeg"
<!-- 
字符串 audio/*，表示“任何音頻文件”。
字符串 video/*，表示“任何視頻文件”。
字符串 image/*，表示“任何圖片文件”。
字符串 .doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document ，表示接受類似于 MS Word 文檔的任何文件。
-->

<!-- capture 說明 -->
capture (en-US) 屬性是一個字符串（在移動設備上使用才能體現），如果 accept (en-US) 屬性指出了 input 是圖片或者視頻類型，則它指定了使用哪個攝像頭去獲取這些數據。
值 user 表示應該使用前置攝像頭和（或）麥克風，值 environment 表示應該使用后置攝像頭和（或）麥克風
<label for="picture">拍張照片你的臉:</label>  
<input type="file"
       name="picture"
       accept="image/*"
       capture="user">
<label for="voice">記錄你的聲音:</label>
<input type="file"
       name="voice"
       accept="audio/*"
       capture>

<!-- multiple 說明-->
multiple (en-US) 文件 input 允許用戶選擇多個文件。
<form method="post" enctype="multipart/form-data">
  <label for="file">選擇要上傳的文件</label>
  <input type="file" id="file" name="file" multiple />
  <button>提交</button>
</form>

14.屬性綜合示例

<form action="weiyigeek.asp" method="get" autocomplete="on" novalidate="true" autofocus="autofocus">
<!-- autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能 -->
<!-- novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域 -->
<!-- autofocus 屬性規定在頁面加載時，域自動地獲得焦點 -->
<!-- form 屬性規定輸入域所屬的一個或多個表單 -->
<!-- 表form override attributes 單重寫屬性允許您重寫 form 元素的某些屬性設定 -->
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />              <!-- 更換action提交的地址 -->
  <input type="submit" formnovalidate="true" value="Submit without validation" /> <!-- 當提交表單時不對表單數據（輸入）進行驗證 -->
  
<!-- image 類型的 height 和 width 屬性規定 input 標簽的圖像高度和寬度 -->
  <input type="image" src="img_submit.gif" width="99" height="99" />
  
<!-- list 屬性規定輸入域的 datalist，datalist 是輸入域的選項列表。 -->
  Webpage: <input type="url" list="url_list" name="link" />
  <datalist id="url_list">
  <option label="Index" value="https://www.weiygeek.top">
  <option label="Blog" value="https://blog.weiygeek.top">
  <option label="Tools" value="https://tools.weiygeek.top">
  </datalist>

<!-- min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束） -->
  Points: <input type="number" name="points" min="0" max="10" step="3" />

<!-- multiple 屬性規定輸入域中可選擇多個值。 -->
  Select images: <input type="file" name="img" multiple="multiple" />

<!-- pattern 屬性規定用于驗證 input 域的模式（pattern）,模式（pattern） 是正 則表達式regEXP(直接注意，指定輸入進行正則) -->
  Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />  <!--這里的titile有提示的功能-->
  <input type="submit" />

<!-- placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。 -->
  <input type="search" name="user_search"  placeholder="Search W3School" />

<!-- required 屬性規定必須在提交之前填寫輸入域（不能為空）。 -->
  Name: <input type="text" name="usr_name" required="required" />
</form>

textarea 標簽

描述: 該元素表示一個多行純文本編輯控件，當你希望用戶輸入一段相當長的(可容納無限數量)、不限格式的文本，例如評論或反饋表單中的一段意見時，這很有用。其默認字體是等寬字體（通常是 Courier）

屬性:

autocomplete: 是否使用瀏覽器的記憶功能自動填充文本（off、on）。
autofocus: 頁面加載完畢之后是否自動給本元素添加焦點。
rows: 元素的輸入文本的行數（顯示的高度）。
cols: 文本域的可視寬度, 必須為正數，默認為 20 (HTML5)。
disabled: 禁用文本域
form: 指定跟自身相關聯的表單
maxlength: 允許用戶輸入的最大字符長度 (Unicode)
minlength: 允許用戶輸入的最小字符長度 (Unicode)
name: 元素的名稱。
placeholder: 向用戶提示可以在控件中輸入的內容
readonly: 不允許用戶修改元素內文本。
required: 提示用戶這個元素的內容必填
spellcheck: 該屬性設為 true 時，表明該元素會做拼寫和語法檢查。
wrap: 指定文本換行的方式

默認為 soft 在到達元素最大寬度的時候，不會自動插入換行符.
設置為hard時，在文本到達元素最大寬度的時候，瀏覽器自動插入換行符 (CR+LF) 。

示例:

<!-- 案例1 -->
<label for="story">告訴我們你的故事:</label>
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

<!-- 案例2 -->
<form action="service.php" method="get">
  <p>個人介紹:</p>
  <textarea placeholder="請輸入你的個人簡介,而且是必須填寫得" cols="20" rows="2" required></textarea><br />
  <p>禁用文本框:</p>
  <textarea placeholder="請輸入你的個人簡介,而且是必須填寫得" cols="20" rows="2" disabled>我是一位愛好網絡計算機的學生</textarea><br />
  <p>單位介紹:</p>
  <textarea placeholder="唯一極客公司 , 你不能修改" cols="20" rows="3" readonly autofocus ></textarea><br />
  <input type="submit" value="提交" name="submit" />
  <input type="reset" value="重置" name="reset" />
</form>

WeiyiGeek.文本域展示結果圖

溫馨提示：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。
溫馨提示：雖然你通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

button 標簽

描述: 該元素可以如其意定義一個按鈕，在其元素內部您可以放置內容，比如文本或圖像，這是該元素與使用 <input> 元素創建的按鈕之間的不同之處。

屬性:

type 屬性: 其值可為 button、reset、submit 。
name 屬性: button 的名稱，與表單數據一起提交。
value 屬性: button 的初始值。
formaction 屬性: 配合submit類型，將表單里面的數據分別提交到后端文件進行處理。
formenctype 屬性: 覆蓋 form 元素的 enctype 屬性，其值為application/x-www-form-urlencoded、multipart/form-data、text/plain。
formnovalidate 屬性: 帶有兩個提交按鈕的表單（進行驗證或不進行驗證），第一個提交按鈕提交數據時帶有默認的表單驗證，第二個提交按鈕提交數據時不進行表單驗證。
formmethod 屬性: 覆蓋原生表單的 HTTP 方法。
formtarget 屬性: 表示接收提交的表單后在哪里顯示響應（_self,_top,_blank,_parent）

溫馨提示: 請始終為 <button> 元素規定 type 屬性 (三種類型)，不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值，提交的話建議使用input, 但是前者更容易使用css樣式。

示例

<!-- 示例1.type 屬性 -->
<button type="button" onclick="alert('你好，世界，HTML!')">點我!點我!</button>

<!-- 示例2.formaction 、formenctype 、formnovalidate屬性 -->
<form action="info.php" method="get">
  First name: <input type="text" name="fname" /><br>
  <button type="submit">提交</button><br>
  <button type="submit" formaction="demo-info.php" formenctype="text/plain">提交</button>
  <button type="submit" formnovalidate>不驗證提交</button>
</form>

綜合實踐：
示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/03.DivisionSection.html

select 標簽

描述: select 元素可創建單選或多選菜單, 其元素中的 <option> 標簽用于定義列表中的可用選項。

屬性:

autofocus: 規定在頁面加載后交本區域自動獲得焦點
disabled: 規定禁用該下拉列表
form: 規定文本區域所屬的一個或多個表單，指定表單的name名稱。
multiple : 規定可選擇多個選項
name : 規定下拉列表的名稱
required : 規定文本區域是必填的
number : 規定下拉列表中可見選項的數目
size : 若控件顯示為滾動列表框（如聲明了 multiple），此屬性表示為控件中同時可見的行數。

示例:

下拉列表的兩種實現方式:
<!-- 方式1:常規 -->
<select name="username" value="">
  <option value="1">Dimond</option>
  <option value="2">vertical</option>
</select>

<!-- 方式2:datalist -->
<input name="type" type="number" list="recordtype" placeholder="類型選擇" required class="form-control">
<datalist id="recordtype">
　　<option value="1">vertical</option>
</datalist>

option 標簽

描述: option 元素定義下拉列表中的一個選項（一個條目），瀏覽器將該標簽中的內容作為 <select> 標簽的菜單或是滾動列表中的一個元素顯示, 所以該元素位于 select 元素內部。

屬性:

disabled : 規定此選項應在首次加載時被禁用。
selected : 規定選項( 在首次顯示在列表中時)表現為選中狀態
value : 定義送往服務器的選項值。
label ：定義當使用 <optgroup> 時所使用的標注

注釋:

<option> 標簽可以在不帶有任何屬性的情況下使用，但是您通常需要使用 value 屬性，此屬性會指示出被送往服務器的內容。如果列表選項很多，可以使用 <optgroup> 標簽對相關選項進行組合。
multiple 屬性的 <select> 元素中選中多個選項，用戶可以按住 Ctrl, Command, 或 Shift 鍵（取決于你的操作系統）然后鼠標點擊不同選項以選擇或取消選擇。

示例:

<!-- 示例1.簡單示例 -->
<form action="https://weiyigeek.top/cars.php" method="get">
  <select name="cars">
    <option value="">--Please choose an option--</option>
    <option value="領克">領克</option>
    <option value="吉利">吉利</option>
    <option value="長安">長安</option>
  </select>
</form>

<!-- 示例2.下面是設置顯示多個選項和必須填寫多選,并且用form來綁定提交的form表單 -->
<select name="carlist" form="weiyigeek" size="4" required multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<!-- 示例3.設置默認選擇的而且第二項無法選擇 -->
<form>
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="fiat" selected="selected">Fiat</option>
  <option value="audi">Audi</option>
</select>
</form>

optgroup 標簽

描述: 該元素經常用于把相關的選項組合在一起，如果你有很多的選項組合, 你可以使用<optgroup> 標簽能夠很簡單的將相關選項組合在一起。

屬性:

disbaled: 規定禁用該選項組。
label: 為該選項組規定描述。

示例:

<form class="cars" action="index.html" method="post">
  <select form="weiyigeek" name="cars">
    <optgroup label="國產">
        <option value="長安">長安</option>
        <option value="吉利">吉利</option>
    </optgroup>
    <optgroup label="合資">
        <option value="大眾">大眾</option>
        <option value="豐田">豐田</option>
    </optgroup>
  </select>
</form>

WeiyiGeek.select-optgroup-option實踐圖

fieldset 標簽

描述: 該元素用于對表單中的控制元素進行分組（也包括 label 元素）.

屬性:

disabled: 如果設置了這個 bool 值屬性，<fieldset> 的所有子代表單控件也會繼承這個屬性。
form: 將該值設為一個 <form> 元素的 id 屬性值以將 <fieldset> 設置成這個 <form> 的一部分。
name: 元素分組的名稱。

legend 標簽

描述: 該元素用于表示其父元素 <fieldset> 的內容標題。

示例:

<style>
legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}
input {
  margin: 0.4rem;
}
</style>

<form class="info" action="index.html" method="post">
<fieldset disabled>
  <legend>Please Input Personal Info</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text"><br>
  <input type="radio" id="mothman" name="monster" value="M" />
  <label for="mothman">Mothman</label>
</fieldset>
</form>

WeiyiGeek.fieldset與legend元素示例圖

datalist 標簽

描述: 標簽規定了 <input> 元素可能的選項列表，"自動完成"的特性, 用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。（PS: 輸入的時候可以提示補全你輸入的值，其元素并不會像select元素一樣顯示）

屬性:

id 屬性: 請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素（id引用list屬性值）。

示例:

<form action="server.php" method="get">
<!-- 溫馨提示: 注意此處，id引用list的屬性值. -->
<input list="browsers" name="weiyigeek">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

output 標簽

描述: 該標簽是html5新增標簽，是使用來定義不同類型的輸出（比如：腳本的輸出），output標簽通常和form表單一起使用，用來輸出顯示計算結果。

屬性:

for: 定義輸出域相關的一個或多個元素。
form: 定義輸入字段所屬的一個或多個表單。
name: 定義對象的唯一名稱。（表單提交時使用）

示例:

<!-- 示例1.在用戶輸入時觸發. -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0<input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">
  =
  <output name="x" for="a b"></output>
</form>

<!-- 示例2.加法計算器. -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="x" for="a b">0</output>
</form>

keygen 標簽 (已棄用)

描述: 該元素是為了方便生成密鑰材料和提交作為 HTML form 的一部分的公鑰。這種機制被用于設計基于 Web 的證書管理系統。按照預想，<keygen> 元素將用于 HTML 表單與其他的所需信息一起構造一個證書請求，該處理的結果將是一個帶有簽名的證書。

屬性:

autofocus: 獲取焦點
disabled: 設置不可用
challenge: 挑戰就是提交公共的keys
form: 關聯表單
keytype: Key 類型支持RSA、DSA、EC(橢圓曲線)。
name: 名稱的控制

示例:

<!-- 簡單示例 -->
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">

<!-- 綜合示例 -->
<form action="demo_keygen.php" method="get" id="secureformid">
  Username: <input type="text" name="usr_name">
  <input type="submit">
</form>
<p>下面的注冊機領域在表單之外,但它仍屬于該表單的一部分。</p>
Encryption: <keygen name="security" form="secureformid">

WeiyiGeek.keygen執行結果示例圖