怎么用 CSS 控制表單

隨著現代 Web 開發的流行，表單已經成為了網站中不可或缺的一部分。表單可以讓用戶提交信息、選擇選項、過濾數據等等。在表單中，我們可以使用 CSS 來控制表單的外觀和行為。

CSS 可以控制表單中的元素，包括文本、樣式、邊框、背景等等。我們可以使用絕對定位來定位表單中的元素，并使用樣式來改變表單的外觀。

下面，我們來介紹一下如何使用 CSS 控制表單的表頭、主體和提交按鈕。

## 控制表單表頭

表單的表頭是表單的重要組成部分。我們可以使用 CSS 來改變表單的表頭樣式，包括字體、顏色、大小等等。我們可以使用以下代碼來控制表單表頭：

```css

form {

background-color: #f2f2f2;

border: 1px solid #ccc;

padding: 10px;

form > label {

display: block;

margin-bottom: 5px;

form > input[type="text"],

form > input[type="password"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

上述代碼創建了一個表單，其中包含了一個輸入框和一個標簽。輸入框和標簽都具有相同的樣式，以確保它們在同一行中。

## 控制表單主體

表單的主體是表單的其他元素，包括文本、選項、下拉列表等等。我們可以使用 CSS 來改變表單主體的樣式，包括字體、顏色、大小等等。我們可以使用以下代碼來控制表單主體：

```css

form {

background-color: #f2f2f2;

border: 1px solid #ccc;

padding: 10px;

form > ul {

list-style-type: none;

margin: 0;

form > li {

padding: 10px;

color: #333;

form > input[type="text"],

form > input[type="password"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

上述代碼創建了一個表單，其中包含了一個下拉列表和一個輸入框。下拉列表和輸入框都具有相同的樣式，以確保它們在同一行中。

## 控制提交按鈕

提交按鈕是表單的重要組成部分。我們可以使用 CSS 來改變提交按鈕的樣式，包括字體、顏色、大小等等。我們可以使用以下代碼來控制提交按鈕：

```css

form input[type="submit"] {

background-color: #4CAF50;

color: #fff;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

上述代碼創建了一個提交按鈕，其中包含了一個輸入框。提交按鈕的樣式與輸入框的樣式相同，以確保它們在同一行中。

通過使用 CSS 來控制表單的外觀和行為，我們可以使表單更加易于使用，并且可以讓用戶更好地理解和選擇。