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

HTML5 表单新增元素与属性<一>

时间:2016-04-30 19:34:20      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>form属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="testform">
        <input type="text" />
    </form>
    <textarea form="testform"></textarea>
</body>
</html>
View Code

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>formmethod属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="testformmethod">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="1.html" />
        <input type="submit" name="s2" value="v2" formmethod="get" formaction="2.html" />
    
    </form>
</body>
</html>
View Code

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>formaction属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="testform">
        <input type="submit" name="s1" value="v1" formaction="1.html" />
        <input type="submit" name="s2" value="v2" formaction="2.html" />
        <input type="submit" name="s3" value="v3" formaction="3.html" />
    </form>
</body>
</html>
View Code

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>formenctype属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="testform">
        <input type="text" formenctype="text/plain" />
        <input type="text" formenctype="multipart/form-data" />
        <input type="text" formenctype="application/x-www-form-urlencoded" />
    </form>
</body>
</html>
View Code

formtarget属性:

在HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面,在HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后再何处打开所需加载的页面。
_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>formtarget属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="testformtarget">
        <input type="submit" name="s1" value="v1" formtarget="_blank" formaction="1.html" />
        <input type="submit" name="s2" value="v2" formtarget="_self" formaction="2.html" />
        <input type="submit" name="s3" value="v3" formtarget="_parent" formaction="3.html" />
        <input type="submit" name="s3" value="v4" formtarget="_top" formaction="3.html" />
        <input type="submit" name="s3" value="v5" formtarget="framename" formaction="3.html" />
    </form>
</body>
</html>
View Code

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>required属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="1.html">
        <input type="text" required="required">
        <button type="submit">提交</button>
    </form>
</body>
</html>
View Code

autofocus属性:为文本框、选择框或按钮控件加上autofocus属性,当页面打开时,该控件自动获取光标焦点。第一优先级。

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>autofocus属性</title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" autofocus="" />
    </form>
</body>
</html>
View Code

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

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <title>labels属性</title>
    <meta charset="utf-8">
</head>
<body>
     <script type="text/javascript">
         function Validate(){
             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="label" for="txt_name">姓名:</label>
        <input id="txt_name"/>
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    </form>
</body>
</html>
View Code

 

HTML5 表单新增元素与属性<一>

标签:

原文地址:http://www.cnblogs.com/bob-yu/p/5449155.html

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