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

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>

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>

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>

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>

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>

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>

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>

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>

时间: 2024-10-08 14:10:57

HTML5 表单新增元素与属性<一>的相关文章

HTML5 表单新增元素与属性(二)

标签的control属性:在HTML5中,可以在标签内部放置一个表单元素,并通过该标签的control属性来访问该表单元素. <!DOCTYPE html> <html> <head lang="en"> <title>标签的control属性</title> <meta charset="utf-8"> </head> <body> <script type=&q

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

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

表单新增元素和属性

1.新增元素和属性1.1新增属性form属性:表单内的从属元素可以写在页面上任何地方,然后给该元素指定一个form属性,属性值为该表单的id,就可以表明该元素从属于指定表单了.(目前只有Opera 10支持)formaction属性:可以给所有的提交按钮,诸如type:submit.image.submit都增加不同的formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面.(目前无浏览器支持)formmethod属性:可以用来对每个表单元素分别指定不同的提交页面,同时也可以用来

html5中表单新增元素与属性

form 很多初学者对与form不是很理解,其实从html的MDN中可以看出,form是用在前后台的交互上的,比如我需要把表单的内容(input里的内容提交到后台),这是就需要input包裹在form里面. 1 <form action="xxx.php" method="post"> 2 <input type="text" name="ID"> 3 <input type="subm

H5表单新增元素和属性

1.form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testfor

HTML5表单新增属性

------------------siwuxie095 HTML5 表单新增元素与属性 1.form 属性 在 HTML4 中,表单内的从属元素必须书写在表单内部,而 在 HTML5 中,可以把它们书写在页面上任何地方,然后为 该元素指定一个 form 属性,属性值为该表单的 id,这样就 可以声明该元素从属于指定表单了 2.formaction 属性 在 HTML4 中,一个表单内的所有元素只能通过表单的 action 属性被统一提交到另一个页面,而在 HTML5 中,可以为所有 的提交按钮

表单及表单新增元素

要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解  <form> 元素用于用户输入数据的收集  <input> 元素是最重要的表单元素,有许多type其中<input type="submit">是用于向表单处理程序提交表单的按钮.  <select> 元素<option> 元素定义待选择的下拉列表选项,  <textarea> 元素定义文本区域.  <button&

HTML笔记三,表单相关元素和属性

表单元素 <form>:用于生成输入表单,该元素不可视化 action:指定当前表单提交的地址,必填 method:指定提交表单时发送何种类型的请求,post或者get,一般post,必填:其中GET方式可以在地址栏种看到传送的数据,POST方法看不到较安全 enctype:指定对表单内容进行编码的字符集 name:名称 target:以何种方式打开目标url,_self,_blank,_top,_parent四个中的一个 <input>: type= text:单行文本框 pas

HTML5 表单新增内容

一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行输入其他内容. 在使用 datalist 的列表要绑定到输入框,需要使用输入框的 list 属性来引用 datalist 元素的 id . 案例: <input type="text" value="输入明星" list="star"/>