类型
一、url
<input type="url" name="url"/>: 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
二、tel
<input type="tel" name="tel"/>: 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
三、date
<input type="date" name="date"/>: 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
四、file
<input type="file" accept="image/*, text/*" name="file"/>: 让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
五、text
<input type="text" />: 默认值。单行的文本字段，输入值中的换行会被自动去除。
六、time
<input type="time" name="time"/>: 用于输入时间的控件，不包括时区。
七、week
<input type="week" name="week"/>: 用于输入以年和周数组成的日期，不带时区。
八、color
<input type="color" name="color"/>: 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
九、email
<input type="email" name="email"/>: 编辑邮箱地址的字段。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。
十、image
<input type="image" name="image" src="" alt="image input"/>: 图形化 submit 按钮。显示的图像由 src 属性决定。如果 src 属性缺失，就会显示 alt 的内容。
十一、month
<input type="month" name="month"/>: 输入年和月的控件，没有时区。
十二、radio
<input type="radio" name="radio"/>: 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
12.1 语法
radio
radio 组
<div class="radio-group">
<label>性别</label>
<div class="radio-group-item">
<label for="a">A</label>
<input
checked
name="type"
id="a"
value="a"
type="radio"
onclick="getValue(this)"
/>
</div>
<div class="radio-group-item">
<label for="b">B</label>
<input
name="type"
id="b"
value="b"
type="radio"
onclick="getValue(this)"
/>
</div>
<div class="radio-group-item">
<label for="c">C</label>
<input
name="type"
id="c"
value="c"
type="radio"
onclick="getValue(this)"
/>
</div>
</div>
<script>
function getValue(e) {
const { value } = e;
console.log(value);
}
function setValue(index) {
const radioList = document.querySelectorAll('input[name="type"]');
radioList[index].checked = true;
}
setTimeout(()=>{
setValue(2);
});
</script>
十三、range
<input type="range" name="range" min="0" max="25"/>: 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定可接受值的范围。
十三、reset
<input type="reset" name="reset"/>: 此按钮将表单的所有内容重置为默认值。不推荐使用该类型。
十四、button
<input type="button" value="Button"/>: 没有默认行为的按钮，上面显示 value 属性的值，默认为空。
十五、hidden
<input id="userId" name="userId" type="hidden" value="abc123">: 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
十六、number
<input type="number" name="number"/>: 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
十七、search
<input type="search" name="search"/>: 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
十八、submit
<input type="submit" name="submit"/>: 用于提交表单的按钮。
十九、checkbox
<input type="checkbox" name="checkbox"/>: 复选框，可将其值设为选中或未选中。
二十、password
<input type="password" name="password"/>: 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
二十一、datetime-local
<input type="datetime-local" name="datetime-local"/>: 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。