HTML 表单详解

下面列出了常用表单元素的 display 属性的值,仅供参考 测试环境:Chrome 53 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><inputtype="text"id="user"/></label><!-- 显式的联系 --><labelfor="user">账户:</label><inputtype="text"id="user"/>

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

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

表单控件

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

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

<inputtype="radio"id="boy"name="sex"value="男"/><labelfor="boy">男</label><inputtype="radio"id="girl"name="sex"value="女"/><labelfor="girl">女</label>
  • 复选按钮
<inputtype="checkbox"/>// 显示复选框
  • 按钮
<inputtype="submit"/>// 提交按钮<inputtype="image"/>// 图像提交按钮<inputtype="reset"/>// 重置按钮<inputtype="button"/>// 仅仅是一个按钮,没有任何功能<inputtype="file"/>// 文件上传按钮

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

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

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

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

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

<fieldset><legend>健康信息</legend><labelfor="height">身高:</label><inputtype="text"id="height"/><labelfor="weight">体重:</label><inputtype="text"id="weight"/></fieldset>
  • <output> 标签

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

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

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

<div><p>输入你所在的国家</p><inputtype="text"list="choose"/><datalistid="choose"><optionvalue="中国">中国</option><optionvalue="日本">日本</option><optionvalue="美国">美国</option></datalist></div>

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

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

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

参考资料

未登录用户
全部评论0
到底啦