html输入框
时间: 2023-07-01 10:24:15 浏览: 50
HTML提供了多种输入框类型,以下是几种常用的输入框类型及其示例代码:
1. 文本框(type="text"):
```html
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
```
2. 密码框(type="password"):
```html
<label for="password">密码:</label>
<input type="password" id="password" name="password">
```
3. 单选框(type="radio"):
```html
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
```
4. 复选框(type="checkbox"):
```html
<label>爱好:</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
```
5. 下拉列表(type="select"):
```html
<label for="province">省份:</label>
<select id="province" name="province">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
```
以上示例代码只是简单的演示,实际使用时需要根据具体需求进行调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)