四種表單的CSS樣式怎么寫

在Web開發(fā)中，表單是不可或缺的部分，為了更好地呈現(xiàn)給用戶，我們需要為表單添加一些樣式，下面介紹四種常見的表單樣式，并給出相應(yīng)的CSS代碼示例。

1. 基本樣式

基本樣式通常包括表單的整體樣式、標(biāo)簽樣式和輸入框樣式，以下是一個(gè)簡(jiǎn)單的示例：

/* 整體樣式 */
.form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* 標(biāo)簽樣式 */
.form label {
  display: block;
  margin-bottom: 10px;
}
/* 輸入框樣式 */
.form input[type="text"],
.form input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

2. 水平樣式

水平樣式將標(biāo)簽和輸入框排列在一行中，以下是一個(gè)示例：

.form.horizontal label {
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.form.horizontal input[type="text"],
.form.horizontal input[type="password"] {
  display: inline-block;
  width: 70%;
}

3. 響應(yīng)式樣式

響應(yīng)式樣式可以根據(jù)屏幕大小自動(dòng)調(diào)整表單的布局和樣式，以下是一個(gè)示例：

@media (max-width: 600px) {
  .form {
    width: 100%;
    padding: 10px;
  }
  .form label {
    display: block;
    margin-bottom: 5px;
  }
  .form input[type="text"],
  .form input[type="password"] {
    width: 100%;
    padding: 5px;
  }
}

4. 表單驗(yàn)證樣式

表單驗(yàn)證樣式可以用來突出顯示驗(yàn)證錯(cuò)誤的輸入項(xiàng)，以下是一個(gè)示例：

.form .error {
  border-color: red; /* 錯(cuò)誤狀態(tài) */
}

在JavaScript中，我們可以動(dòng)態(tài)地添加error類到驗(yàn)證失敗的輸入項(xiàng)上。

// 假設(shè)input是驗(yàn)證失敗的輸入項(xiàng)元素
input.classList.add('error'); // 添加錯(cuò)誤類，觸發(fā)CSS樣式變化。