• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    详解HTML5表单新增属性

    1. 表单内元素的form属性

    在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了

    <form id="testform">
         <input type="text">
        </form>
        <textarea form="testform"></textarea>

    2. 表单内元素的formaction属性

    在H4中,表单的提交方式

    <form action="1.jsp">
    </form>

    提交整个表单

    在H5中,可以为表单的每一个属性添加提交到的jsp页面

    <form action="1.jsp">
         <input type="submit" action="1-1.jsp">提交到1页面</form>
         <input type="submit" action="1-2.jsp">提交到2页面</form>
         <input type="submit" action="1-3.jsp">提交到3页面</form>
        </form>

    3. 表单内元素的formmethod属性

    可以对表单的每一个元素指定提交方法

    <form action="1.jsp">
         <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
         <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面,get提交方法</form>
        </form>

    4. 表单内元素的formenctype属性

    同上,作用与每一个元素,代码略

    5. 表单的formtarget属性

    同上,作用与每一个元素,代码略

    6.元素的autofocus属性

    为文本框、选择框和按钮控件等加上autofocus属性,画面打开时,将自动获得焦点。

    <input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

    一个页面上只能有一个控件具有autofocus属性,不能滥用

    7. required属性

    可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。

    8. labels属性

    可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

    <script type="text/javascript">
            window.onload = function () {
             var text = document.getElementById('text');
                var btn = document.getElementById('btn');
                var form = document.getElementById('form');
                btn.onclick = function() {
                    if (text.value.trim() =="") {
                     //alert(text.labels.length)
                     if(text.labels.length==1) {
                      var label = document.createElement("label");
                      label.setAttribute("for","text");
                      form.insertBefore(label,btn);
                      text.labels[1].innerHTML = "请输入姓名";
                      text.labels[1].setAttribute(
                   "style","font-size:9px;color:red");
                     }
                    }
                    else if(text.labels.length>1)
                     form.removeChild(text.labels[1]);
                    }
            }
     </script>
        <form id="form"> 
         <label id="label" for="text">姓名:</label>
         <input id="text">
         <input id="btn" type="button" value="验证">
        </form>
    

    当用户不输入任何值时,单击验证,文本框旁边会动态的添加一个标签元素,标签元素为“请输入姓名”;当用户在文本框中有输入时,文字为“请输入姓名”的标签将被删除。

    9. 标签的control属性

    可以在标签(label)内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。

    <script type="text/javascript">
            function setValue() {
             console.log(1);
             var label =document.getElementById("label");
             var textbox = label.control;
             textbox.value = "231456"
            }
             </script>
                 <form>
         <label id="label">
          邮编:
          <input id="txt_zip" maxlength="6">
          <small>请输入6位数字</small>
         </label>
         <input type="button" value="设置默认值" onclick="setValue()">
        </form>

    在游览器中打开页面,单击“设置默认值”按键,文本框中会显示231456.

    10. 文本框的placeholder属性

    当文本框(text或者textarea)处于为选择状态时输入提示信息(灰色)

    <input type="text" palceholder="hahah">

    11. 文本框的list属性

    结合h5新增的datalist元素,制作提示框

    text:<input type="text" name="greeting" list="greetings">
        <!-- 使用style="display:none";将datalist元素设置为不显示 -->
        <datalist id="greetings" style="display:none">
         <option value="你是人">你是人</option>
         <option value="你是猪">你是猪</option>
         <option value="你是狗">你是狗</option>
        </datalist>

    当你在文本框中输入“你”时,下面会出现三栏提示“你是人”、“你是猪”、“你是狗”,没有关键字将不出现提示

    12. 文本框的autocomplete属性

    autocomplete有三种值"on"、"off"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下

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

    当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。

    13. 文本框的pattern属性

    相当于直接在html部分用正则表达式判断值输入是否符合要求。

    请输入内容:<input type="text" pattern="[0-9][A-Z]{3}">

    此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。

    14. 文本框的selectionDirection属性

    针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。

    <script type="text/javascript">
            function alertSelectionDirection() {
             var control = document.forms[0]['text'];
             var Direction = control.selectionDirection;
             alert(Direction);
            }
     </script>
     <form>
         <input type="text" name="text">
         <input type="button" value="惦记我" onclick="alertSelectionDirection()" >
            </form>
    

    15. 复选框的indeterminate属性

    对于复选框来说,过去只有选取和与非选取状态,html5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。

      <script>
            var cb = document.getElementById("cb");
            //将indeterminate的属性设置为true
            cb.indeterminate = true;
            </script>
            <input type="checkbox" indeterminate id="cb">indeterminate属性测试

    16. image提交按钮的height属性与width属性

    <input type="image" src="img/2.png" width="23" height="23">

    17. textarea元素的maxlength属性与wrap属性

    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

    上一篇:详解HTML5通讯录获取指定多个人的信息
    下一篇:如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    详解HTML5表单新增属性 详解,HTML5,表单,新增,属性,