具体介绍HTML5表单新增属性


本文摘自PHP中文网,作者黄舟,侵删。

本文主要对HTML5表单新增属性进行详细介绍,并附上实例解析,简单易懂。需要的朋友一起来看下吧

1. 表单内元素的form属性

在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了


1

2

3

4

<form id="testform">

     <input type="text">

    </form>

    <textarea form="testform"></textarea>

2. 表单内元素的formaction属性

在H4中,表单的提交方式


1

2

<form action="1.jsp">

</form>

提交整个表单

在H5中,可以为表单的每一个属性添加提交到的jsp页面


1

2

3

4

5

<form action="1.jsp">

     <input type="submit" action="1-1.jsp">提交到1页面</form>

     <input type="submit" action="1-2.jsp">提交到2页面</form>

     <input type="submit" action="1-3.jsp">提交到3页面</form>

    </form>

3. 表单内元素的formmethod属性

可以对表单的每一个元素指定提交方法


1

2

3

4

<form action="1.jsp">

     <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>

     <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面,get提交方法</form>

    </form>

4. 表单内元素的formenctype属性

同上,作用与每一个元素,代码略

5. 表单的formtarget属性

同上,作用与每一个元素,代码略

6.元素的autofocus属性

为文本框、选择框和按钮控件等加上autofocus属性,画面打开时,将自动获得焦点。


1

<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

一个页面上只能有一个控件具有autofocus属性,不能滥用

7. required属性

可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。

8. labels属性

可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<script type="text/javascript">

        window.onload = function () {

         var text = document.getElementById('text');

            var btn = document.getElementById('btn');

            var form = document.getElementById('form');

            btn.onclick = function() {

                if (text.value.trim() =="") {

                 //alert(text.labels.length)

                 if(text.labels.length==1) {

                  var label = document.createElement("label");

                  label.setAttribute("for","text");

                  form.insertBefore(label,btn);

                  text.labels[1].innerHTML = "请输入姓名";

                  text.labels[1].setAttribute(

               "style","font-size:9px;color:red");

                 }

                }

                else if(text.labels.length>1)

                 form.removeChild(text.labels[1]);

                }

        }

 </script>

    <form id="form">

     <label id="label" for="text">姓名:</label>

     <input id="text">

     <input id="btn" type="button" value="验证">

    </form>

当用户不输入任何值时,单击验证,文本框旁边会动态的添加一个标签元素,标签元素为“请输入姓名”;当用户在文本框中有输入时,文字为“请输入姓名”的标签将被删除。

9. 标签的control属性

可以在标签(label)内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<script type="text/javascript">

        function setValue() {

         console.log(1);

         var label =document.getElementById("label");

         var textbox = label.control;

         textbox.value = "231456"

        }

         </script>

             <form>

     <label id="label">

      邮编:

      <input id="txt_zip" maxlength="6">

      <small>请输入6位数字</small>

     </label>

     <input type="button" value="设置默认值" onclick="setValue()">

    </form>

在游览器中打开页面,单击“设置默认值”按键,文本框中会显示231456.

10. 文本框的placeholder属性

当文本框(text或者textarea)处于为选择状态时输入提示信息(灰色)


1

<input type="text" palceholder="hahah">

11. 文本框的list属性

结合h5新增的datalist元素,制作提示框


1

2

3

4

5

6

7

text:<input type="text" name="greeting" list="greetings">

    <!-- 使用style="display:none";将datalist元素设置为不显示 -->

    <datalist id="greetings" style="display:none">

     <option value="你是人">你是人</option>

     <option value="你是猪">你是猪</option>

     <option value="你是狗">你是狗</option>

    </datalist>

当你在文本框中输入“你”时,下面会出现三栏提示“你是人”、“你是猪”、“你是狗”,没有关键字将不出现提示

12. 文本框的autocomplete属性

autocomplete有三种值"on"、"off"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下


1

<input type="text" name="greeting" list="greetings" autocomplete="on">

当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

请输入内容:<input type="text" pattern="[0-9][A-Z]{3}">

此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。

14. 文本框的selectionDirection属性

针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。


1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

        function alertSelectionDirection() {

         var control = document.forms[0]['text'];

         var Direction = control.selectionDirection;

         alert(Direction);

        }

 </script>

 <form>

     <input type="text" name="text">

     <input type="button" value="惦记我" onclick="alertSelectionDirection()" >

        </form>

15. 复选框的indeterminate属性

对于复选框来说,过去只有选取和与非选取状态,html5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。


1

2

3

4

5

6

<script>

      var cb = document.getElementById("cb");

      //将indeterminate的属性设置为true

      cb.indeterminate = true;

      </script>

      <input type="checkbox" indeterminate id="cb">indeterminate属性测试

16. image提交按钮的height属性与width属性

  • height:指定图片按钮中图片的高度;

  • width:指定图片按钮中图片的宽度;


1

<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength属性与wrap属性

  • maxlength :使用整数值进行设定,用于限定textarea元素中可输入文字的个数。

  • wrap:可指定属性值为soft与hard.当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会在换行处添加一个换行标志。

以上就是具体介绍HTML5表单新增属性的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5和css3扁平化风格博客教程的资源分享

url完整结构以及同源跨域处理的介绍

详解HTML5 canvas drawing的示例代码(三)

HTML5动画有什么用?

几个解决兼容ie6\7\8不支持HTML5标签的几个方法

HTML5应用-生日快乐动画的实现

HTML5 css 需不需要js

HTML5本地存储storage实例详解

HTML5实现上传图片预览效果代码

HTML5 网络拓扑图应用实例讲解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...