HTML 输入属性

<input> 元素支持多种属性来控制其行为、外观和验证。

常见输入属性

type：定义输入控件的类型（例如，text、email、password、checkbox、radio、submit、file、date、number）。这是最基本的属性。

id：为元素提供一个唯一标识符。对于使用 for 属性关联 <label> 元素以及使用 CSS 和 JavaScript 进行定位至关重要。

name：指定输入控件的名称。提交表单时，此名称与输入的值一起发送。数据提交必需。

value：定义输入字段的初始值，或某些类型（如 radio 或 checkbox）在提交时发送的值。

示例：

<form action="/update" method="post">
  <div>
    <label for="user_email">Email:</label>
    <input type="email" id="user_email" name="email" value="default@example.com">
  </div>
  <div>
    <input type="radio" id="opt_yes" name="subscribe" value="yes" checked>
    <label for="opt_yes">Yes, subscribe</label>
  </div>
  <div>
    <input type="radio" id="opt_no" name="subscribe" value="no">
    <label for="opt_no">No, thank you</label>
  </div>
  <button type="submit">Update</button>
</form>

控制输入状态

readonly（布尔属性）：

指定输入字段的值不能由用户更改。但是，该值仍会随表单一起提交。元素可以接收焦点。

<label for="ref_id">Reference ID:</label>
<input type="text" id="ref_id" name="reference" value="XYZ123" readonly>

disabled（布尔属性）：

指定输入字段被禁用。被禁用的元素不可用、不可点击、不能接收焦点，并且其值不会随表单一起提交。

<label for="discount_code">Discount Code:</label>
<input type="text" id="discount_code" name="discount" value="APPLIED" disabled>

checked（布尔属性）：

指定在页面加载时，checkbox 或 radio 按钮应默认处于选中状态。

<input type="checkbox" id="agree" name="terms" value="agreed" checked>
<label for="agree">I agree to the terms</label>

关于布尔属性的说明：对于 readonly、disabled、checked、required、multiple、novalidate 等属性，它们的存在本身就意味着 true。您无需设置值（例如，readonly 就足够了，readonly="readonly" 或 readonly="" 等效但不必要）。

输入字段的呈现和提示

placeholder：提供一个简短提示（例如，示例值或描述），在用户输入值之前显示在输入字段中。适用于 text、search、url、tel、email、password 和 number 类型。

重要： placeholder 不能替代 <label>。标签对于可访问性至关重要。

<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="e.g., HTML forms">

size：指定输入字段的可见宽度，以平均字符宽度为单位。主要影响 text、search、url、tel、email、password 类型。注意： CSS（width 属性）是控制输入字段大小的首选方法，可实现更好的布局控制。

<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zipcode" size="5"> <!-- Suggests width for 5 chars -->

list：指定包含输入字段预定义选项的 <datalist> 元素的 id。提供自动完成建议。

<label for="browser_choice">Choose browser:</label>
<input list="browsers" id="browser_choice" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

输入验证属性（HTML5）

required（布尔属性）：

指定在提交表单之前必须填写输入字段。适用于大多数接受文本或需要选择/文件的输入类型。

<label for="req_email">Email (required):</label>
<input type="email" id="req_email" name="email" required>

minlength / maxlength：指定基于文本的输入（text、email、password、search、tel、url）允许的最小和最大字符数。

<label for="pwd">Password (8-16 chars):</label>
<input type="password" id="pwd" name="password" minlength="8" maxlength="16" required>

min / max：指定数字或日期/时间输入类型（number、range、date、month、week、time、datetime-local）允许的最小和最大值。

<label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="qty" min="1" max="10" value="1">

step：指定数字或日期/时间输入类型的合法数字间隔。对于 number，step="3" 允许的值如 -3、0、3、6。对于 range，它影响滑块的粒度。

<label for="rating">Rating:</label>
<input type="range" id="rating" name="rating" min="0" max="10" step="2" value="6">

pattern：指定输入值必须匹配的正则表达式。适用于 text、search、url、tel、email、password。使用 title 属性向用户解释所需的格式。

<label for="postcode">Postcode (UK):</label>
<input type="text" id="postcode" name="postcode"
       pattern="[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][A-Za-z]{2}"
       title="Enter a valid UK postcode (e.g., SW1A 0AA)" required>

提醒：HTML5 验证很有帮助，但并非万无一失。务必在服务器端验证数据。

特定输入类型的属性

multiple（布尔属性）：

允许用户选择或输入多个值。适用于 email（逗号分隔列表）和 file（选择多个文件）。也用于 <select> 元素。

<label for="attachments">Attach files:</label>
<input type="file" id="attachments" name="files" multiple>

accept：指定当 type="file" 时用户可以选择的文件类型。值是逗号分隔的 MIME 类型或文件扩展名。

<label for="avatar">Upload Image:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

height / width：指定 <input type="image"> 的尺寸。注意： <input type="image"> 用作图形提交按钮，但现在不太常见。使用 <button type="submit"> 结合 CSS 背景图片或嵌套 <img> 标签更灵活。对于尺寸控制，更推荐使用 CSS。

<!-- Less common usage -->
<input type="image" src="submit-icon.png" alt="Submit Form" width="32" height="32">

alt：<input type="image"> 的必需属性，提供可访问性替代文本，类似于 <img>。

表单关联和提交属性（HTML5）

这些属性允许输入元素（尤其是提交按钮）覆盖默认的 <form> 行为，或将元素与表单关联起来，即使它们位于 <form> 标签之外。

form：指定输入元素所属的 <form> 的 id。如果输入元素在 HTML 结构中放置在其关联表单之外，此属性很有用。

<form action="/process" method="post" id="mainForm">
  <!-- ... some fields ... -->
</form>

<!-- This field is outside the form tag but associated via the 'form' attribute -->
<label for="extra_field">Extra Info:</label>
<input type="text" id="extra_field" name="extra" form="mainForm">

<button type="submit" form="mainForm">Submit Main Form</button>

formaction：覆盖 <form> 元素的 action 属性。用于提交按钮（type="submit" 或 type="image"），将表单数据发送到不同的 URL。

formenctype：覆盖 <form> 元素的 enctype 属性。用于提交按钮。

formmethod：覆盖 <form> 元素的 method 属性（GET 或 POST）。用于提交按钮。

formnovalidate（布尔属性）：覆盖 <form> 元素的 novalidate 属性。如果存在于提交按钮上，即使主表单没有设置 novalidate，表单也会在没有浏览器验证的情况下提交。

formtarget：覆盖 <form> 元素的 target 属性。用于提交按钮，指定响应应显示在哪里（例如，_blank）。

使用覆盖属性的示例：

<form action="/standard-submit" method="post" id="complexForm">
  <label for="data">Data:</label>
  <input type="text" id="data" name="data">

  <button type="submit">Standard Submit (POST to /standard-submit)</button>

  <button type="submit" formaction="/admin-submit" formmethod="post">Submit as Admin (POST to /admin-submit)</button>

  <button type="submit" formaction="/view-data" formmethod="get" formtarget="_blank" formnovalidate>
    View Data (GET to /view-data, new tab, no validation)
  </button>
</form>

其他 HTML5 属性

autocomplete：控制浏览器自动完成功能（on 或 off）。可以在 <form> 或单个输入字段上设置。对于敏感字段关闭自动完成功能很有用。

<input type="text" name="credit_card" autocomplete="off">

autofocus（布尔属性）：指定页面加载时输入元素应自动接收焦点。谨慎使用，因为它可能会让人感到迷失方向。

<label for="first_field">First Field:</label>
<input type="text" id="first_field" name="first" autofocus>