HTML5-表单新增元素和属性

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"/
4000
>
<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>

1.4.formenctype
编码方式

<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>

1.6.autofocus

为输入框或者按钮 添加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" onclick="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 。

2.HTML5改良的input元素的种类

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到该输入框。