正在加载...

HTML input 类型

表单元素梳理了 form 内的标签。input 类型聚焦一个标签：input。type 选择控件外观。本课是 type 目录。required 等辅助属性随后。

为何 input 类型重要

type=text 几乎万能，但手机会出错误键盘、密码仍可见、日期变成自由文本。让 type 匹配数据可改善输入、检查与提交值形态。

直接回答

1) 在 input 上设 type——text、email、password、number、checkbox、radio、date、file、hidden、submit。2) 每个可见控件配 label。3) 同一答案的 radio 共享 name；checkbox 可独立。4) 提交优先 button type=submit。5) type 只选外观——action/method 与后续属性是另一层。

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

注册：带类型的字段

小型加入表单：邮箱、密码、年龄 number、开始日期。

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

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

阅读注册示例

  • email → 邮箱界面
  • password 掩码字符
  • number 数字输入
  • date 日期控件
  • label 用 for/id；name 为提交键
  • action/method 不变

调查：checkbox、radio 与 file

开关与上传用同一 input、不同 type。radio 共享 name=plan。checkbox 独立。file 打开选择器。

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

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

阅读调查示例

  • 通讯 checkbox 独立
  • 同 name → 单一 radio 选择
  • label 让文字可点
  • file + multipart 用于上传
  • fieldset 框住 Plan——重点仍是 type
  • 下一课：required 等属性

选择正确 type

  • 短自由文本：text
  • 邮箱/密码：email/password
  • 数量或年龄：number
  • 互斥选项：同 name 的 radio
  • 独立开关：checkbox
  • 日历日：date
  • 附件：file
  • 隐藏值：hidden
  • 多行仍用 textarea

练习——切换类型

  1. 复制注册；email→text
  2. 短暂把 password 换成 text
  3. 第二个 number 表示数量
  4. 不同 name 的 radio，再改回共享
  5. Newsletter + Pro；写下预期 name
  6. 无 multipart 的 file——重在意识
  7. 一句话：type 选择 input 外观

易错点

  • 密码用 text
  • 本应同组的 radio 用了不同 name
  • 无 label
  • 期望无正确编码就能 file 上传
  • 以为 type 可替代 action/name
  • 长文用 input 而非 textarea
  • 与下一课属性混淆

小结

  • 一个 input——靠 type 多种外观
  • 让 type 匹配数据
  • radio 共享 name；checkbox 可独立
  • 可见控件务必加 label
  • 表单元素与 input 属性是不同层
  • 下一课：input 属性

🧠 测试您的知识

准备开始

测试您的知识

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

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

📝 说明

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