H5 新增表单属性

目录

placeholder属性

min、max 和 step 属性

autofocus属性

 autocomplete属性

required 属性

 pattern 属性

multiple 属性

form 属性

---

placeholder属性

• 作用：提供一种输入提示，描述输入域所期待的值

• 代码示例

 <input type="text" placeholder="请输入手机号码">

min、max 和 step 属性

作用：

• max 属性规定输入域所允许的最大值。

• min 属性规定输入域所允许的最小值。

• step 属性为输入域规定合法的数字间隔

 代码示例 <input type="number" value="4" min="2" max="10" step="2">

• 提示

  适用于range和 number类型

autofocus属性

• 作用：规定在页面加载完成时，自动地获得焦点

• 代码示例  <input type="text" autofocus>

 autocomplete属性

• 作用：当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，帮助用户在input类型输入框中实现自动完成内容输入。 前提： 要有一次成功的提交！！！！

• 取值

  • on(开启)

  • off(关闭)

• 代码示例   

<form action="">
    <input type="text" name="username"  autocomplete="off">
    <input type="submit" value="提交">
</form>

• 提示：该功能与浏览器本身的设置有关，可能需要首先启用浏览器本身的自动完成功能，才能使autocomplete属性起作用。

required 属性

• 作用：规定必须在提交之前填写输入域（不能为空）

• 代码示例

• <form action="">
      <input type="text" name="testname2" pattern="[0-9]">
      <input type="submit" value="提交">
  </form>

 pattern 属性

• 作用：用于验证 input 域的模式。

•  pattern="填一个规则(验证)的字符串"

              验证 用户的输入和你在""里面规定的规则是否一致！！

              手机号 规则:11位数字 ---计算机表达式 正则表达式 \d or [0-9]

              个数{n,m}

              第一位是数字1 第二位 3 5 8 9 7 6 第三位--第11位 数字即可！！

              ^13256456$  ^以什么开头  $以什么结尾

• 代码示例

<form action="">
    <input type="text" name="testname2" pattern="[0-9]">
    <input type="submit" value="提交">
</form>

multiple 属性

• 作用：规定输入域中可选择多个值； 一般用于上传域和email类型的输入域。

  • 用于email域 默认email域不支持输入多个email地址，用于email之后则允许输入多个逗号隔开的email地址

  • 用于file域 默认file类型只支持选择单个文件来上传， 新增的multiple属性可以使它一次性选择多个文件。

• 代码示例  

• <form action="">
      email域： <input type="email" name="testemail" multiple>
      文件域： <input type="file" name="testfile" multiple>
      <input type="submit" value="提交">
  </form>

form 属性

• 作用：规定输入域所属的表单

• 语法：

  • form 属性必须引用所属表单的 id

  • 引用一个以上的表单，请使用空格分隔的列表

• 代码示例

<form action="#" id="form1">
    <input type="text" name="username"/>
</form>

<input type="text" form="form1">