详解HTML5表单新增特性

日期:2021-02-27 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

1. 表单内元素的form特性

在H5中能够把form放到网页页面的任何地区,随后为该元素特定1个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⑴.jsp">递交到1网页页面</form>
     <input type="submit" action="1⑵.jsp">递交到2网页页面</form>
     <input type="submit" action="1⑶.jsp">递交到3网页页面</form>
    </form>

3. 表单内元素的formmethod特性

能够对表单的每个元素特定递交方式

<form action="1.jsp">
     <input type="submit" action="1⑴.jsp" formmethod="post">递交到1网页页面,post递交方式</form>
     <input type="submit" action="1⑵.jsp" formmethod="get">递交到2网页页面,get递交方式</form>
    </form>

4. 表单内元素的formenctype特性

同上,功效与每个元素,编码略

5. 表单的formtarget特性

同上,功效与每个元素,编码略

6.元素的autofocus特性

为文字框、挑选框和按钮控制等再加autofocus特性,画面开启时,将全自动得到聚焦点。

<input type="text" action="1⑶.jsp" autofocus>递交到3网页页面</form>

1个网页页面上只能有1个控制具备autofocus特性,不可以乱用

7. required特性

能够用在大多数数键入用的元素,若键入的值为空则不容许递交,游玩器显示信息文本信息内容提醒客户务必键入內容。

8. labels特性

可为表单全部元素加上1个lables特性,特性值为1个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>

当客户不键入任何值时,点击认证,文字框周围会动态性的加上1个标识元素,标识元素为“请键入名字”;当客户在文字框中有键入时,文本为“请键入名字”的标识将被删掉。

9. 标识的control特性

能够在标识(label)內部置放1个表模块素,并根据该标识的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>

当你在文字框中键入“你”时,下面会出現3栏提醒“你是人”、“你是猪”、“你是狗”,沒有重要字将不出現提醒

12. 文字框的autocomplete特性

autocomplete有3种值"on"、"off"、""(不特定)。不开展特定时,应用游玩器的默认设置值。应用方式以下

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

当你在文字框内键入如“我是人”点一下递交后,回到前1页,再在文字框中键入“我”,就会出线提醒“我是人”。

13. 文字框的pattern特性

非常于立即在html一部分用正则表达式表述式分辨值键入是不是合乎规定。

请键入內容:<input type="text" pattern="[0⑼][A-Z]{3}">

此段编码规定键入1个数据3个大写字母,假如键入有误,则出現“请与所规定的內容维持1致(谷歌)”的提醒。

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特性

  • height:特定照片按钮中照片的高宽比;
  • width:特定照片按钮中照片的宽度;
<input type="image" src="img/2.png" width="23" height="23">

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

  • maxlength :应用整数金额值开展设置,用于限制textarea元素中可键入文本的个数。
  • wrap:可特定特性值为soft与hard.当特性为hard时,在沒有用回车键而是文本超过1排要求范畴而全自动换行时,递交表单时会在换行处加上1个换行标示。

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!