HTML <input> 元素是表单中最常用的控件之一，表单属性使得表单控件的行为更加灵活和强大。以下是常见的与 <input> 元素和表单控件相关的表单属性，它们影响表单的行为、数据提交以及表单控件的验证等。

1. form

  • 说明：指定一个 <input> 控件属于哪个表单。当多个 <form> 存在于页面时，可以通过该属性将 <input>与指定的表单关联。
  • 示例：
<form id="form1">
    <input type="text" name="username">
</form>

<form id="form2">
    <input type="text" name="email" form="form1">
</form>
  • 用途：使一个 <input> 元素可以属于多个表单，或者通过 form 属性将控件放置在外部的表单中。

2. action

  • 说明：定义表单数据提交的 URL 地址。该属性会通过 <form> 标签上的 action 属性设置，而 input 本身不会使用该属性。
  • 示例：
<form action="submit_form.php" method="POST">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
  • 用途：用于定义表单提交数据的目标地址，通常设置在 <form> 标签中。

3. method

  • 说明：定义表单提交的 HTTP 方法，常见的有 GET 和 POST。该属性同样在 <form> 标签上设置，而 <input> 控件通过它来提交数据。
  • 示例：
<form method="POST" action="submit_form.php">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
  • 用途：决定数据是通过 URL 查询字符串（GET）还是通过请求体（POST）提交。

4. name

  • 说明：为 <input> 控件指定名称，表单提交时该控件的值将作为键发送到服务器。
  • 示例：
<input type="text" name="username" placeholder="请输入用户名">
  • 用途：定义表单控件的名称，便于在后台接收数据。

5. value

  • 说明：设置或获取 <input> 控件的默认值。当表单提交时，value 的值将被发送到服务器。
  • 示例：
<input type="text" name="username" value="john_doe">
<input type="submit" value="提交">
  • 用途：设置提交的初始值，或定义按钮、复选框和单选按钮的提交值。

6. disabled

  • 说明：禁用 <input> 控件，用户无法与控件进行交互或修改其值，也无法提交该控件的值。
  • 示例：
<input type="text" name="username" disabled placeholder="该字段已禁用">
  • 用途：禁用表单控件，不能交互或提交数据。

7. readonly

  • 说明：使输入框只读，用户不能修改其内容，但仍能提交内容。
  • 示例：
<input type="text" name="username" value="john_doe" readonly>
  • 用途：使控件只能查看但不能编辑其值，常用于显示信息。

8. required

  • 说明：定义表单控件为必填项，表单提交时如果该字段为空，则浏览器会触发验证提示。
  • 示例：
<input type="text" name="username" required placeholder="请输入用户名">
  • 用途：强制要求用户填写字段，避免空值提交。

9. maxlength

  • 说明：限制用户在文本框中输入的最大字符数。
  • 示例：
<input type="text" name="username" maxlength="20" placeholder="最多输入20个字符">
  • 用途：控制文本框中允许的最大字符数，防止用户输入过长的内容。

10. pattern

  • 说明：为输入框设置正则表达式，只有输入的数据符合该模式，表单才能提交。
  • 示例：
<input type="text" name="zipcode" pattern="\d{5}" placeholder="请输入邮政编码">
  • 用途：验证用户输入的内容是否符合特定格式，常用于数字、电话号码等格式的验证。

11. autocomplete

  • 说明：指定浏览器是否启用自动完成功能，on 启用，off 禁用。
  • 示例：
<input type="text" name="username" autocomplete="off" placeholder="请输入用户名">
  • 用途：控制浏览器是否启用表单字段的自动填充。

12. autofocus

  • 说明：当页面加载时，自动将焦点设置到该输入框。
  • 示例：
<input type="text" name="username" autofocus placeholder="请输入用户名">
  • 用途：在页面加载时自动聚焦到该输入框，常用于表单优化用户体验。

13. size

  • 说明：定义文本框的可见字符宽度。该属性的值影响文本框的显示宽度（以字符为单位）。
  • 示例：
<input type="text" name="username" size="20" placeholder="最多显示20个字符">
  • 用途：设置输入框的显示宽度，影响用户的可见区域。

14. step

  • 说明：定义数字或日期输入的步长，控制用户选择或输入的增量。
  • 示例：
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
  • 用途：对于 number 或 date 类型，限制用户输入的增量步长。

15. target

  • 说明：用于 type="image" 的输入控件，定义点击图像提交表单后的目标窗口。
  • 示例：
<input type="image" src="submit_button.png" alt="Submit" target="_blank">
  • 用途：通常与 type="image" 一起使用，定义提交表单后打开的窗口。

16. accept

  • 说明：指定文件上传控件（type="file"）可以接受的文件类型。
  • 示例：
<input type="file" name="upload" accept="image/*">
  • 用途：限制上传文件的类型，防止上传不受支持的文件类型。

17. multiple

  • 说明：允许用户选择多个文件进行上传。适用于文件输入框。
  • 示例：
<input type="file" name="files" multiple>
  • 用途：允许用户同时选择多个文件进行上传。

18. formaction

  • 说明：指定 type="submit" 按钮提交表单时的目标 URL，覆盖 <form> 元素中的 action 属性。
  • 示例：
<form action="submit_form.php" method="POST">
    <input type="text" name="username">
    <input type="submit" value="提交" formaction="submit_alternative_form.php">
</form>
  • 用途：覆盖表单的默认提交地址，提供针对单个提交按钮的特殊处理。

19. formtarget

  • 说明：指定表单提交后的目标窗口，通常与 formaction 一起使用。
  • 示例：
<input type="submit" value="提交" formaction="submit_form.php" formtarget="_blank">
  • 用途：定义点击提交按钮时，表单数据提交后的目标窗口。

总结

<input> 元素的属性为表单控件提供了强大的功能，可以控制用户输入、验证规则、提交方式、布局、交互体验等。理解并使用这些属性，能够有效提高表单的用户体验和数据正确性。