H5新特性（五）——增强型表单

增强型表单

HTML5 增强型input标签

HTML5 增加了多个type类型的输入框，如color，date，datetime，datetime-local，email，month。number，range，search，tel，time等

1.Number类型input标签

<input type="number" name="num" min="1" max="100" step="1"/>

• name: 标识表单提交时的key值
• min: 标识当前输入框输入的最小值
• max: 标识当前输入框输入的最大值
• step: 标识点击增大/减小的时候，增加/减小的步长

2.Email类型input标签

<input type="email" placeholder="请输入邮箱地址" name="emali"/>

3.Tel类型的input标签

<input type="tel" placeholder="输入电话" name="phone"/>
1.4：URL类型的input标签

4.URL类型的input标签

<input type="url" placeholder="请输入网址" name="url"/>

5.新的日期、时间、月份、星期input标签

<input type="datetime" name="mytime">
<input type="time" name="mytime">
<input type="month" name="mymonth">
<input type="week" name="week_year">

6.range类型的input标签

<input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>

7.颜色选择input标签

<input type="color" name="favcolor">

HTML5 增强型表单

1.<select> 元素（下拉选框）

<select name="web">
<option>js</option>
<option>vue</option>
<option>html</option>
<option>css</option>
</select>

2.<textarea> 元素(文本域)

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

3.<button> 元素(按钮)

<button type="button">我是一个按钮</button>

4.<datalist> 元素（预定义选项列表）

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 

三、音频视频