HTML5表单验证
本笔记参考b站视频总结,如有侵权请联系我。视频地址:https://www.bilibili.com/video/BV16K4y1Z7Gb?p=1&vd_source=dfcb8e4f04721f3ff1d38386942aa58e
一、HTML5基本表单验证特性介绍
-
必填:required。写在input上。
-
鼠标聚焦:
-
刷新时聚焦:autofocus。写在input上。
-
点击提示文字,聚焦到输入框:
<!-- 方法一:使用label标签包裹全部 --> <label> 工号: <input type="text" name="工号" placeholder="请输入工号"> </label> <!-- 方法二:使用for和id --> <label for="jobNumber">工号:</label> <input type="text" name="工号" placeholder="请输入工号" id="jobNumber">
-
-
表单不验证,解除required等:
- novalidate,写在form上。
- formnovalidate,写在input上。
-
表达验证:pattern=“正则表达式 ”
- 正则表达式学习推荐:https://deerchao.cn/tutorials/regex/regex.htm
-
历史记录联想:autocomplete=“on/off”
-
表单下拉提示框:注意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>
-
search伪类元素美化