详解HTML5表单新增属性

网页制作 2024/12/28 佚名

3 1 2

清风细雨楼 Design By www.eepep.com

1. 表单内元素的form属性

在H5中可以把form放到页面的任何地方，然后为该元素指定一个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-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属性

可以对表单的每一个元素指定提交方法

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

同上，作用与每一个元素，代码略

5. 表单的formtarget属性

同上，作用与每一个元素，代码略

6.元素的autofocus属性

为文本框、选择框和按钮控件等加上autofocus属性，画面打开时，将自动获得焦点。

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

一个页面上只能有一个控件具有autofocus属性，不能滥用

7. required属性

可以用在大多数输入用的元素，若输入的值为空则不允许提交，游览器显示文字信息提示用户必须输入内容。

8. labels属性

可为表单所有元素添加一个lables属性，属性值为一个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>

当用户不输入任何值时，单击验证，文本框旁边会动态的添加一个标签元素，标签元素为“请输入姓名”；当用户在文本框中有输入时，文字为“请输入姓名”的标签将被删除。

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>

在游览器中打开页面，单击“设置默认值”按键，文本框中会显示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>

当你在文本框中输入“你”时，下面会出现三栏提示“你是人”、“你是猪”、“你是狗”，没有关键字将不出现提示

12. 文本框的autocomplete属性

autocomplete有三种值"on"、"off"、""（不指定）。不进行指定时，使用游览器的默认值。使用方法如下

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

当你在文本框内输入如“我是人”点击提交后，返回前一页，再在文本框中输入“我”，就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

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

此段代码要求输入一个数字三个大写字母，如果输入不正确，则出现“请与所要求的内容保持一致（谷歌）”的提示。

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时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

HTML5表单新增属性,html5新增表单元素

清风细雨楼 Design By www.eepep.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

清风细雨楼 Design By www.eepep.com

评论“详解HTML5表单新增属性”

暂无评论...

www.eepep.com 清风细雨楼

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

详解HTML5表单新增属性

详解HTML5通讯录获取指定多个人的信息

如何开发一款堪比APP的微信小程序（腾讯内部团队分享）

评论“详解HTML5表单新增属性”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

详解HTML5表单新增属性

详解HTML5通讯录获取指定多个人的信息

如何开发一款堪比APP的微信小程序（腾讯内部团队分享）

评论“详解HTML5表单新增属性”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存