一、 <form> 标签

1. 表单标签核心属性

• action：表单提交的 URL
• method：表单提交的方法（GET/POST）
• required：必填字段
• placeholder：输入提示
• autofocus：自动获取焦点

危险

严禁在一个表单内嵌嵌套另一个表单。嵌套会导致表单出现不可预测的行为。

2. form 属性

在 <form> 元素之外也可以使用表单控件，但是需要使用 form 属性进行关联

<form action="" id="form">
  <input type="text" placeholder="请输入您的姓名" />
</form>

<button type="submit" form="form">提交</button>

二、 <label> 标签的重要性

• 提升表单的可用性和可访问性
• 通过 for 属性与输入框关联

<label for="username">用户名：</label>
<input type="text" id="username" name="username" />

三、 input 文本输入标签

1. 常用的输入类型

• text： 单行文本输入
• password：密码输入
• checkout：多选框，通过 name 绑定
• radio：单选按钮，通过 name 绑定
• file：文件选择类型
• hidden：隐藏
• button：普通按钮
• reset： 重制表单的按钮
• submit：提交表单的按钮
• image：HTML 5 输入类型，弥补 button、reset、submit 不能展示图像
• email：HTML 5 输入类型，邮箱输入
• search：HTML 5 输入类型，检索
• tel：HTML 5 输入类型，电话输入
• url：HTML 5 输入类型，网址输入
• number：HTML 5 输入类型，数字输入
• range：HTML 5 输入类型，滑块输入
• date：HTML 5 输入类型，显示和选择时间
• datetime-local：HTML 5 输入类型，显示和选择一个没有特定时区的日期和时间的控件
• moth：HTML 5 输入类型，显示和选择带有年份信息的某个月的控件
• time：HTML 5 输入类型，显示和选择时间的控件
• week：HTML 5 输入类型，显示和选择一年中特定的编号周的控件
• color：HTML 5 输入类型，提供选择颜色。返回值总是小写的 6 位 十六进制数表示

2. 与 <textarea> 的区别

<input> 是一个空元素，这就意味着它不需要关闭标签。相反，<textarea> 不是一个空元素，因此需要使用适当的技术标记来关闭它。

<input> 定义默认值需要使用 value 属性：

<input type="text" value="默认值" />

而 <textarea> 却需要使用 innerText 文本来表示默认值：

<textarea>
  默认值
</textarea>

• 另一个区别就是，<textarea> 提交的数据包含硬换行（如按下回车键产生的）
• 还有 <textarea> 接受属性指定多行的渲染行为
  • cols：指定文本控件的可见宽度，默认值 20。
  • rows：指定文本的可见行数，默认值 2。这是实际的起始高度，该值可以通过调整 <textarea> 大小改变，也可以通过 CSS 重写
  • wrap：控制文本换行，取值可能是
    • soft：默认值，提交的文本没有换行，而浏览器渲染的文本有换行
    • hard：使用该属性时必须指定 cols 的值，提交的文字和浏览器中渲染的文字都有换行
    • off：停止换行行为

3. 与 <button> 构建的按钮对比

使用 <input type="submit"> 同样可以构建一个简单的按钮，但是不如 <button>那样可以嵌入完整的 HTML 内容，允许设置更复杂、更有创意的按钮。

<button type="button">
  <img src="/icon/favicon-32x32.png" alt="提交按钮" />
</button>

信息

如何排布好表单是公认的难点。

四、 构建微组件

嗯，使用 <fieldset> 和 <legend> 元素可以将相同目的（样式和语义目的）的表单元素构建成微组件模式。其中，<legend> 作为 <fieldset> 的标签来描述所含微件的用途（说明）。

<form>
  <fieldset>
    <legend>瓜子、饮料、矿泉水</legend>
    <p>
      <input
        type="checkbox"
        name="food"
        id="sunflower-seed"
        value="sunflower-seed"
      />
      <label for="sunflower-seed">瓜子</label>
    </p>
    <p>
      <input type="checkbox" name="food" id="beverage" value="beverage" />
      <label for="beverage">饮料</label>
    </p>
    <p>
      <input
        type="checkbox"
        name="food"
        id="mineral-water"
        value="mineral-water"
      />
      <label>矿泉水</label>
    </p>
  </fieldset>
  <button type="submit">腿让一下</button>
</form>

五、下拉控件

HTML 有两种下拉内容：一种是选择框，另一种是自动补全框。

1. 选择框

使用 <select> 和多个 <option> 子元素构成的，每个子元素制定了选择框的可能取值。

<select id="fruit" name="fruit">
  <option>香蕉</option>
  <option selected>草莓</option>
  <option>柠檬</option>
</select>

2. 选择组

在 <option> 中使用嵌套 <optgroup> 元素中，以在视觉上形成关联组。

<select id="fruit" name="fruit">
  <optgroup label="常价">
    <option>香蕉</option>
    <option>火龙果</option>
    <option>猕猴桃</option>
  </optgroup>
  <optgroup label="折扣">
    <option>榴莲</option>
    <option>菠萝蜜</option>
    <option>人参果</option>
  </optgroup>
</select>

信息

如果省略了 value 属性并不是必需的，在没有设置 value 值的时候，提交的是原文本。

3. 多选选择框

默认的选择框只允许用户选择单个值。通常向 <select> 元素添加 multiple 属性，就允许用户使用操作系统提供的机制选择多个值（如按下 Cmd/Ctrl/Shift 并选取单击的多个值）：

<select id="multi" name="multi" multiple size="4">
  <optgroup label="平价">
    <option>香蕉</option>
    <option>橘子</option>
    <option>桔子</option>
  </optgroup>
  <optgroup label="折扣">
    <option>榴莲</option>
    <option>菠萝</option>
    <option>杨桃</option>
  </optgroup>
</select>

备注

在多选的情况下，选择框不再是下拉内容的形式显示数值--相反，所有的值都会一次性的显示在一个列表中，可选的 size 属性决定了控件的高度

4. 自动补全框

通过 <datalist> 元素中的一些显示的 <option> 子元素为表单提供推荐的自动补全值，<datalist> 需要指定一个 id。

懒得敲了

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>