html5新增的元素与属性

最新推荐文章于 2023-05-02 11:48:17 发布

lisasunli

最新推荐文章于 2023-05-02 11:48:17 发布

阅读量484

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/lisasunli/article/details/51422520

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.form表单属性

2.fornaction提交到jsp中

3.formmethod属性（form表单提交不同的方法）

   
   
    
    
     
     <form id="test">
    
    
    
    
     
         <input type="submit" name="s1" value="v1" formmethod="post" formaction="aside.html">第一个月面
    
    
    
    
     
          <input type="submit" name="s1" value="v1" formmethod="post" formaction="aside.html">第2个页面
    
    
    
    
     
       </form>

4.formenctype属性

formenctype="text/plain"表单中的空格转换成+号，但是对特殊的字符不作处理

formenctype="multipart/form-date"不对字符进行编码，在使用文件上传，控件的表单时必须使用该值

formenctype="application/x-www-form-urlencoded"编码所有的字符，当表单元素，当action属性为get时，浏览器则用当前的编码方式，把表单装换成字符。

5.formtarget属性

formtarget="_blank"在新的浏览器打开

formtarget="_self"在当前的页面中打开

formtarget="_parent在当前父类浏览器打开

formtarget="_top"在的浏览器打开

formtarget="framename"在框架中打开

6.autofocus属性

7.required属性（提交为空时提醒）

   
   
    
    
     
     <form action="" >
    
    
    
    
     
          <input type="text" required="required">
    
    
    
    
     
          <button type="submit">提交</button>
    
    
    
    
     
      </form>

8.labels属性

   
   
    
    
     
     <body>
    
    
    
    
     
     <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" action="" >
    
    
    
    
     
          <label id="label" for="txt_name"></label>
    
    
    
    
     
           <input id="txt_name">
    
    
    
    
     
           <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    
    
    
    
     
           
    
    
    
    
     
      </form>
    
    
    
    
     
     </body>

9.control属性

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

10.placeholder属性（文本框的提示）

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

11.list属性（类似下拉菜单）可以自己输入

   
   
    
    
     
     <form >     
    
    
    
    
     
           <input type="text" name="greeting" list="greetings">
    
    
    
    
     
           <datalist id="greetings" style="display:none">
    
    
    
    
     
             <option value="HTML5学习">HTML5学习</option>
    
    
    
    
     
             <option value="web学习">web学习</option>
    
    
    
    
     
             <option value="ios学习">ios学习</option>        
    
    
    
    
     
           </datalist>
    
    
    
    
     
      </form>

12.AutoComplete属性（后台提交的安全性）

   
   
    
    
     
     <body>
    
    
    
    
     
     <form>
    
    
    
    
     
      <input type="text" name="greeting" autocomplete="off" list="greetings">
    
    
    
    
     
       <datalist id="greetings" style="display:none">
    
    
    
    
     
             <option value="HTML5学习">HTML5学习</option>
    
    
    
    
     
             <option value="web学习">web学习</option>
    
    
    
    
     
             <option value="ios学习">ios学习</option>        
    
    
    
    
     
           </datalist>
    
    
    
    
     
           <input type="submit" value="提交">
    
    
    
    
     
           </form>
    
    
    
    
     
     </body>

13.文本框的pattern属性（输入的格式师是否正确）

   
   
    
    
     
     <body>
    
    
    
    
     
      <form>
    
    
    
    
     
       <input pattern="[A-Z]{3}" name="part">
    
    
    
    
     
           <input type="submit" value="提交">
    
    
    
    
     
           </form>
    
    
    
    
     
     </body>