码迷,mamicode.com
首页 > Web开发 > 详细

Html5主要新增表单属性

时间:2018-01-14 19:31:36      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:字符   使用   auto   list   splay   兼容各浏览器   单行   ram   html5学习   

form属性

HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。

用法:

<form id="isForm">
    <input type="text">
</form>
<textarea form="isForm" cols="30" rows="10"></textarea>

formaction属性

HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另-个页面,而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。

用法:

<form>
    <input type="submit" name="s1" value="v1" formaction="xx.php">
    <input type="submit" name="s2" value="v2" formaction="yy.php">
    <input type="submit" name="s3" value="v3" formaction="zz.php">
</form>

formmethod属性

HTML4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法

用法:

<form>
    <input type="submit" name="s1" value="v1" formaction="xx.php" formmethod="post">
    <input type="submit" name="s2" value="v2" formaction="yy.php" formmethod="get">
</form>

formenctype属性

HTML4中,表单元素具有一个enctype属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。

用法

<form>
    <!--第一种:空格变为加号,但是并不对特殊字符进行编码-->
    <input type="text" formenctype="text/plain">
    <!--第二种:不对字符进行编码-->
    <input type="text" formenctype="multipart/form-data">
    <!--第三种-->
    <input type="text" formenctype="application/x-www-form-urlencoded">
</form>

formtarget属性

HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。

HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

用法:

 <form>
    <!--第一种:在新的标签页面中打开-->
    <input type="submit" name="s1" value="v1" formaction="xx.php" formtarget="_blank">
    <!--第二种:在当前框架中打开-->
    <input type="submit" name="s2" value="v2" formaction="yy.php" formtarget="_self">
    <!--第三种:在当前页面中打开-->
    <input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_top">
    <!--第四种:在当前框架的父框架中打开-->
    <input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_parent">
    <!--第五种:在指定的框架中进行打开-->
    <input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="framename">
</form>

autofocus属性

为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。

用法:

<form>
    <input type="text">
    <input type="text" autofocus>
</form>

required属性

HTML5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字

用法:

<input type="text" required>

Iabels属性

HTML5中,为所有可使用标签的表单元素、buttonselect元素等,定义一个Iabels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

用法:

<script>
    function Validate() {
        // body...
        var txtName = document.getElementById('txt_name');
        var button = document.getElementById('btnValidate');
        var form = document.getElementById('testForm');
        if(txtName.value.trim() == ""){
            var label = document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            txtName.labels[1].innerHTML = "请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:9px;color:red;")
            }
        }
</script>
<form id="testForm">
    <label id="test" for="txt_name"></label>
    <input type="text" id="txt_name">
    <input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>

效果:

技术分享图片

标签的control属性

HTML5中,可以再标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素

用法:

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

效果:

技术分享图片

文本框的placeholder属性

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

用法:

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

效果:

技术分享图片

文本框的list属性

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

用法:

<form>
    <input type="text" name="greeting" list="greetings">
    <!--datalist在默认状态之下是none的,但是为了兼容各浏览器,独立设置其display属性为none-->
    <datalist id="greetings" style="display: none">
        <option value="HTML5学习">HTML5学习</option>
        <option value="CSS3学习">CSS3学习</option>
        <option value="JavaScript学习">JavaScript学习</option>
     </datalist>
</form>

效果:

技术分享图片

Html5主要新增表单属性

标签:字符   使用   auto   list   splay   兼容各浏览器   单行   ram   html5学习   

原文地址:https://www.cnblogs.com/oneTOinf/p/8283935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!