HTML 表单详解

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

一些零碎的表单知识点

下面列出了常用表单元素的 display 属性的值，仅供参考 > 测试环境： Chrome 53.0

  • block： form、fieldset、legend、option、optgroup
  • inline： label、output
  • inline-block： input、button、textarea、select
  • none： datalist
  • <label> 标签

<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

通常有两种方式将 label 和 input 联系在一起，看下面代码。在使用显式的联系时，<label> 标签的 for 属性应当与相关的 input 元素的 id 属性相同。

<!-- 隐式的联系 -->
<label> <span>账户：</span> <input type="text" id="user" /> </label>

<!-- 显式的联系 -->
<label for="user">账户：</label> <input type="text" id="user" />

个人心得：网上很多人推荐使用显式的联系，但我没弄明白为什么？在 Chrome 53.0 上，我发现使用显式的联系后，在 label 元素和 input 元素之间会有一个字符的空白，点击这个空白，不会使 input 元素获得焦点。而在隐式的联系中就不存在这个问题了。So，make a choice yourself！

参考：说说 HTML5 中 label 标签的可访问性问题

表单控件

  • 单行文本框
<input type="text" /> // 可见文本框 <input type="password" /> //
密码文本框，输入内容不可见（用星号或圆点替代）
  • 多行文本框
<textarea>.....</textarea> // 可以输入多行可见的文本
  • 单选按钮

一般单选按钮都是成组出现，每一组单选按钮都有相同的 name 属性，但用户只能选一个。

<input type="radio" id="boy" name="sex" value="男" />
<label for="boy">男</label>
<input type="radio" id="girl" name="sex" value="女" />
<label for="girl">女</label>
  • 复选按钮
<input type="checkbox" /> // 显示复选框
  • 按钮
<input type="submit" /> // 提交按钮 <input type="image" /> // 图像提交按钮
<input type="reset" /> // 重置按钮 <input type="button" /> //
仅仅是一个按钮，没有任何功能

<input type="file" /> // 文件上传按钮

请始终为按钮元素 button 规定 type 属性，W3C 规范的 button 元素的 type 属性的默认值是 submit。

  • 列表
<select name="country">
  <option value="中国">中国</option>
  <option value="日本">日本</option>
  <option value="俄罗斯">俄罗斯</option>
</select>

<optgroup> 标签会创建包含在一个 <select> 元素中的一组选项。label 属性指定选项组的名字。

<select name="country">
  <optgroup label="东方国家">
    <option value="中国">中国</option> <option value="日本">日本</option>
    <option value="俄罗斯">俄罗斯</option>
  </optgroup>
  <optgroup label="西方国家">
    <option value="美国">美国</option> <option value="英国">英国</option>
  </optgroup>
</select>
  • 组合表单控件 - fieldset 标签

<fieldset> 标签可将表单内的相关控件分组。<legend> 标签为 fieldset 元素定义标题。

<fieldset>
  <legend>健康信息</legend>
  <label for="height">身高：</label> <input type="text" id="height" />
  <label for="weight">体重：</label> <input type="text" id="weight" />
</fieldset>
  • <output> 标签

<output> 标签用来定义不同类型的输出，比如脚本的输出。

<form
  onsubmit="return false"
  oninput="this.output.value = parseInt(this.a.value) + parseInt(this.b.value)"
>
  <input name="a" type="number" step="any" /> +
  <input name="b" type="number" step="any" /> = <output name="oouput"></output>
</form>
  • <input> 与 <datalist> 结合使用

<datalist> 标签定义选项列表，它定义了与它配合使用的 input 可能的值。请使用 input 元素的 list 属性来绑定 datalist。

<div>
  <p>输入你所在的国家</p>
  <input type="text" list="choose" />
  <datalist id="choose">
    <option value="中国">中国</option>
    <option value="日本">日本</option>
    <option value="美国">美国</option>
  </datalist>
</div>

参考：HTML5 datalist 在实际项目中应用的可行性研究

很多 HTML5 中的新控件在这篇文章中没列出来，主要是因为各大浏览器的支持程度还不是很统一，并且很多基础的表单都能用老控件解决。要是以后支持的好了，立马就改！

恩，这篇文章主要是加深一下自己写表单的规范，以前写的有点乱 ^_^||。

参考资料