[html5] 学习笔记-表单新增的元素与属性(续)

时间:2022-04-04 17:05:49

本节主要讲解表单新增元素的controls属性、placeholder属性、List属性、Autocomplete属性、Pattern属性、SelectionDirection属性、Indeterminate属性、Image提交按钮的宽高属性。

1、controls属性

在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素。

 <body>
     <script>
         function setValue(){
             var label = document.getElementById("label");
             var textbox = label.control;
             textbox.value = "010111";
         }
     </script>
     <form>
         <label id="label">
             邮编:
             <input id="txt_zip" maxlength="6">
             <small>请输入六位数字</small>
         </label>
         <input type="button" value="设置默认值" onclick="setValue()">
     </form>
 </body>

2、文本框的placeholder属性

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。

 <body>
     <input type="text" placeholder="请输入用户名"></input>
 </body>

3、文本框的list属性

在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的Id。datalist元素也是html5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入(与下拉菜单的区别是,下拉菜单不允许自行输入)。datalist元素本身并不显示,而是当文本框获得焦点时,以提示输入的方式显示。

 <body>
     <form>
         <input type="text" name="greeting" list="greeting">
         <datalist id="greeting" style="display: none">
             <option value="HTML5学习">HTML5学习</option>
             <option value="Android学习">Android学习</option>
             <option value="IOS学习">IOS学习</option>
         </datalist>
     </form>
 </body>

4、文本框的autocomplete属性

帮助输入所用的自动完成功能,是一个既节省时间又十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以在安全方面存在缺陷,只要使用了autocomplete属性,安全性方面也可以很好的控制。属性值为on,则会基于之前键入并提交的值,有自动补全功能;属性值为off,则关闭该功能;属性值为“”,则取决于浏览器的默认值。

 <body>
     <form>
     <input type="text" name="greeting" autocomplete="on" list="greeting"></input>
     <input type="submit"></input>
     </form>
 </body>

5、文本框的pattern属性

在html5中,对input元素使用pattern属性,并将属性设置为某个格式的正则表达式时,在提交时,会针对这些进行检查。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。

 <body>
     <form>
         请输入内容
         <input pattern="[A-Z]{3}" name ="part"></input>
         <input type="submit"></input>
     </form>
 </body>

6、文本框的SelectionDirection属性

对input和textarea元素,HTML5增加了SelectionDirection属性,当用户在这两个元素中,用鼠标选择部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为“forward",当用户反向选取文字时,该属性值为”backward"。当用户没有选择任何文字时,该属性值为“forward"。

 <body>
     <script>
         function AD(){
             var control = document.forms[0]['text'];
             var Direction = control.selectionDirection;
             alert(Direction);
         }
     </script>
     <form>
         <input type="test" name="text"></input>
         <input type="button" value="点击我" onclick="AD()"></input>
     </form>
 </body>

7、复选框的indeterminate属性

对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。在HTML5中,可以在javascript脚本代码中,对该元素使用indeterminate属性,说明复选框处于尚未明确选取与否的状态。

 <body>
     <input type="checkbox" indeterminate id="cd">属性测试</input>
     <script>
         var cd = document.getElementById("cd");
         cd.indeterminate = true;
     </script>
 </body>

8、image提交按钮的height属性与width属性

针对类型为image的Input元素,html5新增加了两个属性,height、width属性分别用来指定图片按钮的高度和宽度。

 <body>
     <form action="test.json" method="post">
         姓名:<input type="text" name="name"></input>
         <input type="image" src="1.gif" alt="编辑" width="50" height="50"></input>
     </form>
 </body>