H5新特性

lipengjgs大约 3 分钟

语义化标签

表单增强

涉及到表单，建议最好都用form，尽管不用原生的submit/reset，但方便结合表单验证或者其他三方库/框架使用

1. 新的inputtype

常见

text、password、radio、checkbox、button、reset、submit、image、file、hidden

新增

<!-- (1)number：显示一个数字输入框 -->
<input type="number" min="1" max="9" step="2"/>
 <!-- (2)email：显示一个邮件地址输入框，提交时会进行格式验证，中间一个@符号，前后至少一个字符 -->
<input type="email"/>
<!-- (3)url：显示一个URL地址输入框，提交时会进行格式验证，冒号前存在任意字符 -->
<input type="url"/>
<!-- (4)tel：显示一个电话号码输入框，没有格式验证，仅在手机浏览器中弹出数字输入键盘 -->
<input type="tel"/>
<!-- (5)search：显示搜索输入框，PC中Chrome下有X号；手机中弹出键盘右下角按钮显示文字“搜索” -->
<input type="search"/>
<!-- (6)range：显示一个范围选择滑块，让用户在特定范围内选择一个整数值 -->
<input type="range" min="0" max="255" value="50" step="5"/>
<!-- (7)color：显示一个颜色选择窗口，浏览器会调用操作系统提供颜色选择窗口，提交的是颜色值 -->
<input type="color">
<!-- (8)date：显示一个日期选择窗口，浏览器弹出一个日期选择窗口，不是DIV，不能定制样式 -->
<input type="date" min="1949/10/01">
<!-- (9)month：显示一个月份选择器 -->
<input type="month">
<!-- (10)week：显示一个“星期/周”选择器 -->
<input type="week">

2. 新的表单元素

<!-- (1)datalist：数据列表，为某个输入框提供输入建议 -->
  <datalist id="dish">
   <option>京酱肉丝</option>
   <option>鱼香肉丝</option>
  </datalist>
  <input list="dish">

<!-- (2)progress：进度条，显示前进的进度提示条 -->
  <progress value=""></progress>

<!-- (3)meter：度量衡，刻度尺，使用不同的颜色标示出数据所处的区间 -->
<!-- 最优值在上下限： 黄 - 绿 - 黄
  最优值小于下限：绿 - 黄 - 红
  最优值大于上限：红 - 黄 - 绿 -->
  <meter min="0" low="30" value="0" high="70" optimum="50" max="100"></meter>

<!-- (4)output：输出值，用于表示数据的计算结果，是一个语义标签 -->
  <output for="price count"></output>

3. 新的表单属性

常见

name、value、readonly、disabled、checked、for

新增

<!-- (1)placeholder：占位消息，为输入框中添加提示消息，注意：占位消息仅用作提示，与value属性根本不同，不能被提交 -->
<input placeholder="提示性文字">
<!-- (2)autofocus：自动获得焦点，标识了该属性的输入框会自动的获得输入焦点 -->
<input autofocus>
<!-- (3)multiple：多项，用于email和file输入框，允许其中输入多个值，用逗号分隔 -->
<input type="email/file" multiple>
<!-- (4)autocomplete：自动完成，可取值on/off，指定输入域是否记录上一次提交的输入，下次输入时给予提示 -->
<input autocomplete="off">
<!-- (5)form：表单，指定当前输入域所属的表单的ID，可以将声明了form的输入框放到表单元素的外面，仍然可以一同被提交 -->
<form id="formID"></form>
<input form="formID">
<!-- =========与输入验证相关新属性======== -->

<!-- (6)required：必填项，若没有输入则无法提交 -->
<input required>提交时才会验证
<!-- (7)min：最小值，若输入值小于该值则无法提交 -->
<input type="number/date" min="18">
<!-- (8)max：最大值，若输入值大于该值则无法提交 -->
<input type="number/date" max="60">
<!-- (9)minlength：最小长度，若输入的字符串长度小于该值无法提交，此属性不是H5标准属性，FF不支持，Chrome支持 -->
<input minlength="6" required>
<!-- (10)maxlength：最大长度，若输入的字符串长度大于该值无法提交 -->
<input maxlength="9">
<!-- (11)pattern：正则表达式样式，若输入的字符串不符合指定的正则表达式则无法提交 -->
<input pattern="^1[3578]\d{9}$">