H5补充2

表单属性补充

• h5新增了 email,number,date,url,range属性值,可以实现对邮箱,数字,日期的检测,
• 新增与input联动的标签<datalist>,提供一个下拉列表给input内容,并且在用户输入的时候会联想预设内容.

<label>
     <span>学员爱好:</span>
     <input type="text" list="data" placeholder="睡觉">
     <datalist id="data">
         <option value="打游戏">打游戏</option>
         <option value="睡觉">睡觉</option>
         <option value="吃饭">吃饭</option>
         <option value="打豆豆">打豆豆</option>
     </datalist>
</label>

url

• 要求输入框内需要为url地址格式,与required(不能为空)属性连用

number

• 要求为数字,自带min,max,step(取值间隔)属性,
• <input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range

• 生成一个滑动块,具有min,max,step属性,可以指定每次拖动的间隔

<input type="range" step="5" min="0" max="100" value="80" >

date

• 生成一个日期输入框,value格式为1970-01-01

<input type="date" value="2015-12-06">

还有两个跟可以在表单里面使用的标签:

meter

• 其中属性分别为最小值,最大值,预设值,高值,低值(比如从0-20为低值,可以为其设置样式)

<meter min="0" max="100" value="40" hight="80" low="20">
</meter>

progress

• 进度条

<progress min="0" max="100" value="50"></progress>

表单的其他属性:

• autofocus:打开网页会自动成为焦点
• required:检查表单输入框的内容是否为空

本文地址：https://blog.****.net/weixin_41740463/article/details/107492720