正在加载...

HTML input 属性

上一课用 type 选控件外观。input 属性在同一标签上细化行为：提示、必填、范围、长度、模式、锁定。本课是日常辅助属性目录——不是第二份 type 地图，也不是后面的 form= 技巧。

为什么 input 属性重要

正确的 type 仍有缺口：必填为空、年龄越界、代码过长。属性提供浏览器轻量检查。真实应用仍需服务端校验。

直接回答

1）保留 name、id、value。2）placeholder 是空字段短提示——不能代替 label。3）必填用 required。4）数字/日期用 min、max、step；文本用 maxlength；可用 pattern。5）readonly 可见且通常会提交；disabled 不可用且通常不提交。6）属性细化已选 type——不替代 type，也不同于下一课的 form 关联。

📊 Handy input attributes

Attribute Role Beginner tip
placeholder Hint text in an empty field Not a label — always keep a real label
required Must be filled before submit Browser may block empty submit
min / max / step Limits for number/date-like types Match the type you already chose
maxlength Max characters for text-like types Soft cap in the UI; still check on the server
pattern Allowed character pattern Keep patterns simple for beginners
disabled Not usable; usually not submitted Do not disable fields you still need to send
readonly Visible, not editable; still submitted Good for fixed display values

资料：必填、提示与长度

小表单：姓名 required+placeholder，用户名 maxlength/pattern，城市可选。

Profile with input attributes

html 
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>

<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>

<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">

<button type="submit">Save</button>
</form>

阅读资料示例

  • 姓名与用户名有 required
  • placeholder 仅在空时显示——名称来自 label
  • maxlength=12
  • pattern 字母/数字/_
  • 城市无 required
  • type=text 已选；属性细化它

预订：范围与锁定

数字/日期靠 min/max/step 才有意义。readonly 代码可见且通常提交；disabled 促销通常不提交。

Booking ranges and locks

html 
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>

<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>

<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>

<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>

<button type="submit">Book</button>
</form>

阅读预订示例

  • 客人数与日期的 min/max/step
  • value=2 可改起始值
  • readonly 保留代码并通常提交
  • disabled 禁止编辑且常跳过提交
  • 日期限制依赖 type=date
  • 下一课：用 form=id 关联

选择合适的辅助属性

  • 必须填写：required
  • 空字段提示：placeholder（+ 真正的 label）
  • 数字/日期边界：min max step
  • 字符上限：maxlength
  • 简单格式：pattern
  • 可见不可改但提交：readonly
  • 锁定且通常不提交：disabled
  • 接线：name id value
  • 此处不要重选 type

练习——用属性收紧字段

  1. 复制资料；去掉 required 再加回
  2. 清空 placeholder；保留 label
  3. 将 maxlength 改为 20
  4. 客人低于 min 或高于 max
  5. 切换代码的 readonly
  6. 比较提交：readonly 代码 vs disabled 促销
  7. 写一句：属性细化行为；type 选外观；form= 在后

易错点

  • 用 placeholder 代替 label
  • 禁用仍需提交的字段
  • 只靠浏览器 required/pattern
  • 在忽略它们的类型上写 min/max
  • 对初学者过复杂的 pattern
  • 与上一课 type 目录混淆
  • 过早跳到 form=

小结

  • 选定 type 后用属性细化行为
  • 日常：required、placeholder、范围、maxlength、简单 pattern
  • readonly 通常提交；disabled 通常不
  • placeholder 提示；label 命名
  • 保留 name/id/value
  • 下一课：input 的 form 属性

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 52 的 68
Html 教程