h5表单

h5新增表单属性

  • min
  • max
  • required 如果表单没输入内容,禁止提交
  • step 确定一个法定值eg : 3 -6 -3 0 3 6 9
<input type="number" step=3>

这里指的是3的倍数,不是累加,如果输入框写4,则下一个比4大的数是6不是7,下一个比4小的数是3不是1

  • autocomplete 自动提示信息(历史输入过的信息) 属性值 on/off
  • placeholder 文本框的提示信息
  • autofocus 自动聚焦
  • pattern 属性值是一个 正则表达式(高效的字符串处理规则)
   <form action="">
       <input type="text"required pattern="^1[3456789]\d{9}$" placeholder="请输入您的手机号">
       <input type="submit">
   </form>
  • novalidate 取消验证
  • multiple 选择(上传)多个 \ 输入框里面把逗号分隔的当作两个提交的信息
  • list属性 必须和datalist 标签结合使用,绑定的datalist的id名称

表单新增标签

<datalist> 做提示信息的 必须和list属性结合使用
<option value=""> 可以追加一个label属性
</datalist>

      <input type="url" list="userlist">
   <datalist id="userlist">
<option label="百度" value="http://www.baidu.co">
<option label="腾讯" value="http://www.qq.con">
<option label="京东" value="http://www.jd.con">
<option label="淘宝" value="http://www.taobao.con">
   </datalist>

<output for="关联的是要做运算的元素的id名称"><output> 做输出(计算结果的输出)

      <form action="" οninput="sum.value=parseInt(num1.value)+parseInt(num2.value)">
<input id="num1" type="range" min="10" max="100">
+
<input id="num2" type="text" value="100">
=
<output for="num1 num2" name="sum"></output>
   </form>
发布了27 篇原创文章 · 获赞 0 · 访问量 384

猜你喜欢

转载自blog.csdn.net/Y_SSM/article/details/105442906
今日推荐