HTML 表单和验证

HTML5表单验证

本笔记参考b站视频总结，如有侵权请联系我。视频地址：https://www.bilibili.com/video/BV16K4y1Z7Gb?p=1&vd_source=dfcb8e4f04721f3ff1d38386942aa58e

一、HTML5基本表单验证特性介绍

1. 必填：required。写在input上。

2. 鼠标聚焦：

   1. 刷新时聚焦：autofocus。写在input上。

   2. 点击提示文字，聚焦到输入框：标题和input

      <!-- 方法一：使用label标签包裹全部  -->     
      <label>
          工号：
          <input type="text" name="工号" placeholder="请输入工号">
      </label>
      
      <!-- 方法二：使用for和id  -->
      <label for="jobNumber">工号：</label>
      <input type="text" name="工号" placeholder="请输入工号" id="jobNumber">
      

3. 表单不验证，解除required等：

   1. novalidate，写在form上。
   2. formnovalidate，写在input上。

4. 表达验证：pattern=“正则表达式 ”

   1. 正则表达式学习推荐：https://deerchao.cn/tutorials/regex/regex.htm

5. 历史记录联想：autocomplete=“on/off”

6. 表单下拉提示框:注意list="province"和id=“province”

   <input type="text" list="province">
   <dataList id="province">
       <option value="湖北省"></option>
       <option value="湖南省"></option>
       <option value="安徽省"></option>
       <option value="江苏省"></option>
   </dataList>
   

7. search伪类元素美化
   search在谷歌浏览器中自带叉叉图标，点击清除所有文本内容
修改图标样式，不推荐在移动端使用