剑客
关注科技互联网

HTML 表单详解

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

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

参考资料

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址