HTML 5表单应用小结

本文内容

       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的访问*/
15. document.forms.form1.txtField.style.color = color;
16. //全写对form1的访问
17. }
18. </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. }
12. </script>
14. <formmethod="post"action=""onsubmit="checkData(this)">
15. <inputname="txtField"type="text"placeholder="请输入商品名称">
16. <inputtype="submit">
17. </form>

 

相关示例：应用样式表美化表单