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>
     
  • 相关阅读:
    Dynamics AX 2012 R2 配置E-Mail模板
    Dynamics AX 2012 R2 设置E-Mail
    Dynamics AX 2012 R2 为运行失败的批处理任务设置预警
    Dynamics AX 2012 R2 耗尽用户
    Dynamics AX 2012 R2 创建一个专用的批处理服务器
    Dynamics AX 2012 R2 创建一个带有负载均衡的服务器集群
    Dynamics AX 2012 R2 安装额外的AOS
    Dynamics AX 2012 R2 将系统用户账号连接到工作人员记录
    Dynamics AX 2012 R2 从代码中调用SSRS Report
    Dynamics AX 2012 R2 IIS WebSite Unauthorized 401
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495266.html
Copyright © 2011-2022 走看看