增强型表单
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>