HTML表单属性

value 属性

value属性指定输入字段的初始值：

<form action="#">
  First name:<br>
  <input type="text" name="firstname" value="John">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

让我试试

readonly 属性

readonly 属性指定输入字段只读（不能更改）：

<form action="#">
  First name:<br>
  <input type="text" name="firstname" value ="John" readonly>
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

让我试试

disabled 属性

disabled 属性指定输入字段已禁用。

一个disabled的输入字段是不可用的和不可点击的，提交表单时其value将不被发送：

<form action="#">
  First name:<br>
  <input type="text" name="firstname" value ="John" disabled>
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

让我试试

size 属性

size 属性指定输入字段的大小（字符）：

<form action="#">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

让我试试

maxlength 属性

maxlength 属性指定输入字段的最大允许长度：

<form action="#">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

让我试试

使用maxlength属性，输入字段将不接受超过所允许的字符数。

maxlength 属性不提供任何反馈。如果你想提醒用户，您必须编写JavaScript代码。

注意：输入的限制并非万无一失，JavaScript提供了许多方法来增加非法输入。要安全地限制输入，它必须由接收器（以及服务器）检查！

HTML5 属性

HTML5 针对<input>添加以下属性 :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

下面两个是针对 <form>的:

  • autocomplete
  • novalidate

autocomplete 属性

autocomplete 属性指定表单或输入字段应该打开或关闭自动完成功能。

当autocomplete是on时，输入值之前浏览器会自动完成基于用户输入值。

提示：它可能是 autocomplete 针对表单是 "on"，针对输入是"off"，反之亦然。

autocomplete 属性和 <form> <input> 类型: text, search, url, tel, email, password, datepickers, range, 和 color 一起工作。

<form action="action_page.php" autocomplete="on">
  名字:<input type="text" name="fname"><br>
  姓氏: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

让我试试

提示：在某些浏览器可能需要激活自动完成功能才能工作。

novalidate 属性

novalidate 属性是一个<form>属性.

目前，novalidate 指定提交时不应验证表单数据。

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

让我试试

autofocus 属性

autofocus 属性指定输入字段在页面加载时自动获取焦点。

<form action="action_page.php">
  名字:<input type="text" name="fname" autofocus><br>
  姓氏: <input type="text" name="lname"><br>
  <input type="submit">
</form>

让我试试

form 属性

属性指定一个<input>元素属于一个或多个窗体。

提示：要引用多个表单，请使用空格分隔的表单ID列表。

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

让我试试

formaction 属性

formaction 属性指定在提交表单时将处理输入表单的URL。

formaction 属性重写<form>元素的action属性。

formaction 属性用于 type="submit" 和 type="image"。

<form action="action_page.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.asp" value="Submit as admin">
</form>

让我试试

formenctype 属性

formenctype 属性指定如何在提交时对表单数据进行编码（仅适用于method="post"的表单）

formenctype 属性重写<form>元素的enctype属性.

formenctype 属性用于 type="submit" 和 type="image".

<form action="demo_post_enctype.asp" 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>

让我试试

formmethod 属性

formmethod 属性定义了发送表单数据到action的URL的HTTP方法。

formmethod 属性覆盖<form>元素的方法.

formmethod 属性能用于 type="submit" 和 type="image"。

<form action="action_page.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.asp" value="Submit using POST">
</form>

让我试试

formnovalidate 属性

formnovalidate 覆盖<form>的 novalidate属性。

formnovalidate 属性用于 type="submit".

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

让我试试

formtarget 属性

formtarget 属性指定一个名称或关键字，表示在提交表单后接收的响应的显示位置。

formtarget 属性覆盖<form>元素的 target属性。

formtarget 属性用于 type="submit" 和 type="image"。

<form action="action_page.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/tab">
</form>

让我试试

height 和 width 属性

height 和 width 属性 指定<input type="image">元素的高度和宽度.

总是指定图像的大小。如果浏览器不知道大小，图像加载时页面会闪烁。

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="../img/img_submit.gif" alt="Submit" width="48" height="48">
</form>

让我试试

list 属性

list 属性应用于 <datalist> 元素，为<input>元素包含预定义的选项。

<form action="demo_form.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

让我试试

min 和 max 属性

min 和 max 属性指定<input>的最小值和最大值。

min 和 max 属性与下列输入类型一起工作: number, range, date, datetime-local, month, time 和 week。

<form action="action_page.php">

  输入一个1979-12-31之前的日期:
  <input type="date" name="bday" max="1979-12-31"><br>

  输入一个2000-01-01之后的日期:
  <input type="date" name="bday" min="2000-01-02"><br>

  数量 (1到5之间):
  <input type="number" name="quantity" min="1" max="5"><br>

  <input type="submit">

</form>

让我试试

multiple 属性

multiple 属性指定允许用户为<input>元素输入多个值。

multiple 属性具有下列输入类型: email 和 file。

<form action="action_page.php">
  选择图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

让我试试

pattern 属性

pattern 属性指定对<input>元素的值进行检查的正则表达式。

pattern 属性具有下列输入类型: text, search, url, tel, email 和 password.

提示：使用全局标题属性来描述帮助用户的模式。

提示：在我们的JavaScript教程中学习更多关于正则表达式。

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

让我试试

placeholder 属性

placeholder 属性指定一个提示，它描述输入字段的期望值（示例值或格式的简短说明）。

在用户输入值之前，提示将显示在输入字段中。

placeholder 属性具有下列输入类型: text, search, url, tel, email和password.

<form action="action_page.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

让我试试

required 属性

required 属性指定提交表单前必须填写输入字段。

required 属性具有下列输入类型: text, search, url, tel, email, password, date pickers, number, checkbox, radio和file。

<form action="action_page.php">
  用户名: <input type="text" name="usrname" required>
  <input type="submit">
</form>

让我试试

step 属性

step 属性为<input>元素指定输入步长。

例如: 如果step="3", 间隔数字 -3, 0, 3, 6等.

step 属性具有下列输入类型: number, range, date, datetime-local, month, time 和 week

<form action="action_page.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

让我试试