HTML5 新特征：新表单元素属性

我不是女神ヾ 2022-10-11 01:23 47阅读 0赞

H5的表单新特性可以分为两大类:

**（1）input 的 type 值**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>email</td> 
   <td>邮件输入域</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>地址输入域</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字输入域</td> 
  </tr> 
  <tr> 
   <td>tel</td> 
   <td>电话号码输入域</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>搜索输入域</td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>范围选择控件</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>颜色选择控件</td> 
  </tr> 
  <tr> 
   <td>date / month / week</td> 
   <td>时间选择控件</td> 
  </tr> 
 </tbody> 
</table>

*  email：邮件输入域  
    在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口。

*  url：地址输入域  
    在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。

*  number：数字输入域  
    可设置 min、max、step 值限定拖动范围

*  tel：电话号码输入域  
    此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。

*  search：搜索输入域  
    通过 results=s 可显示一个搜索小图标

*  range：范围选择控件

*  color：颜色选择控件  
    用户通过颜色选择器选择一个颜色值，并反馈到value中

*  date / time / month / week：时间选择控件

**（2）h5 表单元素新属性**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>autocomplete</td> 
   <td>自动补全</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>占位符</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>自动获得输入焦点</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>属性规定输入字段可选择多个值</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>值为某个表单的id，若设置，则该输入域可放在该表单外面</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>限定输入数字的最小值</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>限定输入数字的最大值</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td>限定输入数字的步长，与min连用</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>在表单提交时会验证是否有输入，没有则弹出提示消息</td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>指定一个正则表达式，对输入进行验证 (正则默认首尾加^$)</td> 
  </tr> 
 </tbody> 
</table>

*  autocomplete 属性  
    此属性是为表单提供自动完成功能

*  placeholder 属性  
    用于在输入框中显示提示性文字，与value不同，不能被提交

*  autofocus 属性  
    默认聚焦属性，可在页面加载时聚焦到一个表单控件

*  multiple 属性  
    是否允许多个输入值，若声明该属性，那么输入框中允许输入多个用逗号隔开的值

*  form 属性  
    值为某个表单的id，若设置，则该输入域可放在该表单外面

*  max / min / step 属性  
    限制值的输入范围，以及值的输入渐进程度

*  required 属性  
    在表单提交时会验证是否有输入，没有则弹出提示消息

*  pattern 属性  
    指定一个正则表达式，对输入进行验证 (正则默认首尾加^$)