HTML5表单属性

偏执的太偏执、 2022-09-21 01:38 16阅读 0赞

1.`<form> <input> autocomplete`属性  
form或input应该有用自动完成的功能。当用户在自动完成域开始输入时，浏览器应该在该域中显示填写的选项。  
**点击刷新后的效果图**  
![这里写图片描述][20160614133854565]

<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>

2.form的novaildate属性  
novaildate属性是一个boolean属性。该属性规定在提交表单时不应该验证form或input域。  
代码不进行验证，邮箱的格式不正确，也可以输入。

3.input autofocus属性  
autofocus属性是一个boolean属性。规定在页面加载时，域自动获得焦点。  
页面打开之后，光标自动定位在last name

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

4.input的form属性  
规定输入域所属的一个或多个表单  
![这里写图片描述][20160614134816053]

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
    </form>
    
    <p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>
    Last name: <input type="text" name="lname" form="form1">

5.input formaction属性  
用于描述表单提交的url地址。该属性会覆盖form元素中的action属性。

<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="Submit"><br>//普通的提交按钮
      <input type="submit" formaction="demo-admin.php" value="Submit as admin">//提交到不同页面的按钮
    </form>

6.input的formenctype属性  
用于表单提交到服务器的数据编码（只对form表单中method=”post”表单），该属性会覆盖form元素的enctype属性。

<form action="demo-post-enctype.php" method="post">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="Submit">//普通的方式提交
      <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">//新的编码方式提交
    </form>

7 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="Submit">
      <input type="submit" formmethod="post" formaction="demo-post.php" value="Submit using POST">
    </form>

8 input formnovalidate属性  
input元素在表单提交时不需要验证

<form action="demo-form.php">
      E-mail: <input type="email" name="userid"><br>
      <input type="submit" value="Submit"><br>//普通的方式提交
      <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">//不需要验证方式的提交
    </form>

9.input formtarget属性  
指定一个名称或一个关键字来指明表单提交数据接收后的展示

<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="Submit as normal">
      <input type="submit" formtarget="_blank"
      value="Submit to a new window">
    </form>

10.input height和width  
height 和 width 属性规定用于 image 类型的`<input>`标签的图像高度和宽度。 height 和 width 属性只适用于 image 类型的`<input>` 标签。

11.input的list属性  
list属性规定输入域的datalist。datalist是输出域的选项列表。

12.input的min和max属性  
min，max和step属性为包含数字或日期的input类型规定约束。

13.input的multiple属性  
该属性规定input元素中可选择多个值。  
multiple属性适用于以下类型的标签：email和file。

14.input的pattern属性  
该属性描述了一个正则表达式用于验证input元素的值。适用于以下类型的input标签：text,search,url,tel,email,password.

<form action="demo-form.php">
      Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
      <input type="submit">
    </form>

15 input的placeholder属性  
placeholder属性提供一种提示，描述输入域所期待的值。输入框中默认的输入内容。

16 input的required属性  
该属性是一个boolean属性，required属性规定必须在提交之前填写输入域（不能为空）

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

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

[20160614133854565]: /images/20220721/40c82083aaab43848e23de9ee62cd337.png
[20160614134816053]: /images/20220721/eabaf117196c4a3cbb3592b5e809cba1.png