站长资源 网页制作

详解HTML5表单新增属性

整理:jimmy2025/1/10浏览2次

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

<div id="MyContent"><p><strong>1. 表单内元素的form属性</strong></p>
<p>在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了</p>

<p><strong>2. 表单内元素的formaction属性</strong></p>
<p>在H4中，表单的提交方式</p>

<p>提交整个表单</p>
<p>在H5中，可以为表单的每一个属性添加提交到的jsp页面</p>

<p><strong>3. 表单内元素的formmethod属性</strong></p>
<p>可以对表单的每一个元素指定提交方法</p>

<div class="htmlcode">
<pre class="brush:xhtml;"><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></pre>
</div>

<p><strong>4. 表单内元素的formenctype属性</strong></p>
<p>同上，作用与每一个元素，代码略</p>
<p><strong>5. 表单的formtarget属性</strong></p>
<p>同上，作用与每一个元素，代码略</p>
<p><strong>6.元素的autofocus属性</strong></p>
<p>为文本框、选择框和按钮控件等加上autofocus属性，画面打开时，将自动获得焦点。</p>

<p>一个页面上只能有一个控件具有autofocus属性，不能滥用</p>
<p><strong>7. required属性</strong></p>
<p>可以用在大多数输入用的元素，若输入的值为空则不允许提交，游览器显示文字信息提示用户必须输入内容。</p>
<p><strong>8. labels属性</strong></p>
<p>可为表单所有元素添加一个lables属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。</p>

<div class="htmlcode">
<pre class="brush:xhtml;"><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>
</pre>
</div>

<p>当用户不输入任何值时，单击验证，文本框旁边会动态的添加一个标签元素，标签元素为“请输入姓名”；当用户在文本框中有输入时，文字为“请输入姓名”的标签将被删除。</p>
<p><strong>9. 标签的control属性</strong></p>
<p>可以在标签（label）内部放置一个表单元素，并通过该标签的control属性来访问该表单元素。</p>

<div class="htmlcode">
<pre class="brush:xhtml;"><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></pre>
</div>

<p>在游览器中打开页面，单击“设置默认值”按键，文本框中会显示231456.</p>
<p><strong>10. 文本框的placeholder属性</strong></p>
<p>当文本框（text或者textarea）处于为选择状态时输入提示信息(灰色)</p>

<p><strong>11. 文本框的list属性</strong></p>
<p>结合h5新增的datalist元素，制作提示框</p>

<p>当你在文本框中输入“你”时，下面会出现三栏提示“你是人”、“你是猪”、“你是狗”，没有关键字将不出现提示</p>
<p><strong>12. 文本框的autocomplete属性</strong></p>
<p>autocomplete有三种值"on"、"off"、""（不指定）。不进行指定时，使用游览器的默认值。使用方法如下</p>

<p>当你在文本框内输入如“我是人”点击提交后，返回前一页，再在文本框中输入“我”，就会出线提示“我是人”。</p>
<p><strong>13. 文本框的pattern属性</strong></p>
<p>相当于直接在html部分用正则表达式判断值输入是否符合要求。</p>
<p>请输入内容：<input type="text" pattern="[0-9][A-Z]{3}"></p>
<p>此段代码要求输入一个数字三个大写字母，如果输入不正确，则出现“请与所要求的内容保持一致（谷歌）”的提示。</p>
<p><strong>14. 文本框的selectionDirection属性</strong></p>
<p>针对input的text和textarea元素，当用户在这两个元素中用鼠标选取部分文字时，可以使用该元素来获取选择方向。</p>

<div class="htmlcode">
<pre class="brush:xhtml;"><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>
</pre>
</div>

<p><strong>15. 复选框的indeterminate属性</strong></p>
<p>对于复选框来说，过去只有选取和与非选取状态，html5中，可以在js中对该元素使用indeterminate属性，以说明复选框“尚未明确选取”状态。</p>

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

<p><strong>16. image提交按钮的height属性与width属性</strong></p>
<ul>
    <li>height:指定图片按钮中图片的高度； </li>
    <li>width:指定图片按钮中图片的宽度； </li>
</ul>

<p><strong>17. textarea元素的maxlength属性与wrap属性</strong></p>
<ul>
    <li>maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。 </li>
    <li>wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。 </li>
</ul>
<p>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！</p></div>
</div>
            </div>
            <div class="share"> </div>
            <div class="nextinfo">
                <p>上一篇：<a href="/3g/1/70059.html" title="详解HTML5通讯录获取指定多个人的信息 ">详解HTML5通讯录获取指定多个人的信息 </a></p>
                <p>下一篇：<a href="/3g/1/70061.html" title="如何开发一款堪比APP的微信小程序（腾讯内部团队分享）">如何开发一款堪比APP的微信小程序（腾讯内部团队分享）</a></p>
            </div>
            <div class="otherlink">
                <h2>最新资源</h2>
                <ul>
                     
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
 
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
 
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
 
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
 
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
 
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
 
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
 
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
 
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
 
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>

</ul>
            </div>
        </div>
        <div class="sidebar">
            
            
        </div>
        <div class="sidebar">
            友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
        </div>
    </article>
    <footer>
        <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
    </footer>
    <script src="/images3g/nav.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        var elm = jQuery('#left_flow2');
        var startPos = jQuery(elm).offset().top;
        jQuery.event.add(window, "scroll", function() {
            var p = jQuery(window).scrollTop();
            jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');

jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
        });
    });
    </script>
</body>

</html>