【HTML5】表单新增元素与属性

最新推荐文章于 2024-04-17 12:38:13 发布

Super_Tyr

最新推荐文章于 2024-04-17 12:38:13 发布

阅读量606

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Super_Tyr/article/details/104318457

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

表单内元素的form属性

在HTML4中，表单内的从属元素必须属性在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素属于指定表单了。

简单来说就是，表单元素的form属性与form标签的id值相同即实现从属关系，即使表单元素单独位于其他位置也可以。

表单内元素的formaction属性

在 HTML4中，一个表单内的所有元素只能通过表单（form）的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<form id="testform">
    <input type="submit" name="s1" value="v1" formaction="1.jsp">提交到1.jsp
    <input type="submit" name="s2" value="v2" formaction="2.jsp">提交到2.jsp
</form>

表单内元素的formmethod属性

在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

get/post

表单内元素的formenctype属性

在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。

在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

属性值	含义
text/plain	将空格转换为 “+” 符号，但不编码特殊字符。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
application/x-www-form-urlencoded	默认。在发送前对所有字符进行编码。将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值。

标签的control属性

在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

<body>
<script>
    function setValue() {
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = "010010";

    }
</script>
<form action="">
    <form id="testform">
        <label id="label">
            邮编：
            <input id="txt_zip" maxlength="6">
            <small>请输入6位数字</small>
        </label>
        <input type="button" value="设置默认值" onclick="setValue()">
    </form>
</form>
</body>

文本框的placeholder属性

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

文本框的list属性

在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。

datalist元素也是HTML5新增元素，类似与选择框，不同于下拉菜单的是：当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而当文本框获得焦点时一体式输入的方式显示。

简单来说，就是待选数据列表。一般用法如下：

<form action="">
    <input type="text" name="greeting" list="greetings">
    <datalist id="greetings" style="display: none">
        <option value="CSS">CSS</option>
        <option value="HTML5">HTML5</option>
        <option value="JS">JS</option>
    </datalist>

文本框的autocomplete属性

自动补全

表单内的formtarget属性

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。

在HTML5中，可以对多个提交按钮分別使用formtarget属性来指定提交后在何处打开所加载的页面。

_blank 新的浏览器窗口

_self 在本框架打开

_parent 在父框架打开

_top 在当前窗口中打开

framename 在指定框架中打开

文本框的pattern属性

在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些检查内容是否符合给定格式。符合则提交。示例如下：

<form>
    请输入内容
    <input pattern="[A-Z]{3}" name="part">
    <input type="submit">
</form>

文本框的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>

复选框的indeterminate属性

对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

示例：

<form>
    <input type="checkbox" indeterminate id="cb">属性测试
    <script>
        var cb= document.getElementById("cb");
        cb.indeterminate = true;
    </script>
</form>

image提交按钮的height属性与width属性

针对类型为image的input元素，HTML5新增了两个属性，height、width分别来指定图片按钮的高度与宽度。

示例：

<form action="test.jsp" method="post">
    姓名：<input type="text" name="name">
    <input type="image" src="11.jpg" alt="编辑" width="50" height="50">
</form>

表单内元素的autofocus属性

优先获取默认焦点

表单内元素的required属性

HTML中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时浏览器显示信息提示文字。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqLwsrDD-1581682074674)(C:\Users\46493\Desktop\image-20200116113739651.png)]

表单内元素的labels属性

在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

要了解这个属性，首先要了解label标签，当label标签的for属性值与表单元素如input的id属性值相同时，点击此标签，即选中相应的表单控件。在线示例（label）

<script>
    function Validate() {
        var txtName = document.getElementById("txt_name");
        var button = document.getElementById("btnValidate");
        var form = document.getElementById("testform");
        if (txtName.value.trim()==""){
            var label = document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            txtName.labels[1].innerHTML = "请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:9px;color:red;");
        }
    }
</script>

 <form id="testform">
      <label id="label" for="txt_name">姓名：</label>
    <input id="txt_name">
    <input type="button" id="btnValidate" value="验证" onclick="Validate()">

      </form>

由以上的例子可以看出，labels属性就是说又多个label指向相同的表单元素时，label就组成了一个数组，就可以用该表单的节点的labels属性数组来访问（设置）不同的label元素。

" id=“btnValidate” value=“验证” οnclick=“Validate()”>

  </form>




[外链图片转存中...(img-gmWdVIOn-1581682074676)]

由以上的例子可以看出，labels属性就是说又多个label指向相同的表单元素时，label就组成了一个数组，就可以用该表单的节点的labels属性数组来访问（设置）不同的label元素。

Super_Tyr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】表单新增元素与属性

文章目录表单内元素的form属性表单内元素的formaction属性表单内元素的formmethod属性表单内元素的formenctype属性标签的control属性文本框的placeholder属性文本框的list属性文本框的autocomplete属性表单内的formtarget属性文本框的pattern属性文本框的SelectionDirection属性复选框的indeterminate属性...
复制链接

扫一扫