正在加载...

HTML 表单属性

表单课给出了骨架。表单属性细化行为——空 action、get 与 post、自动填充、跳过检查，以及给 form 本身命名。input 类型与 form= 关联稍后讲。

为什么表单属性重要

两个看起来相似的表单行为可以不同。form 上的属性在不增加字段的情况下改变目标、HTTP 方式、自动填充与校验。

直接回答

1) action + method。2) 空 action 通常提交到当前页。3) autocomplete on|off。4) 仅在有意时用 novalidate。5) 表单 id/name 供脚本定位。

📊 Form attributes at a glance

Attribute Role Beginner tip
action Where the browser sends the data Empty often means “this page”
method get (query string) or post (request body) Prefer post for private or large data
autocomplete Autofill hint for the form off for sensitive practice forms
novalidate Skip built-in HTML checks on submit Demo tool — not a production default
name / id Identify the form element itself Useful when scripts or CSS target the form

带表单级属性的联系表单

扩展订阅骨架：保留带标签字段，装饰 form 开始标签。

Contact form with attributes

html 
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>

读联系示例

  • id/name 标识表单元素
  • action 是明确路径
  • post 让留言不出现在地址栏
  • autocomplete=on 允许自动填充
  • 字段 name 仍是载荷键
  • required 是字段级

GET 搜索与可选 novalidate

搜索常用 get 让查询留在 URL。敏感数据不要。练习用 autocomplete=off。novalidate 仅用于特殊演示。

GET search with autocomplete off

html 
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>

<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->

读搜索示例

  • get 在提交后追加 ?q=
  • autocomplete=off 减少自动填充
  • 无 required 时空字段也会提交
  • 注释中的 novalidate 只是提醒
  • 切勿用 get 传密码

空 action 与 GET / POST

  • 空或省略 → 当前文档 URL
  • get 适合筛选与搜索
  • post 适合注册与留言
  • 单靠 method 不等于安全

练习——调整表单属性

  1. 将 action 置空
  2. 切换搜索的 method
  3. 联系表单用 autocomplete=off
  4. 临时加 novalidate 与 required
  5. 去掉 novalidate
  6. 确认表单 id 与字段 name
  7. 一句话：属性调整目标、方式、自动填充与检查

易错点

  • 空 action 提交到当前页感到意外
  • 用 get 传密码
  • 线上长期保留 novalidate
  • 混淆表单 name/id 与字段 name
  • 以为 off 是安全保证
  • 搞反 action 与 method

小结

  • 表单属性细化提交行为
  • action + method 为核心；空 → 当前 URL
  • autocomplete 与 novalidate 是可选工具
  • 表单 name/id 标识表单；字段 name 键控数据
  • 私密数据用 post
  • 下一课：表单元素

🧠 测试您的知识

准备开始

测试您的知识

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

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

📝 说明

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