HTML5表单新增元素与属性

最新推荐文章于 2019-08-06 16:12:51 发布

月轩居士

最新推荐文章于 2019-08-06 16:12:51 发布

阅读量570

点赞数

分类专栏： Html5，Css3 文章标签： html5

Html5，Css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.表单内元素的form属性

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

代码示例如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
   
 <!--指定这个form的id，这样这个form内部的属性就不一定要写在form内部了，也可以写在外部。只要声明id即可-->  
     <form id="testform">  
         <input type="text">  
         <textarea form="testform"></textarea>  
     </form>  
   
 </body>  
 </html>  

2.表单内元素的formaction属性

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

代码示例如下：

（1）首先在服务端建立一个项目，我在Eclipse中新建一个Dynamic Web Project，然后在三个jsp中编写代码如下：

[html]view plain copy 
   
 print?
 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Insert title here</title>  
 </head>  
 <body>  
 这是第一个页面！  
 </body>  
 </html>  

（2）然后在IDEA中实现HTML代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <form>  
         <input type="submit" name="n1" value="提交到第一个页面" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">  
         <input type="submit" name="n2" value="提交到第二个页面" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">  
         <input type="submit" name="n3" value="提交到第三个页面" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">  
     </form>  
   
 </body>  
 </html>  

（3）点击不同的按钮，页面就会跳转到不同的jsp页面上。也就是说，这个在HTML5中，一个form中的不同按钮可以执行不同的formaction,然后跳转到不同的页面。在HTML4中，一个表单只能有一个formaction，就算有多个按钮，也只能跳到同一个formaction指定的页面。

3.表单内元素的formmethod属性

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

代码示例如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <form id="testform">  
         <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">使用post提交  
         <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">使用get提交  
     </form>  
   
   
 </body>  
 </html>  

通过点击不同的按钮，就能进行不同方式的请求，并把数据发送到请求页面上。

4.表单内元素的formenctype属性

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

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <form>  
   
         <!--表单数据中的空格被转化为加号，但不对表单数据中的特殊字符进行编码-->  
         <input type="text" formenctype="text/plain">  
   
         <!--不对字符进行编码，在使用包含文件上传的表单时必须使用该值-->  
         <input type="text" formenctype="multipart/form-data">  
   
         <!--在发送前编码所有字符，当表单元素的action属性为get时，需要使用这种方式把表单数据转化成字符-->  
         <input type="text" formenctype="application/x-www-form-urlencoded">  
   
   
     </form>  
   
 </body>  
 </html>  

5.表单内元素的formtarget属性

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
 <form>  
     <input type="submit" name="n1" value="提交到第一个页面" formtarget="_blank" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">  
     <input type="submit" name="n2" value="提交到第二个页面" formtarget="_self" formaction="http://localhost:8080/TestHTMLformaction/Second.jsp">  
     <input type="submit" name="n3" value="提交到第三个页面" formtarget="_parent" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">  
     <input type="submit" name="n3" value="提交到第三个页面" formtarget="_top" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">  
     <input type="submit" name="n3" value="提交到第三个页面" formtarget="framename" formaction="http://localhost:8080/TestHTMLformaction/Third.jsp">  
 </form>  
   
   
 </body>  
 </html>  

6.表单内元素的autofocus属性

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

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <form>  
         <input type="text">  
         <input type="text" autofocus>  
   
     </form>  
   
 </body>  
 </html>  

7.表单内元素的required属性

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

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
     <form>  
   
         <input type="text" required="required">  
         <!--<input type="button" name="we" value="提交" formaction="http://localhost:8080/TestHTMLformaction/First.jsp">-->  
   
         <button formaction="http://localhost:8080/TestHTMLformaction/First.jsp">提交</button>  
   
     </form>  
   
 </body>  
 </html>  

8.表单内元素的labels属性

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

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <!--JS代码和HTML可以混合进行编程-->  
     <script>  
         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>  