一、表单的基本结构

HTML 表单，一个包含交互的区域，用于收集用户提供的数据。

<form action="/" method="post">
  <!-- 文本输入框 -->
  <label for="name">用户名:</label>
  <input type="text" id="name" 
    name="name" required>

  <!-- 密码输入框 -->
  <label for="password">密码:</label>
  <input type="password" id="password" 
    name="password" required>

  <!-- 提交按钮 -->
  <input type="submit" value="提交">
</form>

<form> 元素，用于创建表单：

• action 属性：表单数据提交的 URL，可被 <button>、<input type="submit"> 、<input type="image"> 元素上的 formaction 属性覆盖。
• method 属性：提交数据的 HTTP Method，如 post | get 等。
• enctype 属性：当 method 值为 post 时，其表示将表单的内容提交给服务器的 MIME 类型，如 application/x-www-form-urlencoded（默认值）、multipart/form-data（表单包含 <input type=file> 元素时使用此值）。
• target 属性：提交表单之后，在哪里显示响应信息，_self（默认）| _blank 等。
• novalidate 属性：表单提交的时候不再进行验证。（HTML5 新增）

<input> 元素，用于创建交互控件，如文本框、密码框、单选按钮、复选框等：

• type 属性：表单控件的类型。
• name 属性：表单控件的名称，作为键值对的一部分与表单一同提交。
• value 属性：表单控件的初始值。
• disabled 属性：表单控件是否禁用。
• form 属性：将控件与表单ID进行关联。（HTML5 新增）
• required 属性：布尔值，表示该元素为表单必填项。（hidden、range、color 和按钮无该属性，H5新增）。
• autofocus 属性：布尔属性。当页面加载时 <input> 元素应该自动获得焦点。（HTML5 新增）
• autocomplete 属性：自动填充特性提示（除了 checkbox、radio 和按钮以外，HTML5 新增）

<label> 元素，表示用户界面中某个元素的说明：

• for 属性：指定表单控件的 ID，用于将 label 元素与表单控件进行绑定。

二、常用输入控件

1. 单行文本输入框

<!-- 普通单行文本输入框 -->
<input type="text" 
  name="username" value="liwy" />
<!-- 密码输入框 -->
<input type="password" />
<!-- 搜索输入框（HTML5 新增） -->
<input type="search" 
  id="site-search" name="q" />
<!-- 邮箱类型输入框，默认校验格式（HTML5 新增） -->
<input type="email" 
  id="email" size="30" required 
  pattern=".+@example\.com" />
<!-- 电话类型输入框（HTML5 新增） -->
<input type="tel" 
  id="phone" name="phone" required 
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
<!-- URL类型输入框，默认校验格式（HTML5 新增） -->
<input type="url" 
  id="url" name="url" size="30" required 
  placeholder="https://example.com" 
  pattern="https://.*" />

• size 属性：控件的尺寸。
• maxlength 属性：输入框最大可输入字符数（value）。
• minlength 属性：输入框最小字符数。
• pattern 属性：正则约束条件。（HTML5 新增）
• placeholder 属性：提示文案。（HTML5 新增）

2. 隐藏域

用户不可见的一个输入区域，作用是: 提交表单的时候，携带一些固定的数据。

<input type="hidden" name="tag" value="100" />

3. 单选框/复选框

<!-- 单选框 -->
<input type="radio" name="sex" 
  value="female" checked />女 
<input type="radio" name="sex" 
  value="male" />男

<!-- 复选框 -->
<input type="checkbox" name="hobby" 
  value="smoke" />抽烟 
<input type="checkbox" name="hobby" 
  value="drink" checked />喝酒 
<input type="checkbox" name="hobby" 
  value="perm" />烫头

• name 属性：数据的名称，每组单选框或者复选框的 name 值需要相同。
• value 属性：提交的数据值。
• checked 属性：让该单选按钮默认选中。
• required 属性：如果含有相同 name 的单选按钮组中任意一个按钮包含 required 属性，那么该组的单选按钮必须被选定。（HTML5 新增）

4. 文件选择

<input type="file" 
  id="avatar" 
  name="avatar" 
  accept="image/png, image/jpeg" />

• accept 属性：定义了 file 上传控件可选择文件类型，它是一个以逗号间隔的文件扩展名和 MIME 类型列表。
• multiple 属性：布尔值。是否允许一次选择多个文件。（HTML5 新增）

5. 数值与时间（HTML5 新增）

<!-- 数字类型的输入框，默认校验格式 -->
<input type="number" id="tentacles" 
  name="tentacles" min="10" max="100" />
<!-- 范围选择框，默认 50 -->
<input type="range" id="volume" 
  name="volume" min="0" max="11" />

<!-- 日期选择框 -->
<input type="date" id="start" 
  name="trip-start" value="2018-07-22" 
  min="2018-01-01" max="2018-12-31" />
<!-- 时间选择框 -->
<input type="time" id="appt" name="appt" 
  min="09:00" max="18:00" required />
<!-- 日期+时间选择框 -->
<input type="datetime-local" 
  id="party" name="partydate" 
  value="2017-06-01T08:30" />

<!-- 周选择框 -->
<input type="week" id="week" name="week" 
  min="2018-W18" max="2018-W26" required />
<!-- 月选择框 -->
<input type="month" id="start" name="start" 
  min="2018-03" value="2018-05" />

• max 属性：最大值。
• min 属性：最小值。
• step 属性：增量值。

6. 文本域

<textarea id="story" name="story" 
  rows="5" cols="33">
  今天天气真不错... ...
</textarea>

• id 属性：允许与 <label> 元素关联。
• name 属性：用于设置表单提交时发送至服务器的数据项名称。
• cols 属性：文本控件的可见宽度，以平均字符宽度为单位。若已指定，其值必须为正整数。若未指定，默认值为 20。
• rows 属性：显示控件的指定的可见文本行数，其值必须为正整数。若未指定，默认值为 2。
• disabled 属性：此布尔属性表示用户无法与控件交互。
• maxlength 属性：输入框最大可输入字符数。（HTML5 新增）
• minlength 属性：要求用户输入的最小字符串长度。（HTML5 新增）
• required 属性：布尔值，表示该元素为表单必填项。（HTML5 新增）
• placeholder 属性：提示文案。（HTML5 新增）
• form 属性：将控件与表单ID 进行关联。（HTML5 新增）
• autofocus 属性：当页面加载时，文本区域自动获得焦点。（HTML5 新增）
• autocomplete 属性：此属性指示浏览器是否可以自动完成控件的值，on|off（HTML5 新增）
• wrap 属性：指示控件应如何对表单提交时的值进行换行，soft | hard（HTML5 新增）

7. 下拉框

<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

<!-- 带分组的下拉框 -->
<select name="pets">
  <optgroup label="4-legged pets">
    <option value="dog" disabled>Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
  </optgroup>
  <optgroup label="Flying pets">
    <option value="parrot">Parrot</option>
    <option value="macaw">Macaw</option>
    <option value="albatross">Albatross</option>
  </optgroup>
</select>

<!-- 数据列表, HTML5 新增 -->
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<select> 标签创建下拉列表：

• id 属性：允许与 <label> 元素关联。
• name 属性：指定数据的名称。
• size 属性：规定下拉列表中可见选项的数目。
• multiple 属性：布尔值。是否允许一次选择多个文件。
• disabled 属性：此布尔属性表示用户无法与控件交互。
• required 属性：布尔值，表示该元素为表单必填项。（HTML5 新增）
• form 属性：将控件与表单ID 进行关联。（HTML5 新增）
• autofocus 属性：当页面加载时，文本区域自动获得焦点。（HTML5 新增）
• autocomplete 属性：此属性指示浏览器是否可以自动完成控件的值，on | off（HTML5 新增）

<option> 标签定义下拉列表中的一个选项：

• value 属性：这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。
• selected 属性：规定选项（在首次显示在列表中时）表现为选中状态。
• disabled 属性：规定此选项应在首次加载时被禁用。
• label 属性：用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。

<optgroup> 标签经常用于把相关的选项组合在一起。

• label 属性：选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。
• disabled 属性：如果设置了这个布尔值，则不能选择这个选项组中的任何选项。

<datalist> 数据列表，可用于搜索框的关键字提示（HTML5 新增）

• 除全局属性为无其他属性

三、按钮

<!-- 普通按钮 -->
<input type="button" value="点我" />
<button type="button">点我</button>

<!-- 提交按钮 -->
<input type="submit" value="点我提交表单" /> 
<button type="submit">点我提交表单</button>
<!-- 图形化的提交按钮 -->
<input type="image" id="image" alt="Login" 
  src="./res/login-button.png" />
<button type="submit">
  <img src="./res/login-button.png" />
</button>

<!-- 重置按钮 -->
<input type="reset" value="点我重置"> 
<button type="reset">点我重置</button>

<button> 元素比 <input> 元素更容易使用样式。你可以在元素内添加 HTML 内容（像 <em>、<strong> 甚至 <img>）。

<input type="submit"> / <input type="image"> / <button type="submit"> 除了 <input> 公共属性外，还支持的额外属性：

• formaction 属性：一个字符串，指示要将数据提交到的 URL，会覆盖 <form> 上的 action 属性（HTML5 新增）
• formenctype 属性：一个字符串，标识在将表单数据提交到服务器时要使用的编码方法，会覆盖 <form> 上的 enctype 属性。（HTML5 新增）
• formmethod 属性：一个字符串，指示提交表单数据时要使用的 HTTP 方法；会覆盖 <form> 上的 method 属性。（HTML5 新增）
• formnovalidate 属性：布尔属性，如果存在，则指定在提交给服务器之前不应对表单进行验证。会覆盖 <form> 上的 novalidate 属性。（HTML5 新增）
• formtarget 属性：一个字符串，指定一个名字或关键词来表示在提交表单后在何处显示响应数据。会覆盖 <form> 上的 target 属性。（HTML5 新增）

<input type="image"> 特有属性：

• src 属性：提交按钮上显示的图像的 URL。
• width 和 height 属性：设置图片的宽高。
• alt 属性：提供一个备用字符串，在图像无法加载的情况下作为按钮的标注。

<button> 的其他属性：

• type 属性：button 的类型。可选值：submit | reset | button。
• disabled 属性：布尔属性，表示用户不能与 button 交互。
• form 属性：表示 button 元素关联的 form 元素（HTML5 新增）
• autofocus 属性：布尔属性，用于指定当页面加载时按钮必须有输入焦点（HTML5 新增）

四、fieldset 表单控件分组

<fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Birth: <input type="text">
</fieldset>

<fieldset> 对表单中的相关元素进行分组：

• name：fieldset 的名称。（HTML5 新增）
• disabled ：规定该组中的相关表单元素应该被禁用。（HTML5 新增）
• form：fieldset 所属的一个或多个表单。（HTML5 新增）

<legend> 定义分组标题。