<div>表單是網頁中重要的元素之一，用于收集用戶的輸入信息。在HTML中，可以使用<input>標簽來創建各種表單元素，如文本框、復選框和按鈕等。然而，只使用HTML的表單元素可能無法滿足我們的需求，比如需要對表單元素的樣式進行自定義。這時，CSS的<div>表單就能派上用場了。
<div>表單是一種使用<div>元素來創建自定義表單樣式的方法。通過為表單元素添加特定的類名或ID，我們可以針對不同的表單元素進行樣式設置。下面我們來詳細說明幾個使用CSS <div>表單的代碼案例。
，我們來創建一個簡單的登錄表單。代碼如下：

<div class="form">
<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>

在上面的代碼中，我們使用了<div>元素來包裹登錄表單的內容，并使用了"class"屬性為其添加了一個名為"form"的類。通過CSS，我們可以為這個表單元素設置自定義的樣式，并使其呈現出更美觀的外觀。
接下來，我們來創建一個復選框表單。代碼如下：

<div class="form">
<label>請選擇您喜歡的水果:</label>
<div class="checkbox">
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">蘋果</label>
</div>
<div class="checkbox">
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">香蕉</label>
</div>
<div class="checkbox">
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">橙子</label>
</div>
</div>

在上述代碼中，我們創建了一個復選框表單，用戶可以通過勾選多個選項來選擇自己喜歡的水果。通過為每個復選框元素和其相應的標簽元素添加相同的類名，如"class"屬性中的"checkbox"，我們可以將它們關聯起來，并通過CSS為其設置樣式。例如，我們可以設置復選框的顏色、大小和間距等屬性。
最后，我們來創建一個下拉列表表單。代碼如下：

<div class="form">
<label for="city">選擇您所在的城市:</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen">深圳</option>
</select>
</div>

在上述代碼中，我們創建了一個下拉列表表單，用戶可以通過選擇其中一個選項來指定自己所在的城市。通過為<select>元素和<option>元素添加相同的類名，如"class"屬性中的"city"，我們可以通過CSS為它們設置樣式。例如，我們可以設置下拉列表的寬度、背景色和字體樣式等屬性。
一下，通過使用CSS的<div>表單，我們可以自定義表單元素的樣式，使其更符合我們的需求。無論是登錄表單、復選框表單還是下拉列表表單，通過為表單元素和相應的標簽元素添加相同的類名，我們能夠將它們關聯起來并進行樣式設置。這種方式可以提高用戶體驗，同時也讓網頁更加美觀和易于導航。希望通過本文的介紹，能夠讓您更加了解并善于使用CSS的<div>表單。