html表格标签(下)：lable标签，select标签和textara标签

以你之姓@ 2024-05-06 21:22 65阅读 0赞

![previewfile\_2352068635][previewfile_2352068635]

**html表格标签(下)：lable标签，select标签和textarea标签**

## **lable标签** ##

搭配 input 使用,点击 label 标签就能选中对应的单选/复选框, 能够提升用户体验。  
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应 (此时点击才是有用的)

![image-20240218203255308][]

**运行效果：**  
![image-20240218203644927][]

## **select标签** ##

下拉菜单  
注：`option`中定义 `selected="selected"` 表示默认选中。  
**示例代码：**  
![image-20240218204211147][]

**运行效果：**

![image-20240218204356413][]

**默认选择年份为2004**

![image-20240218204605901][]

**运行效果：**  
![1111][]

## **textarea标签** ##

rows 和 cols 也都不会直接使用, 都是用 css 来改的

**示例代码：**

![image-20240218213409354][]

**运行效果：**

![image-20240218213340465][]

[previewfile_2352068635]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bd85bb42dc3342d0ac321e4de818a73d.jpeg
[image-20240218203255308]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3cc0858606eb4695948f724c964a9674.png
[image-20240218203644927]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2c12dd2300dd49c6b59a0381076e27f8.png
[image-20240218204211147]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/590d79b654a54a348521d1dc73a633b4.png
[image-20240218204356413]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5e1ab40b806d4ea7a0488ee3d1f0d065.png
[image-20240218204605901]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6ce79c11bf1345a09c93d19ecfc3e535.png
[1111]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/753a58e769cd4f14955e44fa739e7c47.png
[image-20240218213409354]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a635f3a46121470fa4e77354204d2d14.png
[image-20240218213340465]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d8e90071ec454523963d474c12562d8e.png