HTML5新增的表单类型及表单初级的验证方法

226 阅读1分钟

HTML5新增的表单类型

<input type="email" name="" id="">

image.png

提交时会自动校验电子邮箱格式是否正确

<input type="url" name="" id="">

image.png

提交时会自动校验网址是否正确

<input type="color" name="colorName" id="">

image.png

主要用于颜色选取

<input type="search" name="" id="">

image.png

用于搜索引擎

<input type="number" name="num" id="" min="0" max="100" step="5" value="10">

image.png

<input type="range" name="range" id="" min="0" max="100" step="5" value="10">

image.png

  • max 规定允许的最大值
  • min 规定允许的最小值
  • step 规定的数字间隔
  • value 默认值 <input type="date" name="date" id="">

image.png

<input type="month" name="" id="">:

image.png

<input type="week" name="" id="">:

image.png

<input type="time" name="" id="">:

image.png

<input type="datetime" name="" id="">:

image.png

<input type="datetime-local" name="" id="">:

image.png

表单初级验证的方法

placeholder:可以描述文本框期待用户输入的内容

image.png 适用于 text search url email password等类型

required:规定文本框填写不能为空,否则不允许用户提交

image.png 适用于 text search url email password number checkbox radio file 等类型

pattern:用户输入内容必须符合正则表达式所指的规则,否则就不能提交表单

image.png