32、网页表单与表格的 CSS 样式设计

网页表单与表格的 CSS 样式设计

1. 网页表单样式设计概述

网页表单是访客与网站交互的主要方式，通过表单提供信息，用户可以加入邮件列表、搜索产品数据库、更新个人资料或下单商品等。利用 CSS 可以让表单字段与网站其他元素（如字体、背景颜色和边距）具有相同的格式，虽然专门针对表单的 CSS 属性不多，但几乎可以将任何 CSS 属性应用于表单元素。

不过，在改变像提交按钮和下拉菜单这类通用界面元素的外观时要谨慎。大多数网民已经熟悉了表单的外观和操作方式，若过度改变表单外观，可能会让访客难以正确填写表单。例如，给表单字段添加点状边框可能会使原本容易识别的文本框被忽略。至少要确保网站上的表单能被用户识别为表单。

2. HTML 表单元素及样式设置

HTML 中有多种标签可用于构建表单，不同标签的样式设置能力有所不同：
| 标签 | 作用 | 可设置的样式属性 |
| ---- | ---- | ---- |
| <fieldset> | 对相关表单问题进行分组 | 背景颜色、背景图像、边框、内边距 |
| <legend> | 为字段组提供标签，显示在 <fieldset> 顶部边框的垂直中心位置 | 字体属性、背景颜色、背景图像、边框 |
| <input type="text"> 、 <input type="password"> 、 <textarea> |