技术控

    今日:3| 主题:49249
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] HTML 表单详解

[复制链接]
给你满意的结果 发表于 2016-9-30 22:19:06
72 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
下面列出了常用表单元素的 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 属性相同。
  1. <!-- 隐式的联系 -->
  2. <label>
  3. <span>账户:</span>
  4. <inputtype="text"id="user"/>
  5. </label>
  6. <!-- 显式的联系 -->
  7. <labelfor="user">账户:</label>
  8. <inputtype="text"id="user"/>
复制代码
个人心得:网上很多人推荐使用显式的联系,但我没弄明白为什么?在 Chrome 53.0 上,我发现使用显式的联系后,在 label 元素和 input 元素之间会有一个字符的空白,点击这个空白,不会使 input 元素获得焦点。而在隐式的联系中就不存在这个问题了。So,make a choice yourself!  
  参考:    说说HTML5中label标签的可访问性问题  
  表单控件  

  
       
  •       单行文本框  
  1. <inputtype="text"/>// 可见文本框
  2. <inputtype="password"/>// 密码文本框,输入内容不可见(用星号或圆点替代)
复制代码

       
  •       多行文本框  
  1. <textarea>.....</textarea>// 可以输入多行可见的文本
复制代码

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

  1. <inputtype="radio"id="boy"name="sex"value="男"/>
  2. <labelfor="boy">男</label>
  3. <inputtype="radio"id="girl"name="sex"value="女"/>
  4. <labelfor="girl">女</label>
复制代码

       
  •       复选按钮  
  1. <inputtype="checkbox"/>// 显示复选框
复制代码

       
  •       按钮  
  1. <inputtype="submit"/>// 提交按钮
  2. <inputtype="image"/>// 图像提交按钮
  3. <inputtype="reset"/>// 重置按钮
  4. <inputtype="button"/>// 仅仅是一个按钮,没有任何功能
  5. <inputtype="file"/>// 文件上传按钮
复制代码
请始终为按钮元素 button 规定 type 属性,W3C规范的button元素的type属性的默认值是 submit。

  
       
  •       列表  
  1. <selectname="country">
  2. <optionvalue="中国">中国</option>
  3. <optionvalue="日本">日本</option>
  4. <optionvalue="俄罗斯">俄罗斯</option>
  5. </select>
复制代码
<optgroup> 标签会创建包含在一个 <select> 元素中的一组选项。label 属性指定选项组的名字。  
  1. <selectname="country">
  2. <optgrouplabel="东方国家">
  3. <optionvalue="中国">中国</option>
  4. <optionvalue="日本">日本</option>
  5. <optionvalue="俄罗斯">俄罗斯</option>
  6. </optgroup>
  7. <optgrouplabel="西方国家">
  8. <optionvalue="美国">美国</option>
  9. <optionvalue="英国">英国</option>
  10. </optgroup>
  11. </select>
复制代码

       
  •       组合表单控件 - fieldset 标签  
  <fieldset> 标签可将表单内的相关控件分组。    <legend> 标签为 fieldset 元素定义标题。  
  1. <fieldset>
  2. <legend>健康信息</legend>
  3. <labelfor="height">身高:</label>
  4. <inputtype="text"id="height"/>
  5. <labelfor="weight">体重:</label>
  6. <inputtype="text"id="weight"/>
  7. </fieldset>
复制代码

       
  •       <output> 标签  
  <output> 标签用来定义不同类型的输出,比如脚本的输出。  
  1. <formonsubmit="return false"oninput="this.output.value = parseInt(this.a.value) + parseInt(this.b.value)">
  2. <inputname="a"type="number"step="any">+
  3. <inputname="b"type="number"step="any">=
  4. <outputname="oouput"></output>
  5. </form>
复制代码

       
  •       <input> 与 <datalist> 结合使用  
  <datalist> 标签定义选项列表,它    定义了与它配合使用的 input 可能的值。请使用 input 元素的    list 属性来绑定 datalist。  
  1. <inputtype="text"/>// 可见文本框
  2. <inputtype="password"/>// 密码文本框,输入内容不可见(用星号或圆点替代)
  3. 0
复制代码
参考:    HTML5 datalist在实际项目中应用的可行性研究  
  很多 HTML5 中的新控件在这篇文章中没列出来,主要是因为各大浏览器的支持程度还不是很统一,并且很多基础的表单都能用老控件解决。要是以后支持的好了,立马就改!
  恩,这篇文章主要是加深一下自己写表单的规范,以前写的有点乱 ^_^||。
  参考资料  

  
       
  • 【MDN】      HTML表单指南(英文较多)   
  • 【教程】      【译】HTML表单指南—第一个HTML表单   
  • 【教程】      创造惊艳的表单   
  • 【文章】      HTML5 简介(四):新的表单类型、表单验证等特性介绍  
友荐云推荐




上一篇:前端外行的微信小程序瞎折腾之旅
下一篇:Docker存储空间扩容(DeviceMapper Driver)
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表