本文内容
       HTML 5表单的组织方式
        HTML 5表单的新增特性
       访问表单控件及响应表单控件事件

HTML 5表单的组织方式
★  将表单字段及其标签关联起来
<label>标签为input元素定义标注(标记)
  给label元素添加一个for属性,将其与某输入控件关联起来,这种方式已被普遍使用。
  1. <!--绑定方式 1-->
  2. <label for="fName">请输入</label>
  3. <input type="text" id="fName">
  4. <!--label元素的for属性值,应该与相关联的input元素id属性值一致-->
 
           <!--绑定方式 1-->
  1. <label>请输入<input="text"></label>
值得注意的是,不要为类型“hidden”的表单字段关联label元素,因为这是无意义的。
 
★  按逻辑组织表单字段
    使用fieldset将表单中的各控件进行分组,每组可以加一个legend元素用做分组的标题。
  1. <h2>按逻辑组织表单字段</h2>
  2. <hr/>
  3. <p>使用fieldset将表单中的各控件进行分组,每组可以加一个legend元素用作分组的标题</p>
  4. <form>
  5. <fieldset>
  6. <legend>Movie Rating</legend>
  7. <inputtype="radio"id="Rating1"name="Rating">Excellent<br/>
  8. <inputtype="radio"id="Rating2"name="Rating">Good<br/>
  9. <inputtype="radio"id="Rating3"name="Rating"><labelfor="Rating3">Fair</label><br/>
  10. <label><inputtype="radio"id="Rating4"name="Rating">Poor</label>
  11. </fieldset>
  12. </form>
 
拓展: 
        fieldset元素是可以嵌套。因此, 还可以添加一个disable属性标明禁用它(需要时可以通过删除此属性再激活fieldset)。(关于这方面的示例,我写了几个都没有实现理想的效果,作为大牛的你,分享下吧!)
 
 
HTML 5表单的新增特性
HTML 5新增的表单方法                  HTML 5新增表单的伪类(pseudo-classes)

名称

 

名称

select

:valid

selectionStart

:invalid

selectionEnd

:required

setSelectionRange(start,end)

注意:此处,valid为有效的,合法的,invalid为无效的,非法的;

HTML 5中新增的表单属性

autofocus

当页面装载时,此元素应该拥有焦点

autocomplete

此元素应该“记住”以前输入的值,同时能够自动提示

pattern

指定用户输入的值,必须满足指定的正则表达式

placeholder

显示于输入控件中的“灰色提示信息”

novalidate,formnovalidate

通知浏览器不要验证指定的元素或窗体的数据有效性

required

此空间中必须有值

 
 △ 自动完成功能    autocomplete
   功能描述:当下次输入时,鼠标左键双击输入控件将会自动显示上次输入的文本;当输入时,输入内容和之前相符合将会显示之前的输入文本;
  1. <formmethod="get"action="">
  2. <label>Field: <inputtype="text"autocomplete="on"placeholder="支持自动完成"name="name"></label>
  3. <!--注意为text类型的input添加name属性或id属性,可以更便捷的获取text的值,完成文本自动提示-->
  4. <inputtype="submit"value="Submit">
  5. </form>
 △ 正则表达式验证  pattern
  使用正则表达式完成对输入内容的验证
  1. <formmethod="get"action="">
  2. <inputtype="text"name="patternTest"
  3. placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
  4. <inputtype="submit">
  5. </form>
 △ 禁用数据验证功能  novalidate 或 formvalidate
   使用novalidate属性或formnovalidate属性可以在整个窗体或控件范围内禁用数据验证功能。这一功能使用的典型场景是允许用户“暂存”当前状态(如邮箱保存到草稿箱),直到正式提交时再开始数据验证功能。
    ◇ 在form标签中添加novalidate属性实现禁用数据验证
  1. <formmethod="get"action=""novalidate>
  2. <!--在form标签中添加novalidate属性,表示对该form中的输入内容不作验证-->
  3. <inputtype="text"name="patternTest"
  4. placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
  5. <inputtype="submit">
  6. </form>
    ◇ 在submit提交按键中添加formnovalidate实现禁用数据验证
  1. <formmethod="get"action="">
  2. <inputtype="text"name="patternTest"
  3. placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$">
  4. <inputtype="submit"formnovalidate>
  5. <!--在submit控件中添加formnovalidate属性,表示对该form中的输入内容不作验证-->
  6. </form>
    ◇ 文本选择
  使用selectionStart,selectionEnd和setSelectionRange方法可以很方便地选择文本控件中的文本。
  1. <inputtype="text"id="textBox"size="40"value="I Love China!I Love China!I Love China!I Love China!">
  2. 起始<inputtype="text"id="start"value="0"size="3">
  3. 结束<inputtype="text"id="end"value="15"size="3"><!--size属性,定义input控件的宽度,单位为px-->
  4. <buttononclick="selectBE()">以起始与结束位置方法确定选择选中内容</button>
  5. <buttononclick="selectRange()">以Range方法确定选中内容</button>
  6. <buttononclick="displaySelected()">显示选中信息</button>
  7.  
  8. <script>
  9. function selectBE(){
  10. var input = document.getElementById("textBox");
  11. input.selectionStart = parseInt(document.getElementById("start").value);
  12. input.selectionEnd = parseInt(document.getElementById("end").value);
  13. }
  14. function selectRange(){
  15. var input = document.getElementById("textBox");
  16. var start = parseInt(document.getElementById("start").value);
  17. var end = parseInt(document.getElementById("end").value);
  18. input.setSelectionRange(start, end);
  19. }
  20. function displaySelected(){
  21. var input = document.getElementById("textBox");
  22. alert("Start:"+ input.selectionStart +"\n"+"End:"+ input.selectionEnd);
  23. }
  24. </script>
    ◇ “搜索”文本框  search
  当前,各个版本的桌面浏览器都把它作为普通文本框处理。搜索字段的外观与常规的文本字段无异!
  1. <inputtype="search"placeholder="这是一个搜索框!">
 但在当下,Web前端的一切事物都是因“机”而已!对于移动设备,会显示“搜索”输入面板供用户输入。

 
    ◇ “电子邮件” 输入框  email
  在桌面浏览器中,当用户输入无效的邮件地址时,部分浏览器会有提示:

 
  另外,在手机等移动终端设备上,则会显示相应的输入面板
 
    ◇ “数据列表”控件  datalist

   通过指定一个列表,可以在输入时给与用户相应,类似于提示“自动完成”功能。
示例
  1. <inputtype="text"list="suggestions">
  2. <!--此处list的属性值应该与datalist id的属性值一致-->
  3. <datalistid="suggestions">
  4. <option>my 1</option>
  5. <option>my 2</option>
  6. <option>my 3</option>
  7. <option>others</option>
  8. </datalist>

 注意
  在HTML中与datalist效果相近的另一个标签是select。
  区别在于,select标签是只能在指定的选项中选择,而datalist可直接填入,也可以在给定的选项中选择。
 
    ◇ 进度控制条  progress
 
  1. <progressvalue="50.0"max="200.0">1/4</progress>
  2. <!--progress标签没有min属性-->
提示: IE 11也能够较好的支持progress属性。
 
    ◇ 定义度量衡(仅适用于已知最大和最小值的度量) meter
   
 注释:Internet Explorer 不支持 meter 标签。
示例
  1. <metervalue="20.0"
  2. min="0"max="100.0"
  3. low="20.0"high="90.0"
  4. optimum="60.0">
  5. 1/5
  6. </meter>
   
    ◇ 显示计算机结果控件  output
     <output> 标签作为计算结果输出显示(比如执行脚本的输出)。
示例
  1. <formoninput="z.value=parseInt(x.value)+parseInt(y.value)">0
  2. <inputtype="range"min="0"max="100.0"id="x">100
  3. +<inputtype="number"id="y"value="50">
  4. =
  5. <outputname="z"for="x y"></output>
  6. </form>
  7. <!--其中控件使用name属性或id属性作为标识都是可以的-->
  8. <!--
  9. 规范的标识应该是output控件使用name属性做标识,input控件使用id属性做标识
  10. -->
提示:IE对onput,number控件的支持并不好。
 
访问表单控件及响应表单控件事件
 
   使用代码访问表单控件
  document的forms属性包容页面上的所有表单 
  为form元素指定其name属性,之后就可以通过name访问它。
  1. document.forms.formName //formName是form自定义的name属性值
另外,放在表单中的所有控件,也可以通过名字访问它。
  1. document.form.formName.elementName
 
响应表单事件
表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式,这里所指的元素可以是同一类型,也可以是多个不同类型的元素,
在开发中,经常需要处理以下两种类型的事件:
      1.控件获得与失去焦点事件;
      2.表单提交与重置事件;

  
 onfocus事件
获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序;
失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序;在一般情况下,这两个事件是同时使用的。
示例
  1. <script>
  2. function txtFocus(txtColor){
  3. txtColor.style.backgroundColor ="#ff00ff";
  4. }
  5. function txtBlur(txtColor){
  6. txtColor.style.backgroundColor ="#ffffff";
  7. }
  8. </script>
  9. <formmethod="get"action="">
  10. Username:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)">
  11. Password:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)">
  12. </form>

 
onchange事件
     失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。
 
  1. <formname="form1">
  2. <inputtype="text"value="通过表单事件响应事件更改样式"
  3. name="txtField"size="50">
  4. <selectonchange="turnColors(this.value)">
  5. <optionvalue="red">turn red</option>
  6. <optionvalue="green">turn green</option>
  7. <optionvalue="blue">turn blue</option>
  8. </select>
  9. </form>
  10. <script>
  11. function turnColors(color){
  12. /*form1.txtField.style.color = color;
  13. //简写对form1的访问*/
  14. document.forms.form1.txtField.style.color = color;
  15. //全写对form1的访问
  16. }
  17. </script>
提交与重置事件
   提交submit 
    表单提交事件(onsubmit)是在用户提交表单时(通常使用“提交”按钮,也就是将按钮的type属性设为submit),在表单提交之前被触发  。
    该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
   重置onreset
    表单重置事件(onreset)与表单提交事件的处理过程相同,该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框信息。
示例
  1. <script>
  2. function checkData(f){
  3. if(f.txtField.value ==""){
  4. //注意此处是判断txtField的值是否为空,因此应该用‘==’符号
  5. alert("商品名称不能为空");
  6. returnfalse;
  7. }else{
  8. returntrue
  9. }
  10. }
  11. </script>
  12. <formmethod="post"action=""onsubmit="checkData(this)">
  13. <inputname="txtField"type="text"placeholder="请输入商品名称">
  14. <inputtype="submit">
  15. </form>
 

HTML 5表单应用小结的更多相关文章

  1. HTML form表单小结

    HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉.在小结的最后有一个form表单的小例子,可以作为参考. -----DanlV form是HTML的一个极为重 ...

  2. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  3. 进一步丰富和简化表单管理的组件:form.js

    上文<简洁易用的表单数据设置和收集管理组件>介绍了我自己的表单管理的核心内容,本文在上文的基础上继续介绍自己关于表单初始值获取和设置以及表单数据提交等内容方面的做法,上文的组件粒度很小,都 ...

  4. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  5. FineUI小技巧(2)将表单内全部字段禁用、只读、设置无效标识

    需求描述 对表单内的所有字段进行操作也是常见需求,这些操作有: 禁用:表单字段变灰,不响应用户动作. 只读:表单字段不变灰,但不接受用户输入(实际上是设置DOM节点的readonly属性),有触发器的 ...

  6. 160927、用jquery 重置表单的方法

    清空 我们项目小小部分的搜索条件: 客户要做的是,只要一键 "清空搜索条件" 即可清空维护地点.订单ID等条件. js函数 //重置表单 function resetform(){ ...

  7. ASP.NET MVC 3 之表单和 HTML 辅助方法(摘抄)

    ——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...

  8. FineUI表单验证

    自动编码文本 默认情况下,Label的EncodeText属性为true,会对文本中的HTML进行编码.当然我们也可以设置EncodeText=false,从而将HTML片段赋值给Text属性,请看这 ...

  9. contact表单错误解决记录

    在上篇表单验证中,过程中可谓坎坷,记录一下错误问题及解决方案. 我们用到的模板contact_form.html如下,其他urls.py自行去修改. <html> <head> ...

随机推荐

  1. svn web页面管理svnadmin部署

    1.yum install subversion  创建svn目录  mdkir -p /data/svndirroot  建立svn库 svnadmin create /data/svndirroo ...

  2. PHP学习总结

    <?php /* PHP简介: PHP是什么:PHP是一种创建动态交互性站点的强有力的服务器端脚步语言 PHP代表Hypertext Preprocessor PHP是一种使用广泛的开源的脚本语 ...

  3. windows环境安装和配置Apache-Tomcat7.0

    转自:http://blog.sina.com.cn/s/blog_7c35df9b010111sh.html 说明: Tomcat Manager的用户名和密码可以到"Tomcat安装目录 ...

  4. opensuse 13.1 安装配置从0开始

    主要目的为自己留作备份,仅作参考! 1. 输入法 托盘->输入法->配置 去掉除英语和Sunpinyin之外的输入法,配置Sunpinyin,使用双拼方案,重启fcitx. 另外需要禁用笔 ...

  5. .NET并行编程1 - 并行模式

    设计模式——.net并行编程,清华大学出版的中译本. 相关资源地址主页面: http://parallelpatterns.codeplex.com/ 代码下载: http://parallelpat ...

  6. hdu 1556:Color the ball(线段树,区间更新,经典题)

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  7. 火狐的调试利器-----Firebug

    什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的HTML代码:要编写精致的CSS样式表展示每个页面模块:要调试javascript给页面增加一些 ...

  8. xcodebuild

    xcodebuild -workspace /path/union/moon-ios/Moon.xcworkspace -scheme Moon ONLY_ACTIVE_ARCH=NO TARGETE ...

  9. 配置VS2010具有代码提示功能

    Visual Assist X是一款非常好的Microsoft Visual Studio插件,可以支持Microsoft Visual Studio 2003,Microsoft Visual St ...

  10. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...