html5新增表单元素

1.验证

<form>

<input type="email"></input>    验证邮箱

<input type="url"></input>        验证网址

<input type="tel"></input>        验证电话

<input type="number" min="1" max="10" step=“1”></input>        验证数字

<input type="range" min="1" max="10"></input>     设置进度条

<input type="color"></input>    调出颜色面板

<input type="date"></input>    年月日

<input type="month"></input>   年月

<input type="week"></input>  选择第几周

<input type="submit"></input>

</form>

 

2.autocompelate设置自动匹配

<form autocompelate="on">

<input type="text" list="taglist"></input> 

<datalist id="taglist">

     <option>wuhan</option>

     <option>beijing</option>

     <option>guangzhou</option>

     <option>guangxi</option>

</datalist>

</form>

 

3.自动获取焦点

<input type="text" autofocus="autofocus"></input> 

 

4.提交页面（如何在form外面进行提交表单元素）

<form action="index.aspx" method="post"   id="from1">

 <input type="text" name="username"></input>

<input type="submit"></input>

</form>

<input type="password" form="from1"></input>

 

5.设置表单提交的时候，密码提交到另外页面当中

<form action="index.aspx" method="post"   id="from1">

 <input type="text" name="username"></input>

<input type="password" name="pwd" formaction="index1.aspx" ></input>

<input type="submit"></input>

</form>

 

6.上传控件

<input type="file" multiple="multiple"></input>   上传控件

 

7.验证文本

<form>

<input type="text" pattern="{0-9}{6}"  title="请输入邮编"></input> 

<input type="submit" ></input> 

</form>

 

8.

<input type="text"  placeholder="请输入用户名"></input>  提示输入内容

<input type="text"  required="required"></input>   输入内容不能为空

 

9.可以编辑段落数据

<p contenteditable="true">sddddd</p>

 

10.隐藏段落信息

<p hidden="hidden">sddsdsds</p>

 

11.设置tab的顺序

<a href="#" tabindex="2">dsdsdsds</a>

<a href="#" tabindex="1">dsdsdsds</a>

<a href="#" tabindex="3">dsdsdsds</a>

<a href="#" tabindex="4">dsdsdsds</a>

转载于:https://www.cnblogs.com/wlming/p/7597400.html