表单相关新增元素和属性 4
2017-08-31 20:16
344 查看
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元素中少了后面的天数。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5表单相关新增元素和属性
- HTML5-表单相关新增元素和属性
- 表单相关新增元素和属性
- HTML5表单相关新增元素和属性
- HTML5表单新增元素与属性
- HTML5表单新增元素与属性
- So Beautiful 旅程 ——HTML5表单相关元素和属性
- 表单新增元素与属性
- 疯狂H5讲义笔记 - 表单相关元素和属性
- h5新增表单控件及其相关属性
- 记不住就存下来---- HTML 5 新增的属性与元素 之 表单控件新增元素
- HTML5表单新增元素与属性
- HTML5 学习笔记5-表单新增元素和属性（续写）
- 表单新增元素和属性
- HTML5初探——新增的表单元素和属性
- HTML5——表单新增元素与属性（1）
- HTML5表单新增元素和属性(1)
- HTML5表单新增元素与属性
- 繁星H5之旅-HTML5表单新增元素与属性
- HTML5 表单新增元素与属性