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
到底啦