zoukankan      html  css  js  c++  java
  • html5表单新增元素与属性2

    1.标签的control属性
    在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。
    <script>
    function setValue(){
         var label=document.getElementById("label");
         var txtbox=label.control;
         textbox.value="010000";
    }
    </script>
    <form>
         <label id="label">
              邮编:
              <input id="txt_zip" maxlength="6">
              <small>请输入六位数字</small>
         </label>
         <input type="button" value="设置默认值" onclick="setValue()">
    </form>
     
    2.文本框的placeholder属性
    placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
    <input type="text" placeholder="请输入用户名">
     
    3.文本框的list属性
    在html5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id.
    datalist元素也是html5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不再选择列表之内时,
    允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
    <form>
         <input type="text" name="greeting" list="greetings">
         <datalist id="greetings" style="display:none">
              <option value="HTML5学习">HTML5学习</option>
              <option value="Android学习">Android学习</option>
              <option value="IOS学习">IOS学习</option>
         </datalist>
    </form>
     
    4.文本框的autocomplete属性(on   off)
    帮助输入所有的自动完成功能,是一个既节省输入时间又十分方便的功能。
    在html5之前,因为谁都可以看见输入的值,所有在安全方面存在缺陷,只要使用AutoComplete属性,
    安全性方面也可以得到很好的控制。
     
    5.文本框的pattern属性
    在HTML5中,对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会针对这些进行检查,
    检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,
    提示输入的内容必须符合给定格式。
    <form action="123.php">
         请输入内容
         <input pattern="[A-Z]{3}" name="part">
         <input type="submit">
    </form>
     
    6.文本框的selectiondirection属性
    对input元素和textarea元素,HTML5增加了selectiondirection属性。当用户在这两个元素中用鼠标选取部分文字时,
    可以使用该属性来获取选取方向。当用户正向选取文字时,改属性值为“forward”,当用户反向选取文字时,该属性值
    为“backward”。当用户没有选取任何文字时,该属性值为“forward”。
    <script>
    function AD(){
         var control=document.forms[0]['text'];
         var Direction=control.selectionDirection;
         alert(Direction);
    }
    </script>
    <form>
         <input type="test" name="text">
         <input type="button" value="点击我" onclick="AD()">
    </form>
     
    7.复选框的indeterminate属性
    对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。
    在html5中,可在javascript脚本代码中对该元素使用indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
    <input type="checkbox" indeterminate id="cb">属性测试
    <script>
         var cb=document.getElementById("cb");
         cb.indenterminate=true;
    </script>
    有三种状态,选取,未选取,待选取状态
     
    8.image提交按钮的height属性与width属性
    针对类型为image的input元素,html5新增了两个属性,height、width分别用来指定图片按钮的高度和宽度。
    <form action="test.php" method="post">
         姓名:<input type="text" name="name">
         <input type="image" src="13.gif" alt="编辑" width="50" height="20">
    </form>
     
  • 相关阅读:
    1.3、python内置类型(0529)
    1.2、Python快速入门(0529)
    1.1、Python快速入门(0529)
    mini Linux制作过程(25/01)
    samba基本应用24-4及示例
    Apache+Php+Mariadb+NFS+discuz
    U盘中病毒了怎么办
    bind9安装配置
    负载均衡的实现(1)
    MySQL之优化
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495266.html
Copyright © 2011-2022 走看看