引入
HTML 输入控件用于让用户在网页中输入、选择或提交数据。
在表单里，<input> 是最常见的控件。它可以通过不同的 type 属性变成文本框、密码框、单选框、复选框、文件选择框等。
正文
定义
定义
HTML 输入控件是用于接收用户输入或选择的表单元素，最常见的是
<input>标签。
<input> 本身是一个空元素，不需要结束标签。
它通常写在 <form> 中，也可以单独使用，再由 JavaScript 获取用户输入内容。
基础语法
<input type="text" name="username">其中：
<input>表示输入控件type决定输入控件的类型name表示提交表单时的数据名称
常见输入类型
文本输入框
type="text" 用于输入普通文本，例如用户名、昵称、搜索关键词。
<input type="text" name="username" placeholder="请输入用户名">placeholder 用于显示提示文字，它只是提示，不是真正的默认值。
密码输入框
type="password" 用于输入密码，页面中通常会显示为圆点或星号。
<input type="password" name="password" placeholder="请输入密码">密码框只是让内容在页面上不直接显示，不代表数据已经加密。
邮箱输入框
type="email" 用于输入邮箱地址。
<input type="email" name="email" placeholder="请输入邮箱">提交时，浏览器会做一些基础格式检查，例如是否包含 @。
数字输入框
type="number" 用于输入数字。
<input type="number" name="age" min="1" max="120">min 和 max 可以限制数字范围，适合年龄、数量、价格等场景。
电话输入框
type="tel" 用于输入电话号码。
<input type="tel" name="phone" placeholder="请输入手机号">它不会自动判断所有手机号格式，更多是告诉浏览器这是电话输入内容，移动端可能会弹出数字键盘。
网址输入框
type="url" 用于输入网址。
<input type="url" name="website" placeholder="https://example.com">浏览器会做基础网址格式检查。
搜索框
type="search" 用于输入搜索关键词。
<input type="search" name="keyword" placeholder="搜索内容">它和普通文本框很像，只是语义上更适合搜索场景，有些浏览器会显示清除按钮。
日期输入框
type="date" 用于选择日期。
<input type="date" name="birthday">不同浏览器显示的日期选择器可能不完全一样。
时间输入框
type="time" 用于选择时间。
<input type="time" name="startTime">适合预约时间、开始时间、提醒时间等场景。
颜色选择器
type="color" 用于选择颜色。
<input type="color" name="themeColor">提交时通常会得到类似 #ff0000 这样的颜色值。
范围滑块
type="range" 用于选择一个范围内的数值。
<input type="range" name="volume" min="0" max="100" value="50">它适合音量、亮度、进度这类不需要精确手动输入的场景。
选择类控件
单选框
type="radio" 用于在多个选项中选择一个。
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女同一组单选框要使用相同的 name，这样浏览器才知道它们属于一组。
复选框
type="checkbox" 用于多选。
<input type="checkbox" name="skill" value="html"> HTML
<input type="checkbox" name="skill" value="css"> CSS
<input type="checkbox" name="skill" value="js"> JavaScript复选框适合兴趣、技能、标签、协议同意等场景。
默认选中
checked 用于让单选框或复选框在页面加载时默认选中。
<input type="checkbox" name="agree" checked> 我同意用户协议写上 checked 后，用户打开页面时这个选项就是选中状态。
文件和隐藏控件
文件上传
type="file" 用于让用户选择本地文件。
<input type="file" name="avatar">如果只想让用户选择图片，可以使用 accept 限制文件类型。
<input type="file" name="avatar" accept="image/*">文件上传通常需要后端配合处理，单独写 HTML 只能完成选择文件这一步。
隐藏字段
type="hidden" 用于提交页面上不需要显示的数据。
<input type="hidden" name="userId" value="1001">隐藏字段用户在页面上看不到，但它不是安全手段，因为仍然可以通过开发者工具查看和修改。
按钮类输入控件
<input> 也可以创建按钮，不过实际开发中更常用 <button>。
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">其中：
type="submit"表示提交表单type="reset"表示重置表单内容type="button"表示普通按钮，通常配合 JavaScript 使用
常见属性
name
name 是表单提交时的数据名称。
<input type="text" name="username">如果输入控件没有 name，表单提交时通常不会把它作为数据提交出去。
value
value 表示输入控件的默认值或提交值。
<input type="text" name="username" value="admin">对于单选框和复选框，value 是选中后真正提交的值。
placeholder
placeholder 用于显示输入提示。
<input type="text" name="nickname" placeholder="请输入昵称">它的作用是提示用户该输入什么，不适合放必须让用户长期看到的重要说明。
required
required 表示必填。
<input type="text" name="username" required>写上 required 后，如果用户没有填写，提交时浏览器会提示用户补全。
disabled
disabled 表示禁用控件。
<input type="text" name="username" value="admin" disabled>被禁用后，用户不能点击、输入或修改内容，而且这个控件通常不会提交数据。
readonly
readonly 表示只读。
<input type="text" name="username" value="admin" readonly>只读控件可以看到内容，但不能修改。它和 disabled 不一样，readonly 的值通常仍然可以提交。
maxlength
maxlength 用于限制最多可以输入多少个字符。
<input type="text" name="nickname" maxlength="12">适合昵称、验证码、简短标题等有长度限制的输入内容。
min、max、step
min、max、step 常用于数字、日期、范围滑块等控件。
<input type="number" name="count" min="1" max="10" step="1">其中：
min表示最小值max表示最大值step表示每次增加或减少的步长
配合 <label> 使用
<label> 用于给输入控件添加说明文字。
<label for="email">邮箱：</label>
<input id="email" type="email" name="email">for 的值要和输入控件的 id 对应。
这样点击“邮箱：”文字时，也可以聚焦到输入框，对用户更友好，也有利于无障碍访问。
例子
注册表单中的输入控件
下面是一个简单注册表单，包含文本、密码、邮箱、单选框、复选框和提交按钮。
<form action="/register" method="post">
<label for="username">用户名：</label>
<input id="username" type="text" name="username" required>
<label for="email">邮箱：</label>
<input id="email" type="email" name="email" required>
<label for="password">密码：</label>
<input id="password" type="password" name="password" required>
<input type="radio" name="role" value="student" checked> 学生
<input type="radio" name="role" value="teacher"> 老师
<input type="checkbox" name="agree" required> 我同意用户协议
<button type="submit">注册</button>
</form>这个例子里，required 会让关键内容变成必填，checked 会让“学生”默认选中。
特点
<input>是空元素，不需要写结束标签type决定输入控件的具体类型name是表单提交时的重要字段名value可以表示默认值，也可以表示提交值placeholder是提示文字，不是真正的数据required、checked、disabled、readonly都是常见布尔属性- 单选框同一组要使用相同的
name - 文件上传、日期选择、颜色选择等控件在不同浏览器中的显示可能不同
注意事项
- 表单控件最好配合
<label>使用，点击文字也能选中或聚焦控件 - 不要把
placeholder当作唯一说明文字，用户输入后它会消失 - 前端输入检查只能提升体验，不能代替后端校验
- 密码框只是隐藏显示内容，不代表传输过程安全
disabled控件通常不会提交数据，readonly控件通常可以提交数据hidden隐藏字段不能保存敏感信息，因为用户仍然可以查看和修改- 上传文件时要注意文件类型、大小和后端安全检查
理解
可以把 HTML 输入控件理解为网页里的“数据入口”。
用户要输入文字、选择选项、上传文件、点击提交，本质上都是通过这些控件完成的。
<input> 自己不负责真正处理数据，它只是把用户的输入放进页面结构里，后续再交给表单、JavaScript 或后端处理。
引出
理解输入控件之后，可以继续学习 HTML 表单验证，了解浏览器如何对用户输入做基础检查。