html5中input标签新增的属性

input 标签的 type 属性新增的值

HTML 5 新增的 type 属性的值： email、url、number、search、tel、range、color、date、month、week、time、datetime-local

① 文本输入类

<!-- 邮箱输入框 -->
<input type="email" placeholder="请输入邮箱">
<br>
<br>

<!-- URL 输入框 -->
<input type="url" placeholder="请输入网址">
<br>
<br>

<!-- 数字输入框 -->
<input type="number">
<br>
<input type="number" min="10" max="40">
<br>
<input type="number" min="0" max="100" step=".1">
<br>
<br>

<!-- 搜索框 重要的是语义，表现形式与 text 相同-->
<input type="search" placeholder="请输入关键字">
<br>
<br>

<!-- 电话号码输入框  不会进行验证，在移动端会自动弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">

② 范围选择框

<!--范围选择框 使用 max、min 属性指定最大最小值， value 指定默认值-->
<input type="range" value="0">
<input type="range" max="100" min="0" value="20">

③ 颜色选择框

<input type="color">

④ 时间日期选择类

 <!-- 日期选择器（年月日） -->
<input type="date">
<br>

<!-- 月选择框（年月） -->
<input type="month">
<br>

<!-- 星期选择框（选择哪一年的第几周） -->
<input type="week">
<br>

<!-- 时间选择器（几点几分） -->
<input type="time">
<br>

<!-- 日期时间选择器（年月日 时分） -->
<input type="datetime-local">