HTML文本框类型有以下几种:
1. 文本框(Text Box):用于输入单行文本,是最基本的输入控件,可以通过设置`type`属性为`text`来创建一个文本框。
<input type="text" name="username">
2. 密码框(Password Box):用于输入密码,与文本框类似,但输入的字符会以星号(*)显示,可以通过设置`type`属性为`password`来创建一个密码框。
<input type="password" name="password">
3. 邮箱框(Email Box):用于输入电子邮件地址,可以自动验证输入的格式是否正确,可以通过设置`type`属性为`email`来创建一个邮箱框。
<input type="email" name="email">
4. 电话号码框(Phone Number Box):用于输入电话号码,可以限制输入的格式和长度,可以通过设置`type`属性为`tel`或`phone`来创建一个电话号码框。
<input type="tel" name="phone"> <input type="phone" name="phone">
5. 数字框(Number Box):用于输入数字,可以限制输入的范围,可以通过设置`type`属性为`number`来创建一个数字框,还可以设置其他属性,如最小值、最大值、步长等。
<input type="number" name="age" min="1" max="100" step="1">
6. 日期框(Date Box):用于选择日期,可以通过设置`type`属性为`date`来创建一个日期框,还可以设置其他属性,如默认值、可选日期范围等。
<input type="date" name="birthday">
7. 下拉列表框(Dropdown List Box):用于从多个选项中选择一个值,可以通过设置`type`属性为`select`来创建一个下拉列表框,并添加选项元素(``)。
<select name="gender"> <option value="male">男</option> <option value="female">女</option> <option value="other">其他</option> </select>
8. 复选框(Checkbox):用于选择多个选项中的多个值,可以通过设置`type`属性为`checkbox`来创建一个复选框,还可以设置其他属性,如标签名等。
<input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="sports"> 运动 <input type="checkbox" name="hobby" value="music"> 音乐
9. 单选按钮(Radio Button):用于在多个选项中选择一个值,可以通过设置`type`属性为`radio`来创建一个单选按钮组,并添加单选按钮元素(``,没有名称和值),当用户选择其中一个单选按钮时,其他单选按钮会自动取消选中。
<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <input type="radio" name="gender" value="other"> 其他
10. 多选框(Multi-Select Box):用于在多个选项中选择多个值,可以通过设置`type`属性为`checkbox`来创建一个多选框组,并添加复选框元素(``,没有名称和值),当用户选择其中一个复选框时,该复选框会被选中,其他复选框会自动取消选中,可以使用JavaScript监听复选框的状态变化,实现动态更新数据等功能。