HTML5 新特性之一 --- 增强型表单

目录

(1)新的 input type < input type="?">

(2)新的表单元素

(3)表单元素的新属性

(1)新的 input type < input type="?">

h4: text, password, checkbox, radio, submit, reset, button, file, image, hidden

h5: email, url, number, tel, search, range, color, date, month, week

(2)新的表单元素

h4: input, button, select/option, textarea, label

h5: datalist, progress, meter, output

 

datalist(数据列表)

<datalist id="list3">
    <option>xx</option>
    <option>yy</option>
</datalist>
<input type="text" list="list3">
//datalist 为input提供输入列表，用户可以从中选取，也可以输入

progress(进度条)

<h1>progress 进度条</h1>
<progress></progress>
<br>
<progress value="0" id="p2"></progress> //value取值在(0~1)

meter(刻度尺)

//meter用户标示一个值所处范围，不可接受(红色) 可以接受(黄色) 非常优秀(绿色)
<meter min="可取最小值" max="可取最大值" low="合理下限" high="合理的上限值" optimum="最佳值" value="当前实际值"></meter>
<meter min="0" max="100000" low="20000" high="90000" optimum="90000" value="99"></meter>

output(语义标签，等同于span)

<h1>新表单元素-output 进度条</h1>
商品单价:￥3.5 <br>
商品数量: <input type="number" value="1"> <br>
小计: <output>￥3.5</output>

 

(3)表单元素的新属性

a: placeholder : 占位字符

b: autofocus : 自动获取输入焦点

c: multiple : 允许输入框中出现多个值（值之间用逗号分隔）

d: form 用于把输入域放置在form外部

---------输入验证相关----------

e: required : 必填项，内容不能为空

f: maxlength : 指定字符串最大长度

g: minlength : 指定字符串最小长度

h: max : 指定数字最大值

: min : 指定数字最小值

: pattern : 正则表达式