HTML input 语法
在 HTML 中，input 标签用于创建各种收集用户输入信息的表单控件，比如文本框、密码框、单选按钮、复选框等。
语法：
<input type="类型">说明：
input 标签常用属性如下表所示。
| 属性 | 说明 |
|---|---|
| type | 指定输入类型 |
| form | 设置所属的表单 ID |
| name | 指定名称，用于表单提交时标识 |
| value | 指定默认值 |
| placeholder | 指定内容为空时，显示的占位符文本 |
| readonly | 是否禁用 |
| required | 是否必选 |
| autofocus | 是否自动获取焦点 |
| checked | 是否默认选中 |
| disabled | 是否禁用 |
type 属性是 input 标签最重要的属性，它常用的取值如下表所示。
| 取值 | 说明 |
|---|---|
| text（默认值） | 单行文本框 |
| password | 密码文本框 |
| search | 搜索文本框 |
| url | URL 文本框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| file | 文件上传 |
| tel | 电话号码 |
| 电子邮件 | |
| number | 数字控件 |
| color | 颜色选择器 |
| range | 范围选择器 |
| time | 时间选择器 |
| date | 日期选择器 |
| datetime-local | 本地日期选择器 |
| week | 星期选择器 |
| month | 月份选择器 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图片按钮 |
| hidden | 用于未显示的表单，但其值提交给服务器 |
HTML input 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML input 示例
接下来，我们通过几个简单的例子来讲解一下 HTML input 标签是如何使用的。
示例 1：input 标签创建文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<p>
<label>账号：<input type="text" name="username"></label>
</p>
<p>
<label>密码：<input type="password" name="password"></label>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
密码文本框与单行文本框在外观上是一样的，但当我们输入内容后，就会看出两者的区别，如下图所示。
示例 2：input 标签创建单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
<br>
年龄:
<label><input type="radio" name="age" value="80后">80后</label>
<label><input type="radio" name="age" value="90后">90后</label>
<label><input type="radio" name="age" value="00后">00后</label>
</form>
</body>
</html>页面效果如下图所示。
分析：
上面定义了两组单选按钮，在每一组中，选项之间都是互斥的。也就是说，在同一组中，只能选中其中一项。
最后有一点要说明一下的，为了更好地语义化，表单元素与后面的文本一般都需要借助 label 标签关联起来。
示例 3：input 标签创建复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
你喜欢的水果：<br>
<label><input type="checkbox" name="fruit" value="苹果" checked>苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" checked>西瓜</label>
<label><input type="checkbox" name="fruit" value="李子">李子</label>
</form>
</body>
</html>页面效果如下图所示。
分析：
复选框中的 name 跟单选按钮中的 name 都是用来设置 “组名” 的，表示该选项位于哪一组中。
两者都设置 name 属性，为什么单选按钮只能选中一项，而复选框可以选择多项呢？这是因为浏览器会自动识别这是 “单选按钮组” 还是 “复选框组”（说白了就是根据 type 属性取值来识别）。如果是单选按钮组，就只能选择一项；如果是复选框组，就可以选择多项。
此外，如果想在默认情况下，让复选框某几项选中，我们也可以使用 checked 属性来实现。
