当前位置： 移动技术网 > IT编程>开发语言>JavaScript > H5补充2

H5补充2

2020年07月22日  | 移动技术网IT编程  | 我要评论

表单属性补充

  • 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.csdn.net/weixin_41740463/article/details/107492720

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网