类型
一、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
来规定可接受值的范围。