H5新增表单属性

本文已参与「新人创作礼」活动，一起开启掘金创作之路

H5新增的input类型

<form>
        邮箱：<input type="email"><br/>
        数量：<input type="number" value="20" max="25" min="18"><br/>
        电话：<input type="tel"><br/>
        网址：<input type="url"><br/>
        范围：<input type="range" max="100" min="0"><br/>
        颜色：<input type="color"><br/>
        时间:<input type="time"><br/>
        日期：<input type="date"><br/>
        日期时间：<input type="datetime-local"><br/>
        月份：<input type="month"><br/>
        星期：<input type="week"><br/>
        提交：<input type="submit">
    </form>

在H5新增input类型帮我们省去了许多原来需要自己实现的功能。

• email帮我们自动校验了格式。

• tel由于全球号码格式不一样，格式不太好校验不过帮我们在移动端点击该输入框会切换到数字键盘。

• url帮我们校验了格式不过需要注意的是网址前面需要加上：http://。

• number 类型用于应该包含数值的输入域。还能设置输入数字的范围

• range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定数字的限定：

• 效果图：

  

  浏览器支持

  需要注意的是新增的类型不是所有浏览器都兼容，部分兼容的呈现出来的效果也不一样。
  

  表单其他新增属性

• placeholder:占位符，提示文本

• autofocus:自动获取焦点

• autocomplete:自动完成，on打开,off关闭 1.必须成功提交过 2.必须有name属性

• required:必须输入，如果没有输入会阻止提交

• pattern:正则表达式的验证

• multiple:允许选择多个文件,在邮箱中允许输入多个邮箱地址，用,分割

• <form action="">
          <!--placeholder占位符，提示文本 -->
          <!-- autofocus自动获取焦点-->
          <!--autocomplete自动完成，on打开,off关闭  1.必须成功提交过 2.必须有name属性-->
          用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"><br/>
          <!-- tel并不会进行验证，只是会在移动端打开数字键盘-->
          <!-- required必须输入，如果没有输入会阻止提交-->
          <!-- pattern正则表达式的验证-->
          手机号:<input type="tel" required pattern="^(\+86)?1\d{10}$"><br/>
          <!-- multiple允许选择多个文件,在邮箱中允许输入多个邮箱地址，用,分割-->
          文件：<input type="file" name="photo" multiple><br/>
          邮箱：<input type="email" multiple name="email">
          <input type="submit">
      </form>
  

  效果图：