1.

　form属性

formaction属性
formmethod属性
formenctype属性
formtarget属性
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>H5form</title>

 </head>

 <body>

     <div class="content">

         <form action="" id="testfrom">

             <input type="text">

         </form>

         <textarea name="" id="" cols="30" rows="10" form="textarea">表单内元素的form属性</textarea>

         <p>formaction属性：将表单提交到不同的页面</p>

         <form action="server.jsp">

             <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1

             <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2

         </form>

         <p>formmethod属性：对每个表单元素指定不同的提交方法</p>

         <form action="">

             姓名：<input type="text" name="name" formmethod="post" value="post提交方式"><br>

             <input type="submit" value="get提交方式" frommethod="get">

         </form>

         <p>formenctype属性对表单元素分别指定不同的编码方式</p>

         <input type="text" formenctype="multipart/form-data">

         <p>formtarget属性指定提交后在何处打开所需要加载的页面</p>

         <p>autofocus属性：页面打开后，控件自动获取光标焦点（注意：一个页面只能有一个控件具有autofocus属性）</p>

         <input type="text" autofocus>

     </div>

     <script>

     </script>

 </body>

 </html>

2.

labels属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>labels属性</title>

 </head>

 <body>

    <form action="" id="testfrom">

        <label for="txt_name" id="label">姓名：</label>

        <input type="text" id="txt_name">

        <input type="button" id="btnValidate" value="验证">

    </form>

    <script>

        var page = {

             init : function(){

                 this.bindEvent();

             },

             bindEvent : function(){

                 var _this = this,

                     button  = document.getElementById('btnValidate');

                 button.onclick = function(){

                     _this.validate();

                 }

             },

             validate : function(){

                 var txtName = document.getElementById('txt_name'),

                     button  = document.getElementById('btnValidate'),

                     form    = document.getElementById('testfrom');

                 if(txtName.value.trim() === ''){

                     if(txtName.labels.length === 1){

                         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"

                         );

                         txtName.setAttribute(

                             "style","border:1px solid red"

                         )

                     }

                 }

                 else if(txtName.labels.length>1){

                     form.removeChild(txtName.labels[1]);

                      txtName.setAttribute(

                             "style","border:1px solid #ccc"

                         )

                 }

             }

        }

        window.onload = page.init();

    </script>

 </body>

 </html>

3.

label标签的control属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>label标签的control属性</title>

 </head>

 <body>

     <p>

         H5中,可以再标签label元素内部放置表单元素，并且通过该标签的control属性来访问该表单元素。

         eg：通过label的control属性设置input的value

     </p>

     <form action="">

         <label for="txt_zip" id="label">

             邮编：

             <input type="text" id="txt_zip" maxlength="6">

             <small>请输入六位数字</small>

         </label>

         <input type="button" value="设置默认值" id="setValue">

     </form>

     <script>

         var page = {

             init : function(){

                 this.bindEvent();

             },

             bindEvent : function(){

                 var _this   = this,

                     btn     = document.getElementById('setValue');

                 btn.onclick = function(){

                     _this.setValue();

                 }

             },

             setValue : function(){

                 var label     = document.getElementById('label'),

                     textbox   = label.control;

                 textbox.value = '123456';

             },

             //这里直接通过获取input id设置value值。

             // setValue : function(){

             //     var ipt = document.getElementById('txt_zip');

             //     ipt.value = '123456';

             // }

         }

         window.onload = page.init();

     </script>

 </body>

 </html>

4.

placeholder属性
autocomplete属性
pattern属性
SelectionDirection属性
复选框 indeterminate属性
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>text</title>

     <style>

         /* 设置placeholder样式 从 Firefox 19 开始将不再支持一个冒号的「:-moz-placeholder」伪元素，改成标准的两个冒号的「::-moz-placeholder」。今后若要兼容，开发者需要在CSS中同时书写两个伪元素。*/

         /* Firefox浏览器 */

         input::-moz-placeholder{

             color :blue;

         }

         /* 更早之前的Firefox浏览器版本 */

         input:-moz-placeholder{

             color :blue;

         }

         /* webkit系列浏览器 */

         input::-webkit-input-placeholder{

             color :blue;

         }

     </style>

 </head>

 <body>

     <p>placeholder属性</p>

     <input type="text" placeholder="input me">

     <p>文本框的list属性,autocomplete属性</p>

     <div class="list">

         text: <input type="text" name="greeting" list="grreetings" autocomplete="on">

         <datalist id="grreetings" style="display: none;">

             <option value="12">12</option>

             <option value="13">13</option>

             <option value="14">14</option>

         </datalist>

     </div>

     <p>pattern属性：设置正则表达式</p>

     <form action="">

         指定格式：<input type="text" pattern="^[0-9]{2,3}$" name=part>

         <input type="submit">

     </form>

     <p>input,textarea的SelectionDirection:获取用户用鼠标选取文字时，该属性可以获取选取的方向</p>

     <form action="">

         <input type="text" name='text'>

         <input type="button" value="click_me" id="SDBtn">

     </form>

     <div class="checkboxDiv">

         <p>复选框具有选取，非选取，不明三种状态</p>

         <input type="checkbox" indeterminate id='cb'>indeterminate Test

     </div>

     <script>

         var page = {

             init : function(){

                 this.bindEvent();

             },

             bindEvent : function(){

                 var SDBtn     = document.getElementById('SDBtn');

                 SDBtn.onclick = function(){

                     var control   = document.forms[1]['text'],

                         Direction = control.selectionDirection;

                     alert(Direction);

                 }

                 var cb = document.getElementById('cb');

                 cb.indeterminate = true;

                 // cd.checked       = true;

                 //检测复选框状态

                 if(cb.indeterminate){

                     alert("不明状态");

                 }

                 else if(cb.checked){

                     alert("选取状态");

                 }

                 else{

                     alert("非选取状态");

                 }

             }

         }

         window.onload = page.init();

     </script>

 </body>

 </html>

H5_ 表单及其他新增和改良元素的更多相关文章

  1. html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  2. html5表单及新增的改良元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 当一个页面中有多个form表单并且有重名的元素时，js获取指定form表单中的指定元素

    有时候我们会在一个页面中写了多个form表单,碰巧多个form表单中又有相同名称的元素,而我们又不想改名字,这个时候就能用到 $("#form1 #div1").val() 好玩吧 ...

  5. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  6. html5--3.17 新增的表单重写

    html5--3.17 新增的表单重写 学习要点 对form元素的属性做一个小结,对个别属性进行一点补充 重点掌握新增的表单重写 form元素的属性小结 action/method/enctype/n ...

  7. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  8. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  9. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

随机推荐

  1. 分布式系列十三: nginx

    nginx偏运维, 不过作为开发应该了解它能做什么事情, 其作为技术架构的一部分必不可少 正向代理和反向代理 正向代理是代理的客户端, 反向代理是代理的服务端. nginx就是一款可以作反向代理的we ...

  2. LeetCode第二十四题-交换链表中节点值

    Swap Nodes in Pairs 问题简介:给定链表,交换每两个相邻节点并返回链表. 举例: 输入:1->2->3->4 输出:2->1->4->3 链表结构 ...

  3. 基于XML搭建SpringMVC项目

    *如果你需要将应用部署到不支持Servlet3.0容器中 或者 你只是对web.xml情有独钟,那我们只能按照传统的方式,通过web.xml来配置SpringMVC. *搭建SpringMVC需要在w ...

  4. Andriod studio 目录结构

    新建一个项目后,大致有一下几个目录 1)gradle 目录 构建工具系统的jar和wrapper等,jar告诉了AS如何与系统安装的gradle构建联系. 2).idea 目录 AS生成的工程配置文件 ...

  5. IIS 运行ASP.Net的基本配置（编辑中。。。）

    今天在新建的IIS上运行Asp.net 程序,发现IIS根本没有走asp的路由系统,直接返回了404,后来发现是IIS没有正确安装,需要安装以下的组件: 未安装前,IIS里的样子: 安装后,IIS的样 ...

  6. JAVA第二次实训作业

    1.一维数组的创建和遍历. 声明并创建存放4个人考试成绩的一维数组,并使用for循环遍历数组并打印分数. 要求: 首先按“顺序”遍历,即打印顺序为:从第一个人到第四个人: 然后按“逆序”遍历,即打印顺 ...

  7. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

  8. spring 报错

    一. java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncodingFilter 解决方案: 1. ...

  9. 网络流24题——骑士共存问题 luogu 3355

    题目描述:这里 从这里开始,我们涉及到了一个新的问题:最小割问题 首先给出一些定义(本人根据定义自己口胡的): 一个流网络中的一个割是一个边集,使得割掉这些边集后源点与汇点不连通 而最小割问题就是一个 ...

  10. 洛谷 P1414 又是毕业季II

    题目链接 https://www.luogu.org/problemnew/show/P1414 题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离 ...