1.表单元素新增和废弃的属性
表单新增的属性可以分成2类:
提交类:提交给服务器设置的相关属性,formaction、formmethod、formtype、formtarget
控制类:required、autfocus、labels
1.1.form属性
在H5之前,表单内的所有 从属标签(下级元素),必须书写在form标签内部。
H5之后允许标签写在任何地方,但是,需要做2步操作:给form设置一个id;给元素设置form属性,form属性的值就是form id属性的值
<form action="xx.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属性来实现的。
请输入日期:<input name="date" type="text"/> <br/>
请输入密码:<input form="testForm" name="psd" type="password"/>
<input type="submit" value="提交1" formaction="xx1.api"/>
<input type="submit" value="提交2" formaction="xx2.api"/>
1.3.formmethod
<form id="testForm" method="">
请输入日期:<input name="date" type="text"/> <br/>
请输入密码:<input form="testForm" name="psd" type="password"/>
<input type="submit" value="提交1"formaction="xx1.api" formmethod="get"/>
<input type="submit" value="提交2" formaction="xx2.api"formmethod="post"/>
</form>
<form id="testForm" enctype="text/plain">
请输入日期: <input name="date" type="text"/> <br/>
请输入密码: <input form="testForm" name="psd" type="password"/>
<input type="submit" value=" 提交 1" formaction= "xx1.api" enctype= "text/plain" />
<input type="submit" value=" 提交 2" formaction= "xx2.api" enctype= "text/plain" />
1.5. formtarget
<form id="testForm">
请输入日期:<input name="date" type="text"/> <br/>
请输入密码:<input form="testForm" name="psd" type="password"/>
<input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
<input formaction="xx2.api" formtarget="_blank" type="submit" value="提交2"/>
</form>
为输入框或者按钮 添加autofocus属性,当页面自动打开时,该元素自动获取光标焦点。
注意:如果对多个元素设置了autofocus属性,只是第一个设置元素的有效
<form id="testForm">
请输入日期:<input name="date" type="text" /> <br/>
请输入密码:<input name="psd" type="password" />
<input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
<input formaction="xx2.api" formtarget="_blank" autofocus type="submit"value="提交2"/>
</form>
1.7.required
如果在输入框中设置了required属性,如果该输入框没有内容的时候,点击提交按钮会提示“请填写此字段。”
<form id="testForm">
请输入日期:<input name="date" type="text" /> <br/>
请输入密码:<input name="psd" type="password" required/>
<input formaction="xx1.api" formtarget="_self" type="submit" value="提交1"/>
<input formaction="xx2.api" formtarget="_blank" type="submit" value="提交2"/>
</form>
1.8.labels
labels它的属性值是notelist
<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>
</div>
<input type="button" οnclick="validate()" value="提交0"/>
</form>
</body>
<script>
function validate(){
var psd = document.getElementById("psd");
psd.labels[1].innerHTML = "密码";
psd.labels[1].setAttribute("style","font-size:12px;color:red");
}
</script>
1.9 文本框placeholder
当输入框没有内容的时候,模糊 显示placeholder的值。
当输入框有内容的时候,placeholder被隐藏。
1.8文本框list
H5新增了List属性,这个属性的值 一个datalist元素的id的值。Datalist也是H5新增的一个元素,设置了list属性,该输入框有“搜索”功能,会从datalist中搜索出和输入相关的东西
1.9 pattern
Input 标签输入的内容,可以通过配合pattern属性进行校验,pattern写校验的正则表达式
<form id="testForm">
<div>
<input pattern="[A-z]{5}" name="date"placeholder="请输入5个大写的字符"type="text" /> <br/>
</div>
<input type="submit" value="提交"/>
</form>
1.10 input type=image 的width 和height
一般情况下input标签设置 width和height 是没有任何效果的,但是对于type=image的时候,可以设置 width 和 height 。
1.1color
当输入框中属性设置为color的时候,可以直接调用系统提供的调色板。
唯一的缺点是调色板缺少透明度,这个属性有兼容性问题,目前发现在iphone手机微信浏览器,没法弹出颜色选项卡。
2.1url
当输入框中属性设为url的时候,只接受地址输入,当输入的不是地址或输入的有误,会不允许提交。具有自我检测功能。如果在移动端,虚拟键盘会自动切换到输入网址的键盘(.com、/www.)
3.1email
当输入框中属性设为email的时候,只接受邮箱输入当输入的部位邮箱或者输入有误时,也会报错,同时具有自我检测的功能。如果在移动端,虚拟键盘会自动切换到输入邮箱的键盘(@)。
4.1tel
当输入框中属性设为tel的时候,那次输入框就是为电话号码专门设置的,他并没有特殊的校验功能,可以通过设置pattern属性来完成校验。如果在移动端,虚拟键盘会 自动切换到输入电话的键盘(数字、+、*、#)。
5.1search
Search类型的input元素是专门用来输入搜索关键词的文本框,search与text类型仅仅
6.1number
当输入框中属性设为number的时候,可以设置输入框所接受的数字的输入域可以用min 和max实现这一点
7.1range
当输入框属性设置为range的时候,可以设置一段范围内数值的文本框,它的类型显示为一个滑块,同样可以对它设置min和max控制范围,默认范围是0-100 当设置了step属性的时候,可以指定每次拖动的步伏
8.1date属性----了解即可, 为嘛呢, 有兼容性问题
Date在input元素属性里是以日历的形式显示给用户。
缺点:就是只有在谷歌浏览器上显示给用户日历形式,其他浏览器不兼容,就比如IE浏览器。
日期 <input type="date" name="date" value="0"/>
9.1time属性----了解即可, 为嘛呢, 有兼容性问题
时间属性input元素中一种专门输入时间的文本框,它会接收用户输入的时间进行自我检测,时间属性在其他浏览器上也可以显示和谷歌浏览器一样的效果
时间<input type="time" name="time" value="0"/><br/>
10.1datetime属性----了解即可, 为嘛呢, 有兼容性问题
Datetime和前两个不同的就是直接出现文本框,让用户输入!
时间-日期<input type="datetime" name="datetime" value="2017-08-25"/><br/>
11.1datetime-local
在input中综合了时间和日期的属性,在其他浏览器上同样的只显示文本框
时间--日期<input type="datetime-local"name="datetime-local"value=""/><br/>
12.1week
在input新元素中week主要是显示日期的第几周;注意:只会显示以周的样式呈现。
周<input type="week" name="week" value=""/><br/>
13.1month
这个属性主要显示月份,跟data相比月份在input元素中少了天数。
月份<input type="month" name="month" value=""/><br/>
对于设置了对于type的input,如果input输入没有写东西(空的)提交的时候不做检查,但是如果填写了内容,填写的内容格式不对的话,提交的时候会提示“xxx不对”,同时鼠标光标focus到该输入框。