HTML5-从0开始学习之H5新增表单属性（一）

骑猪看日落 2022-05-14 16:51 203阅读 0赞

### 1，placeholder：设置提示信息或默认值 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70][]

### 2，autofocus：自动获取输入焦点 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1][]

### 3，required：设置字段为必填项 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 2][]

### 4，pattern：正则模式验证，更精确的控制用户输入 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:59px;">序号</td> 
   <td style="width:93px;">模式</td> 
   <td style="width:73px;">描述</td> 
   <td style="width:274px;">实例</td> 
  </tr> 
  <tr> 
   <td style="width:59px;">1</td> 
   <td style="width:93px;">[]</td> 
   <td style="width:73px;">限定范围</td> 
   <td style="width:274px;">[0-9],[a-z],[A-Z]</td> 
  </tr> 
  <tr> 
   <td style="width:59px;">2</td> 
   <td style="width:93px;">{}</td> 
   <td style="width:73px;">限定数量</td> 
   <td style="width:274px;">{3}必须为三个，{3,6}3个到6个之间，{3,}至少三个</td> 
  </tr> 
  <tr> 
   <td style="width:59px;">3</td> 
   <td style="width:93px;">^</td> 
   <td style="width:73px;">限制开头</td> 
   <td style="width:274px;">^php[5-7]{a-z}{2,5}php开头跟一个数字再跟2到5个字母</td> 
  </tr> 
  <tr> 
   <td style="width:59px;">4</td> 
   <td style="width:93px;">$</td> 
   <td style="width:73px;">限制结尾</td> 
   <td style="width:274px;">[0-9]{2}{a-z}{3}abc$</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70]: /images/20220503/bfb877fc230c469988e401b44847bd91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1]: /images/20220503/9f541cf60c2a4df6acb46d2c9ded732f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 2]: /images/20220503/da03c3e5d5814322a2adbe13449980dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 3]: /images/20220503/149075de706041f89c46b8421618a8b1.png