HTML5中的表单属性

HTML5表单属性

 

HTML5

 

form/input的autocomplete

• 自动填充功能
• 值为off关闭自动填充功能

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

 

form的novalidate

• 提交表单时不需要验证form或input

//无需验证提交的表单数据
<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form

 

input的autufocus

• 页面加载时，自动获取焦点

First name:<input type="text" name="fname" autofocus>

 

input的form属性

• 规定输入与所属的一个或多个表单

//form中的id与input中form属性值一样就表示这个input依旧属于form表单的一部分
<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

 

input的formaction

• 描述表单提交的url地址
• 会覆盖form元素中的action属性

//第一个按钮提交到demo-form.php中
//第二个按钮提交到demo-admin.php中
<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

 

input的formmethod

• 定义了表单提交的方式
• 会覆盖form元素的method属性

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

 

input的list

• 与datalist的id一样

input的mutiple

• 适用于以下类型的 input 标签：email 和 file
• 用来选择多个文件，否则只能选择一个

<input type="file" name="img" mutiple>

 

• 但是用了这个的话，如何获取选中文件的属性呢？ 
  
  • document.getElementById(“file”).files[1].name
  • document.getElementById(“file”).files 会获取一个数组，数组中的元素拥有的属性有lastModifiedDate，name，size，type，webkitRelativePath。

input的pattern

• 用正则表达式验证input的值
• 适用于以下类型的 input 标签: text, search, url, tel, email, 和 password.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

 

input的placeholder

• 在input框中预设的值

<input type="text" name="fname" placeholder="First name">

 

input的required

• 文本框中必须填写内容

Username: <input type="text" name="usrname" required>

 

input的step

• 规定合法的数字间隔
• 如果 step=”3”，则合法的数是 -3,0,3,6 等

<input type="number" name="points" step="3">