Web 表单

form

MDN form

属性：

• action：提交地址。
• method：提交方式，默认为 GET。
• name：名称。
• enctype：当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：
  • application/x-www-form-urlencoded：未指定属性时的默认值。
  • multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。
  • text/plain：出现于 HTML5，用于调试。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formenctype 属性覆盖。

input

MDN input

属性：

• type：参考 <input> types。
• name：名称，表单提交时，会以 name 的值作为参数名来提交。
• id：元素的 id，在表单中，一般会配合 <label> 元素的 for 属性来使用。

inputmode

在移动端，inputmode 值会影响弹出的键盘布局。

<!-- 无虚拟键盘 -->
<input type="datetime-local" inputmode="none" />
<!-- 使用用户本地区域设置的标准文本输入键盘 -->
<input type="text" inputmode="text" />
<!-- 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键 -->
<input type="text" inputmode="decimal" />
<!-- 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键 -->
<input type="text" inputmode="numeric" />
<!-- 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> -->
<input type="text" inputmode="tel" />
<!-- 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化 -->
<input type="text" inputmode="search" />
<!-- 为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> -->
<input type="text" inputmode="email" />
<!-- 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> -->
<input type="text" inputmode="url" />

select / option

• MDN select
• MDN option

下拉列表，<option> 需要配合 <select> 来进行使用。

select 属性：

• name：名称。
• id：元素的 id，在表单中，一般会配合 <label> 元素的 for 属性来使用。

option 属性：

• label：表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。
• selected：默认选中。

multiple

通常用于文件选择和下拉列表：

• 用于文件选择时，可选择多个文件。
• 用于下拉列表时，可选择多个选项。

<input type="file" multiple />

<option multiple>
  <option>foo</option>
</select>

textarea

MDN textarea

属性：

• name：名称。
• cols：可视宽度。
• rows：元素的输入文本的行数（显示的高度）。
• id：元素的 id，在表单中，一般会配合 <label> 元素的 for 属性来使用。

button

MDN button

按钮分两种写法：<button> 或者 <input>。

<button type="submit">button:submit 提交按钮</button>
<button type="reset">button:reset 重置</button>
<button type="button">button:button 普通按钮</button>

<input type="submit" value="input:submit 提交按钮" />
<input type="reset" value="input:reset 重置" />
<input type="button" value="input:button 普通按钮" />

label

MDN label

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

一般 <label> 和表单元素进行绑定时有两种写法，如下：

<label id="foo">foo</label> <input type="checkbox" id="foo" />

<label>
  foo
  <input type="checkbox" name="foo" />
</label>

fieldset / legend

MDN fieldset > MDN legend

<legend> 需要搭配 <fieldset> 来进行使用，一般用于表单分组。

当 fieldset 标签设置 disabled 时，其内部的所有子代表单控件也会继承这个属性。