表单相关新增元素和属性 4

来源：互联网发布：淘宝怎么寄东西到澳洲编辑：程序博客网时间：2024/05/23 01:20

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

表单新增的属性可以分成两类：
提交类：提交给副武器的相关属性，formaction，formmcthod，formtype
控制类：required，antofocus，labels

4.1.1 form表单属性

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

<body><form action="XXX.api" id="testForm">    <!--请输入日期：<input name="date" type="text"/><br>-->    请输入密码：<input name="psd" type="password"/><br>    <input type="submit"/></form>请输入日期：<input form="testForm" name="date" type="text"/><br></body>

4.1.2 formation

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

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

4.1.3 formmethod

<form>    请输入日期：<input name="date" type="text"/>    请输入密码：<input name="psd" type="password"/>    <input type="submit" value="提交1"  formmethod="GET"/></form>

4.1.4 formenctype 编码方式

<body><form id="testForm" enctype="text/plain">    请输入日期：<input name="date" type="text"/><br>    请输入密码：<input name="psd" type="password" form="testForm"/><br>    <input type="submit" value="提交1" formaction="XXX1.api" formmethod="get"/>    <input type="submit" value="提交2" formaction="XXX2.api" formmethod="post"/></form></body>

4.1.5 formtarget

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

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

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

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

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

4.1.8 .output
注意：IE浏览器不支持该标签。

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

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

<body><form id="testForm">    <div>        <input id="date" name="date" placeholder="请输入名字" type="text"/><br>    </div>    <div>        <input id="psd" name="psd" placeholder="请输入密码" type="password" required/>    </div>    <input type="button" onclick="validate()" value="提交"/></form></body>

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

<body><form id="testForm">    <div>        <input id="date" name="date" placeholder="请输入名字" type="text"/><br>    </div>    <div>        <input id="psd" name="psd" placeholder="请输入密码" type="password" required/>    </div>    <input type="button" onclick="validate()" value="提交"/></form></body>

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

<body><form id="testForm">    <div>        <input list="languageList" placeholder="请选择你喜欢的编程语言" type="text"/><br>        <datalist id="languageList">            <option>JS</option>            <option>JAVA</option>            <option>C#</option>            <option>Object-C</option>        </datalist>    </div></form></body>

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

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

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

4.2 HTML5改良的input元素的种类

1.颜色输入框
输入框中type属性设置为color的时候，可以直接调用系统提供的调色盘。唯一的缺点就是缺少了对透明度的调试功能。这个属性有兼容性问题，目前发现在iPhone手机微信浏览器桑没法弹窗颜色选项卡。

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

2.地址输入框
当输入框中type属性设置为URL的时候，只接受地址输入，当输入的地址或格式有误，会不允许提交。具有自我检测功能。如果在移动端虚拟键盘会自动切换成与网址相关的键入页面。（www./.com）

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

3.邮箱输入框
当输入框中type属性设置为email的时候，该输入框会有一个判断功能，若输入内容不为邮箱，或者邮箱格式有误，该输入框会不允许提交。如果在移动端虚拟键盘会自动切换成与网址相关的键入页面。(@/.)

<body><form action="#" method="get">    普通输入框：<input type="text"><br>    颜色输入框：<input type="color" name="color"><br>    地址输入框：<input type="url" name="url"><br>    邮箱输入框：<input type="email" name="email" multiple><br>    <input type="submit" value="提交"><br></form></body>

4.电话输入框
当输入框中type属性设置为tel的时候，该输入框是为电话号码专门设置的，但是它并没有任何的检验规则，可以通过设置pattern进行设置规则。
如果在移动端虚拟键盘会自动切换成与手机的数字键盘。

<body><form action="#" method="get">    普通输入框：<input type="text"><br>    颜色输入框：<input type="color" name="color"><br>    地址输入框：<input type="url" name="url"><br>    邮箱输入框：<input type="email" name="email" multiple><br>    电话输入框：<input type="tel" name="tel"><br>    <input type="submit" value="提交"><br></form></body>

5.搜索输入框
search类型的输入框是一种专门用来搜索关键词的文本框，search类型与text类型仅仅在外形上有所不同。

<body><form action="#" method="get">    搜索输入框：<input type="search" name="search"><br><br>    数字输入框：<input type="number" name="number"><br><br>    数字输入框(限购)：<input type="number" name="number" min="1" max="2"><br><br>    <input type="submit" value="提交"><br></form></body>

6.数字输入框
input的type属性设为number，可以设置输入框所接受的数字的输入域，可以用min，max来控制所输入数字的范围。
7.range
当输入框属性设置为“range”的时候，可以设置一段范围内数值的文本框，它的类型显示为一个滑块，同样可以对它设置min和max控制范围，默认范围是0-100，当设置了step属性的时候，可以指定拖动的步幅。
对于设置了type的input，如果input输入框是空的，提交的时候不做检验，但是如果填写了内容，而且填写的内容格式不对的话，提交的收会有提示框出现，同时鼠标光标会聚焦到该输入框。

<body><form action="#" method="get">    普 通  输 入 框：<input type="text"><br><br>    颜 色  输 入 框：<input type="color" name="color"><br><br>    地 址  输 入 框：<input type="url" name="url"><br><br>    邮 箱  输 入 框：<input type="email" name="email" multiple><br><br>    电 话  输 入 框：<input type="tel" name="tel" pattern="/^{[1]|[3]|[9]}$/"><br><br>    搜 索  输 入 框：<input type="search" name="search"><br><br>    数 字  输 入 框：<input type="number" name="number"><br><br>    数字输入框(限购)：<input type="number" name="number" min="1" max="2"><br><br>    滑 块  输 入 框：<input type="range" name="range" min="1" max="100" step="10"><br><br>    <input type="submit" value="提交"><br></form></body>

时间控件:

1、date日历（了解即可，有兼容性问题）

日期：<input type="date" name="date" value=""/><br>

date在input元素属性是以日历的形式显示给用户，缺点是该属性只有在谷歌浏览器支持，
在其他浏览器上显示的就是一个普通的文本框。

2、time时间（了解即可，有兼容性问题）

<body><form action="#" method="get">    日期：<input type="date" name="date" value=""><br><br>    时间：<input type="time" name="time" value=""><br><br>    时间：<input type="time" name="time" value="1:10"><br><br>    <input type="submit"></form></body>

time属性就是input元素中一种专门输入时间的文本框，它会接受用户输入的时间并进行判断输入是否有误，同样的，该属性目前只有谷歌浏览器支持。

3、datetime（了解即可，有兼容性问题）

<body><form action="#" method="get">    日  期 ：<input type="date" name="date" value=""><br><br>    时  间 ：<input type="time" name="time" value=""><br><br>    时  间 ：<input type="time" name="time" value="1:10"><br><br>    时间+日期：<input type="datetime" name="datetime" value="2017-08-25"><br><br>    <input type="submit"></form></body>

datetime和前两个不同的就是直接出现文本框，让用户输入。

4、datetime-local（了解即可，有兼容性问题）

<body><form action="#" method="get">    日  期 ：<input type="date" name="date" value=""><br><br>    时  间 ：<input type="time" name="time" value=""><br><br>    时  间 ：<input type="time" name="time" value="1:10"><br><br>    时间+日期：<input type="datetime" name="datetime" value="2017-08-25"><br><br>    时间&日期：<input type="datetime-local" name="datetime-local"><br><br>    <input type="submit"></form></body>

datetime 在input中综合了时间和日期的属性，该效果只在谷歌浏览器上显示。

5、week周（了解即可，有兼容性问题）

<body><form action="#" method="get">    日  期 ：<input type="date" name="date" value=""><br><br>    时  间 ：<input type="time" name="time" value=""><br><br>    时  间 ：<input type="time" name="time" value="1:10"><br><br>    时间+日期：<input type="datetime" name="datetime" value="2017-08-25"><br><br>    时间&日期：<input type="datetime-local" name="datetime-local"><br><br>    周  末 ：<input type="week" name="week"><br><br>    <input type="submit"></form></body>

在input中新属性中主要是显示日期第几周，注：只会以周的形式显示。

6、month属性（了解即可，有兼容性问题）

<body><form action="#" method="get">    日  期 ：<input type="date" name="date" value=""><br><br>    时  间 ：<input type="time" name="time" value="10:25"><br><br>    时间+日期：<input type="datetime" name="datetime" value="2017-08-25"><br><br>    时间&日期：<input type="datetime-local" name="datetime-local"><br><br>    周  末 ：<input type="week" name="week"><br><br>    月  份 ：<input type="month" name="month"><br><br>    <input type="submit"></form></body>

month属性主要显示月份，跟date相比较月份在input元素中少了后面的天数。

阅读全文

0 0