在 HTML 中，<div>是一個常用的元素，用于創建容器或分組其他 HTML 元素。在表單設計中，我們可以使用<div>元素來創建自定義的表單樣式。通過為表單元素添加樣式類，我們可以自定義輸入框、按鈕、下拉列表等元素的外觀，以實現獨特的表單設計。

1. 自定義輸入框樣式

<style>
.custom-input {
width: 200px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
}
</style>
<br>
<div>
<input type="text" class="custom-input" placeholder="請輸入..."/>
</div>

在上面的例子中，我們定義了一個名為custom-input的樣式類。該樣式類設置了輸入框的寬度、高度、內邊距、邊框樣式、圓角和背景顏色。然后，我們將這個樣式類應用于一個<input>元素，創建了一個自定義樣式的輸入框。

2. 自定義按鈕樣式

<style>
.custom-button {
width: 100px;
height: 40px;
border: none;
border-radius: 4px;
background-color: #428bca;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
<br>
<div>
<button class="custom-button">提交</button>
</div>

在以上代碼中，我們為按鈕定義了custom-button樣式類。該樣式類設置了按鈕的寬度、高度、邊框、圓角、背景顏色、字體顏色、字體大小和鼠標指針樣式。然后，我們將這個樣式類應用于<button>元素，創建了一個自定義樣式的按鈕。

3. 自定義下拉列表樣式

<style>
.custom-select {
width: 200px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
}
</style>
<br>
<div>
<select class="custom-select">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
</div>

在上面的例子中，我們為下拉列表定義了custom-select樣式類。該樣式類設置了下拉列表的寬度、高度、內邊距、邊框樣式、圓角和背景顏色。然后，我們將這個樣式類應用于<select>元素，并在其中添加了幾個選項，創建了一個自定義樣式的下拉列表。

通過以上幾個代碼案例，我們可以看到如何使用<div>和樣式類來自定義表單元素的外觀。借助 CSS 的強大功能，我們可以根據需要創建各種個性化的表單樣式，提升用戶體驗。