HTML笔记：表单input标签

短命女 2023-03-04 10:30 182阅读 0赞

> 摘要：微信搜索【[三桥君][Link 1]】  
> 说明：这是关于HTML5的代码笔记

## 一、理论知识 ##

**表单标签**  
from：表单的最外层容器  
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70]

## 二、参考示例 ##

（一）  
**1、代码**

<form>
              <h1>输入框</h1>
              <input type="text" placeholder="请输入用户名">
              <h1>密码框</h1>
              <input type="password" placeholder="请输入密码">
              <h2>复选框</h2>
              <input type="checkbox" checked>苹果
              <input type="checkbox">香蕉
              <input type="checkbox" disabled>葡萄
              <h2>单选框</h2>
              <input type="radio" name="gender">男
              <input type="radio" name="gender">女
              <h2>上传文件</h2>
              <input type="file">
              <h2>提交按钮和重置按钮</h2>
                <input type="submit">
                <input type="reset">
          </form>

**2、结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70 1]  
（二）  
**1、代码**

**2、结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70 2]

## 三、问答 ##

**1、如何在输入框内添加提示文字？**  
placeholder

**2、如何在输入框内添加默认文字？**  
value

**3、如何使默认好选项？**  
checked

<input type="checkbox" checked>苹果

**4、如何使选项变为不可选？**  
disabled

<input type="checkbox" disabled>葡萄

**5、如何设置单选选项？**  
在每个选项里都添加这个 name=“gender”

<input type="radio" name="gender">男
    <input type="radio" name="gender">女

**6、如何添加多行文本框？**  
textarea标签  
cols行  
rows宽

**7、下拉菜单如何更改默认选项？**  
selected

**8、下拉菜单如何使选项变为不可选？**

**9、下拉菜单如何使选项框变为多个？（默认一个选项）**  
size

**10、下拉菜单如何使选项可以多选？**  
multiple

**11、如何使文件上传可以多选？**  
multiple

**12、如何使单选选项可以通过点击文字来选择选项？（即扩大选项点击范围）**  
label

--------------------

> 文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【[三桥君][Link 1]】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~

[Link 1]: https://blog.csdn.net/weixin_46218781
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70]: /images/20230208/ac206ec7224f4749b06482cee48c3e53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/4d1cf1234c984d9ebbbd8151215de64e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/efe1c80aee0b4931a6f35f6a7dbd7531.png