本文目錄導讀：

1. HTML表單結構
2. CSS美化表單

HTML和CSS制作表單

HTML和CSS是制作網頁表單的重要工具，HTML用于構建表單的結構，而CSS則用于美化表單的外觀。

HTML表單結構

HTML表單是由一系列表單元素組成的，包括文本框、密碼框、按鈕等，這些元素都是通過<input>、<select>、<textarea>等標簽來定義的。

一個簡單的登錄表單可能包含以下內容：

<form action="login.php" method="post">
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username">
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password">
  <input type="submit" value="登錄">
</form>

CSS美化表單

CSS可以用來美化表單的外觀，比如改變顏色、字體、大小等，以下是一個簡單的CSS樣式表，用于美化上面的登錄表單：

form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
label {
  display: block;
  margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

HTML和CSS是制作網頁表單的重要工具，通過HTML定義表單結構，CSS美化表單外觀，可以制作出符合用戶需求、美觀實用的網頁表單。