您的位置:68399皇家赌场 > 服务器租用 > 表单及表单新增加成分,表单表单新添成分

表单及表单新增加成分,表单表单新添成分

发布时间:2019-05-07 03:31编辑:服务器租用浏览(96)

    表单属性

      1:Action 属性

         action 属性的功效是当提交表单时,注脚要向何方发送表单数据。将表单数据发往哪里。假诺省去该属性则表单数据会发往当前网页。

      2:Method 属性
         method 属性规定在付出表单时所用的 HTTP 方法(GET 或 POST):

         要想表单数据提交时更是安全采用post。因为get是将表单数据放在U大切诺基L后提交的。所以不要采用get传敏感新闻举个例子密码。小编认为提交数据运用post,得到多少选拔get。

      3:Name 属性
         若是要科学地被提交,种种输入字段必须安装三个 name 属性。因为唯有设置了 name 属性的表单成分工夫在交付表单时传递它们的值。

      4:target 属性

         target 属性规定在哪个地方展开 action U福睿斯L。

     

    表单新增美成分属质量让大家尤其急迅方便人民群众的书写代码。

    表单及表单新增新币素,表单表单新增卢比素

    要想更加好应用表单将在询问表单的的愈多因素与本性,首先看望对表单基本驾驭。

    详解HTML伍表单新扩展属性,详解html伍表单

    一. 表单内成分的form属性

    在H5中得以把form放到页面的任哪个地点方,然后为该因素钦赐2个form属性,属性值为该表单的id,那样就足以注脚该因素从属于钦点表单了

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

    二. 表单内成分的formaction属性

    在H4中,表单的交由格局

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

    交给整体表单

    在H5中,可感觉表单的每3个属性增多提交到的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属性

    能够对表单的每1个因素钦定提交方法

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

    同上,功能与每2个成分,代码略

    5. 表单的formtarget属性

    同上,功效与每叁个成分,代码略

    6.元素的autofocus属性

    为文本框、选拔框和按键控件等丰富autofocus属性,画面张开时,将自动获取主旨。

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

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

    7. required属性

    能够用在大多数输入用的要素,若输入的值为空则不容许提交,游历器展现文字音讯提示用户必须输入内容。

    8. labels属性

    可为表单全部因素增加3个lables属性,属性值为2个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)内部放置二个表单成分,并透过该标签的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>
    

    在游历器中开垦页面,单击“设置暗许值”按钮,文本框中会显示23145陆.

    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栏提示“你是人”、“你是猪”、“你是狗”,未有首要字将不出新提醒

    1二. 文本框的autocomplete属性

    autocomplete有两种值"on"、"off"、""(不内定)。不进行点名时,使用游历器的暗中同意值。使用方式如下

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

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

    一3. 文本框的pattern属性

    一定于直接在html部分用正则表明式决断值输入是不是符合供给。

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

    此段代码供给输入一个数字七个大写字母,假设输入不准确,则产出“请与所必要的剧情保持一致(谷歌(Google))”的升迁。

    1四. 文本框的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时,在未有用回车键而是文字超过一排规定范围而机关换行时,提交表单时会在换行处增添一个换行标记。

    以上正是本文的全体内容,希望本文的剧情对我们的上学或然办事能拉动一定的支援,同时也旨在多多辅助帮客之家!

    www.68399.com, 一. 表单内元素的form属性 在H第55中学得以把form放到页面包车型地铁别的地点,然后为该因素钦点贰个form属性,属性...

    表单的新扩展成分与质量

    1:表单内成分的form属性

       在HTML5中得以把表单内的依靠成分写在页面包车型大巴任何地方,然后为该因素钦定三个form属性,属性值为该表单的id,那样就足以把该因素钦命到相应的表单中。

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

    诸如此类便于书写样式。

    二:表单内成分的formaction属性

        在HTML5中formaction 属性覆盖 form 成分的 action 属性。为不相同的提交按钮扩充formaction属性,使得在单击时能够将表单能够交给给分化的页面。该属性适用于 type="submit" 以及 type="image"。

    <form action="dizhi.asp">
      <input type="submit" formaction="dizhi1.asp" value="dizhi1" />
       <input type="submit" formaction="dizhi2.asp" value="dizhi2" />
    </form>
    

     3:表单内成分的formmethod属性

         在HTML5中得以运用formmethod属性为种种分裂的表单成分分别钦定分裂的提交方法。

    <form action="dizhi.asp">
      <input type="text" name="name"/>
      <input type="submit" formaction="dizhi1.asp"  formmethod="post"/>
       <input type="submit" formaction="dizhi2.asp"  formmethod="get"/>
    </form>
    

     

    4:表单内元素的formenctype属性

        在HTML5中能够利用formenctype属性为各样差异的表单成分分别钦赐不一样的编码情势。

     

    五:表单内成分的formtarget属性

        在HTML第55中学能够使用formtarget属性用于钦定在何处打开表单提交后所亟需的加载的页面。

     

    6:表单内成分的autofocus属性

        画面展开时自动获取光标宗旨,3个页面上不得不有1个控件具备该属性。

     

    七:表单成分的required属性

        HTML5中新增添的required属性能够行使在大大多输入成分上,在付出表单时,假使表单为空则分化意提交。

    www.68399.com 1

     

    8:表单内成分的labels属性 

        在HTML5中,为所以可利用标签的表单元素定义三个labels属性,属性值为NodeList对象,代表该因素所绑定的价签成分所构成的聚众。

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

     9:标签的control属性

          在HTML5中,能够在标签(label成分)内部放置叁个表单成分,并且通过该标签的control属性访问该表单成分。

    <script type="text/javascript">
     function set(){
     var lbl= document.getElementById("lbl");
     var txt =lbl.control;
     txt.value="0556";
    
     }
    </script>
    <form>
    <label  id="lbl">
      <input id="txt" maxlength="4">
    </label>
    <input type="button" value="恢复默认值" onClick="set()">
    </form>
    

    www.68399.com 2

    拾:文本框的placeholder属性

         placeholder是指当文本框处于未输入状态时显得的输入提醒。当文本框处于未输入状态且未获得光标主题时,模糊呈现输入提醒文字。也得以动用css来决定其汉语字的体制。

    input::-webkit-input-placeholder{ color:#0F0;}<input type="text" placeholder="输入提示">www.68399.com 3www.68399.com 4

     

     

    1一:文本框的list属性

        在HTML5中 为需求的input标签设置三个list属性,然后在随便地方放一对 datalist 标签,并给 datalist 标签三个 id,和 list 属性值i壹致。

    在 datalist 标签下放列表项,种种列表项用 option 元标签来代表,那样就能够做五个下拉框,当用户须要的值不在下拉列表中时,能够自行输入。datalist 标签的内容不呈现,唯有在文本框获取关节时才会以下拉列表的样式表现出来。

    <form action="">
     <input type="text" list="list1" name="text"  autocomplete="on"/>
     <input type="submit" />
    </form>
    <datalist id="list1">
     <option value="练习">练习</option>
     <option value="练习1">练习1</option>
     <option value="练习2">练习2</option>
    </datalist>
    

    www.68399.com 5

    1二:文本框的autocomplete属性

        援助输入的的性情,autocomplete有三种值"on"、"off"、"default"(不钦点)。不开始展览点名时,使用游历器的暗许值。

    采纳办法如下当你在文本框内输入如“某壹段话”点击提交后,尽管再度在文本框中输入“某”,点击就能提示“某①段话”。

     www.68399.com 6

    一三:文本框的patten属性

        等于直接在html部分用正则表明式判别值输入是或不是符合供给。
         <input type="text" pattern="^[0-9]*$">

     

    1四:文本框的selectionDirection属性

    针对input成分与textarea元素,能够赢得用户选用成分时是正向选取照旧反向选择。正向选择值或没选中forward,反向为backward。

     

    壹5:复选框的indeterminate属性

    在H5中,能够在js中对该因素运用indeterminate属性,以证实复选框“尚未明显选用”状态。 在js中采用布尔类型的值对该属性赋值。在js代码中对复选框选中的状态举行判别时必要先推断indeterminate属性,在认清checked属性值。

     

    16. image提交开关的height属性与width属性

    表单提交的图片开关

     <input type="image"  src="../照片/新建文件夹/t0148fb9玖e玖bb5edfc二.jpg"width="2伍"height="二伍">www.68399.com 7

     

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

     maxlength :,用于限定textarea成分设置最大输入值。
      wrap:其属性值为soft与hard。当属性为hard时,在未有用回车键而是文字越过一排规定范围而自动换行时,提交表单时会加换行符。soft则在提交时不会加换行符。

     

    1捌:在HTML5中追加了input很多的type类别

        比方UBMWX伍L类型,email类型,在输入时会要求一定的格式,自动决断输入是不是合乎格式

    date类型,time类型,是特别用来输入时间的。

    datetime-local类型是特地用来检查本地日期和时间的,提交时对输入日期实行中用检查。www.68399.com 8

    month类型特意输入月份的文本框。www.68399.com 9

    week类型特地输入周的文本框。www.68399.com 10

    number类型特意输入数字。

    range类型是1种只同意输入一段范围内的数值的文本框。www.68399.com 11

    search类型是1种特意用来输入寻觅的重大词的文本框。

    Tel类型用于输入电话的正规化文本框。

    color类型用于接纳颜色,会活动出来颜色选用器。www.68399.com 12

     

     

     

    1玖:日期时间等级次序的新添成分的属性step属性,valueAsDate属性

       step属性:  是对点名属性值的采纳值得限定。  调节成分的值扩展或裁减的肥瘦。

       valueAsDate属性:是用以安装或得到UTC日期和时间。 

     

     

    ——仿效自《HTML5与css三的上流指南》

    www.68399.com 13

    但愿能遭受一齐前行的www.68399.com 14

    表单属性

      1:Action 属性

         action 属性的效用是当提交表单时,证明要向何处发送表单数据。将表单数据发往哪个地方。若是省去该属性则表单数据会发往当前网页。

      2:Method 属性
         method 属性规定在付给表单时所用的 HTTP 方法(GET 或 POST):

         要想表单数据交由时越发安全选择post。因为get是将表单数据放在U普拉多L后交给的。所以并非采纳get传敏感音讯举个例子密码。作者觉着提交数据选拔post,获得数量应用get。

      3:Name 属性
         假若要精确地被提交,各样输入字段必须设置一个 name 属性。因为唯有设置了 name 属性的表单元素工夫在付出表单时传递它们的值。

      4:target 属性

         target 属性规定在何处张开 action UHummerH二L。

     

    表单新增新币素属质量让大家越发急速方便人民群众的书写代码。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:表单及表单新增加成分,表单表单新添成分

    关键词: 68399皇家赌场

上一篇:【www.68399.com】es六箭头函数

下一篇:没有了