<div> CSS模板 表單
<div>是 HTML 中的一個重要標簽，用于定義一個文檔中的“分區”，它通常用于劃分不同區塊并應用不同的樣式。CSS（層疊樣式表）是一種樣式表語言，用于描述 HTML 文檔的顯示樣式。
在網頁設計中，表單是一個常見的交互元素，用于收集用戶輸入的數據。通過使用<div>和CSS樣式，我們可以創建各種樣式豐富的表單，以便更好地吸引用戶，并使用戶輸入數據的過程更加美觀和易于使用。
下面將給出幾個使用<div>和CSS樣式的案例，來詳細解釋和說明如何創建和定制表單。
例子一：簡單注冊表單

下面是一個簡單的注冊表單的代碼示例：

<div class="form">
<h2>注冊</h2>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email" required>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="注冊">
</div>

在上面的代碼中，我們使用了一個名為"form"的<div>來包裹整個表單。我們還使用了

標簽來表示表單的標題。每個輸入字段都使用了<label>標簽來標識字段的名稱，并且使用了<input>標簽來定義輸入字段的類型和要求。最后，我們使用<input>標簽來表示表單的提交按鈕。

例子二：自定義樣式的登錄表單

下面是一個自定義樣式的登錄表單的代碼示例：

<div class="form login">
<h2>登錄</h2>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登錄">
</div>

<style>
.form.login {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
<br>
.form.login h2 {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
<br>
.form.login label {
display: block;
margin-bottom: 10px;
}
<br>
.form.login input[type="text"],
.form.login input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
<br>
.form.login input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 3px;
border: none;
}
<br>
.form.login input[type="submit"]:hover {
background-color: #555;
}
</style>

在上面的代碼中，我們給登錄表單添加了一個名為"login"的自定義類，以便我們可以在 CSS 樣式中針對這個類定制樣式。我們使用了一些 CSS 屬性，如背景顏色、邊距、邊框等，來定制表單的外觀。我們還改變了標題、標簽和輸入字段的字體大小、顏色等。最后，我們通過:hover偽類來定義鼠標懸停時按鈕的背景顏色。

這些例子只是展示了一小部分使用<div>和 CSS 樣式創建和定制表單的方式。通過合理地運用<div>和 CSS 樣式，我們可以創建適應不同需求的各種表單樣式。通過與其他元素和特性的結合使用，我們可以打造出更加獨特和富有創意的表單設計，提升用戶體驗，滿足用戶的期望。