在前端开发中， <input> 是 HTML 表单中最常用的元素之一，用于接收用户输入的数据。它的主要作用是为用户提供一种与网页交互的方式，并将用户输入的数据传递给服务器或前端脚本进行处理。以下是 <input> 的主要作用及其常见用途的总结：
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。
通用属性
| 属性 | 属性值 | 功能 |
|---|---|---|
| name | 字符串 | 定义输入字段的名称，在表单提交时，服务器通过该名称来获取对应的值 |
| disabled | 布尔值 | 禁用输入框，使其无法被用户修改和操作，也不会被提交 |
| readonly | 布尔值 | 使输入框内容只读，无法编辑，但可以被选中和复制 |
输入框
| 属性 | 属性值 | 功能 |
|---|---|---|
| value | 字符串 | 输入框的默认值 |
| placeholder | 字符串 | 输入框内的提示文本，当用户未输入内容时显示，输入内容后消失 |
单行文本输入框 text
<input type="text" name="username" placeholder="请输入用户名" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| maxlength | 数字 | 可输入的最大字符数 |
密码输入框 password
<input type="password" name="password" placeholder="请输入密码" />
数字输入框 number
<input type="number" name="age" min="0" max="200" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
| step | 数字 | 输入值的增量或减量，step="2" 表示输入值的增量或减量为 2，min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。 |
电子邮件输入框 email
<input type="email" name="email" placeholder="请输入邮箱地址" />
网址输入框 url
<input type="url" name="website" placeholder="请输入网址">
搜索输入框 search
<input type="search" name="search" placeholder="请输入搜索内容" />
按钮
提交按钮：用于将表单数据发送到服务器进行处理
<input type="submit" value="提交" />
重置按钮：点击可将表单字段重置为初始值
<input type="reset" value="重置" />
普通按钮：通常与 JavaScript 一起使用来触发脚本或执行特定操作
<input type="button" value="按钮" />
图像按钮：使用图像作为提交按钮
<input type="image" src="submit-button.png" alt="Submit Form" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| formaction | 字符串 | 用于覆盖表单元素本身的 action 属性，允许在同一个表单中为不同的提交按钮指定不同的目标 URL，使表单数据可以根据不同的操作需求提交到不同的处理页面。 |
<input type="submit" formaction="URL1">
<input type="image" formaction="URL2">
<button type="submit" formaction="URL3">提交</button>
单选radio
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
多选checkbox
<input type="checkbox" name="hobby" value="篮球" />篮球
<input checked type="checkbox" name="hobby" value="阅读" />阅读
<input checked type="checkbox" name="hobby" value="编程" />编程
| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
文件上传 file
<input type="file" />
滑块 range
<input type="range" name="range" min="0" max="100" step="1" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| step | 数字 | 滑块移动的间隔 |
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
颜色选择器 color
<input type="color" name="color" />
日期选择器 date
<input type="date" name="birthdate" />
时间选择器 time
<input type="time" name="startTime" />
