表单相关新增元素和属性

最新推荐文章于 2022-03-01 12:59:03 发布

Judian6974

最新推荐文章于 2022-03-01 12:59:03 发布

阅读量1.1k

点赞数 1

分类专栏： html5 表单相关新增元素和属文章标签：表单标签

本文链接：https://blog.csdn.net/Judian6974/article/details/77715429

版权

html5 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

表单相关新增元素和属

1 篇文章 0 订阅

订阅专栏

表单相关新增元素和属性

1、表单元素新增和废弃的属性

表单新增的属性可以分成两类：
提交类：提交给服务器设置的相关属性，formaction、formmethod、formtype。
控制类：required、autofocus、labels。

1.1、 form属性

在H5之前，表单内的所有从属标签（下级标签），必须书写在form标签内部。
H5允许标签写在任何地方，但是需要做两步操作：给form设置一个id；给元素设置form属性，form属性的值就是form Id属性的值

<form action="xxx.api" id="testForm">
    请输入日期：<input name="date" type="text"/>
    <input type="submit" value="提交"/>
</form>
    请输入密码：<input form="testForm" name="psd" type="password"/>

1.2、 formaction

在H5之前，表单内所有的submit，只能提交到一个统一的地址，也就是指定的action。
H5：可以为每一个submit设置不同的action，是通过设置formaction属性来实现的。

<form  id="testForm">
    请输入日期：<input name="date" type="text"/><br>
    请输入密码：<input form="testForm" name="psd" type="password"/><br>
    <input type="submit" value="提交0" formaction="xxx0.api"/>
    <input type="submit" value="提交1" formaction="xxx1.api"/>
</form>

1.3、 formmethod

<form  id="testForm" method="get">
    请输入日期：<input name="date" type="text"/><br>
    请输入密码：<input form="testForm" name="psd" type="password"/><br>
    <input type="submit" value="提交0" formaction="xxx0.api" formmethod="get"/>
    <input type="submit" value="提交1" formaction="xxx1.api" formmethod="post"/>
</form>

1.4、 formenctype编码方式

<form  id="testForm" enctype="text/plain">
    请输入日期：<input name="date" type="text"/><br>
    请输入密码：<input form="testForm" name="psd" type="password"/><br>
    <input type="submit" value="提交0" formaction="xxx0.api" formenctype="text/plain"/>
    <input type="submit" value="提交1" formaction="xxx1.api" formenctype="text/plain"/>
</form>

1.5、 formtarget 页面提交方式

<form  id="testForm">
    请输入日期：<input name="date" type="text"/><br>
    请输入密码：<input form="testForm" name="psd" type="password"/><br>
    <input formaction="xxx0.api" formtarget="_self" type="submit" value="提交0"/>
    <input formaction="xxx1.api" formtarget="_blank" type="submit" value="提交1"/>
</form>

1.6 、autofocus 自动获取光标

为输入框或者按钮添加autofocus属性，当页面打开时，该元素自动获取光标焦点。
注：如果对多个元素设置了autofocus属性，只是第一个设置该元素的有效。

<form  id="testForm">
    请输入日期：<input name="date" autofocus type="text"/><br>
    请输入密码：<input name="psd" autofocus type="password"/><br>
    <input formaction="xxx0.api" formtarget="_self" autofocus type="submit" value="提交0"/>
    <input formaction="xxx1.api" formtarget="_blank" autofocus type="submit" value="提交1"/>
</form>

1.7、 required 必填的属性

如果在输入框中设置了required属性，如果该输入框没有内容的时候，点击提交按钮会提示“请填写此字段”。

<form  id="testForm">
    请输入日期：<input name="date" required type="text"/><br>
    请输入密码：<input name="psd" type="password"/><br>
    <input formaction="xxx0.api" formtarget="_self" type="submit" value="提交0"/>
    <input formaction="xxx1.api" formtarget="_blank" type="submit" value="提交1"/>
</form>

这里写图片描述
1.8 、labels

labels的属性值是noteList 。

<body>
<form id="testForm">
    <div>
        <label for="date">请输入日期：</label>
        <input id="date" name="date" type="text"/>
    </div>
    <div>
        <label for="psd">请输入密码：</label>
        <input id="psd" name="psd" type="password" required/>
        <label for="psd"></label>
    </div>
    <input type="button" onclick="validate()" value="提交0"/>
</form>
</body>
<script>
    function validate(){
        var pad = document.getElementById("psd");
        psd.labels[1].innerHTML = "密码";
        psd.labels[1].setAttribute("style","font-size:9px;color:pink");
    }
</script>

1.9 、文本框placeholder

当输入框没有内容的时候，模糊显示placeholder的值；
当输入框有内容的时候，placeholder被隐藏。

1.10 、文本框list

H5新增了list属性，这个属性的值一个datalist元素的id的值。datalist也是H5新增的一个元素。设置了list属性，该输入框有“搜索”功能，会从datalist中搜索出和输入相关的东西。

<form id="testForm">
    <div>
        <input list="languageList" placeholder="请选择你喜欢的编程语言" type="text"/>
        <datalist id="languageList">
            <option>JS</option>
            <option>JQuery</option>
            <option>C+</option>
            <option>object-c</option>
        </datalist>
    </div>
</form>

1.11、 pattern

input标签输入的内容，可以通过配合pattern属性进行校验，pattern写校验的正则表达式。

<form id="testForm">
    <div>
        <input pattern="[A-Z]{5}" placeholder="请输入5个大写的字符" type="text"/>
    </div>
    <input type="submit" value="提交"/>
</form>

1.12 、input type-image的width和height

一般情况下input标签设置width和height是没有任何效果的，但是对于type-image的时候，可以设置width和height。

HTML5改良的input元素的种类

http://img.huadianedu.com/edu/E301-04-18.html
input在HTML5中的新增的功能：

1.color

当输入框中属性设置为color的时候，可以直接调用系统提供的调色盘。唯一的缺点是调色盘缺少一个透明度。这个属性有兼容性问题，目前发现在iphone手机微信浏览器上没法弹出颜色选项卡，但是安卓微信浏览器可以显示。

<form action="#" method="get">
    普通输入框：<input type="text"/><br>
    颜色输入框：<input type="color" name="color"/><br>
    <input type="submit" value="提交"/>
</form>

2.URL

当输入框中设置属性为url的时候，只接受地址输入，当输入的不为地址，或者输入地址有误时，会不允许提交。具有自我检测功能。如果是移动端，虚拟键盘会自动切换到输入网址的键盘（.com、/、www）

<form action="#" method="get">
    地址输入框：<input type="url" name="url"/><br>
    <input type="submit" value="提交"/>
</form>

3.email

当输入框中的属性设置为email的时候，只接受邮箱输入，当输入的不为邮箱或者邮箱格式有误的时候，也会提示出错，同样具有自我检测功能。
注：当输入多个邮箱的时候，使用multiple属性，邮箱与邮箱之间可以用英文“,”隔开，同样的具备自我检测功能。如果是移动端，虚拟键盘会自动切换到输入邮箱的键盘（@、.com）

<form action="#" method="get">
    邮箱输入框：<input type="email" name="email" multiple/><br>
    <input type="submit" value="提交"/>
</form>

4.tel

当输入框中的属性设置为tel的时候，那此输入框就是为电话号码专门设置的。它并没有特殊的校验规则，可以通过设置pattern属性来完成手动校验。如果是移动端，虚拟键盘会自动切换到输入电话的键盘（数字、+、#、*）

<form action="#" method="get">
电话输入框：<input type="tel" name="tel" pattern="/^1(3|4|5|7|8)\d{9}$/"/><br>
<input type="submit" value="提交"/>
</form>

5.search

search类型的input元素是一种专门用来输入搜索关键词的文本框，search类型与text类型仅仅在外观上有所不同。如果是移动端，虚拟键盘会自动切换到输入邮箱的键盘（@、.com）

<form action="#" method="get">
    搜索输入框：<input type="search" name="search"/><br>
    <input type="submit" value="提交"/>
</form>

这里写图片描述
6.number

当输入框属性设置为number的时候，可以设置输入框所接受的数字的输入域，可以用min和max实现这一点。

<form action="#" method="get">
    数字输入框：<input type="number" name="number"/><br>
    数字限制输入框：<input type="number" name="number" min="1" max="100"/><br>
    <input type="submit" value="提交"/>
</form>

7.range滑块

当输入框属性设置为range的时候，可以设置输入框区域为滑块形式，还可以用min和max实现滑块进度，默认范围是0-100，并设置步长可以指定每次拖动的步幅。

<form action="#" method="get">
    滑块：<input type="range" name="range" min="0" max="100" step="10"/>
    <input type="submit" value="提交"/>
</form>

对于设置了type和input，如果input输入框没有写东西（空的）提交的时候不做检验，但是如果写了内容，填写的内容格式不对的话，提交的时候就会提示“xxx不对”，同时鼠标光标focus到该输入框。

8.output元素

Firefox, Chrome, Safari 以及 Opera 支持标签。
注：Internet Explorer 8 以及更早的版本不支持标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

时间控件：

1.date

了解即可，因为有兼容性问题
date在input元素属性是以日历形式显示给用户。唯一的缺点就是只有在谷歌浏览器上显示用户日历的形式，其他浏览器不兼容，比如IE浏览器

<form action="#" method="get">
    日期输入框：<input type="date" name="data"/><br>
    <input type="submit" value="提交"/>
</form>

2.time

了解即可，因为有兼容性问题
time属性是input元素中一种专门输入时间的文本框；它会接收用户输入的事件进行自我检测；时间属性在其他浏览器上也可以显示和谷歌浏览器一样的效果。

<form action="#" method="get">
    时间输入框：<input type="time" name="time"/><br>
    时间输入框：<input type="time" name="time" value="12:00"/><br>
    <input type="submit" value="提交"/>
</form>

3.datetime

datetime与前两个不同之处就是直接出现文本框，让用户自己输入，当然也可以提前写好value值。

<form action="#" method="get">
    时间+日期：<input type="datetime" name="datetime" value="2017/8/25 14:50"/><br>
    <input type="submit" value="提交"/>
</form>

4.datetime-local

综合了date和time两个属性，在其他浏览器上同样的只显示

<form action="#" method="get">
    时间&日期：<input type="datetime-local" name="datetime-local"/><br>
    <input type="submit" value="提交"/>
</form>

5.week

主要显示哪年的第几周。
注：只会以周的样式呈现。

<form action="#" method="get">
    周：<input type="week" name="week"/><br>
    <input type="submit" value="提交"/>
</form>

6.month

这个属性主要显示月份，与date相比，月份在input中少了后面的天数

<form action="#" method="get">
    月：<input type="month" name="month"/><br>
    <input type="submit" value="提交"/>
</form>

Judian6974

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表单相关新增元素和属性

表单相关新增元素和属性1、表单元素新增和废弃的属性表单新增的属性可以分成两类：提交类：提交给服务器设置的相关属性，formaction、formmethod、formtype。控制类：required、autofocus、labels。1.1、 form属性在H5之前，表单内的所有从属标签（下级标签），必须书写在form标签内部。 H5允许标签写在任何地方，但是需要做两步操作：给form
复制链接

扫一扫