預約表單是一種常用的在線表單，用于用戶與商家或平臺進行預約信息填寫。在傳統的表單中，我們通常使用 HTML 和 JavaScript 來創建表單，而在 CSS 中，我們可以使用一些技巧來使預約表單更加美觀和易于使用。
CSS 可以用于更改表單的外觀，包括表單背景、字體、顏色、邊框和背景圖片等。我們可以使用 CSS 選擇器來指定表單元素的位置、大小和樣式，從而使表單更加美觀和易于使用。
下面是一個使用 CSS 創建預約表單的簡單示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>預約表單</title>
<style>
.form-control {
display: block;
margin-bottom: 10px;
}
.form-control:hover {
background-color: #ddd;
}
.form-control-label {
font-size: 18px;
margin-bottom: 5px;
}
.form-control-text {
width: 100%;
padding: 10px;
font-size: 16px;
}
.form-error {
background-color: #f2f2f2;
color: #ff0000;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">郵箱：</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="phone">電話：</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<div class="form-group">
<label for="時間和空間">預約時間：</label>
<input type="text" class="form-control" id="時間和空間" name="時間和空間">
</div>
<div class="form-group">
<label for="status">狀態：</label>
<input type="text" class="form-control" id="status" name="status">
</div>
<button type="submit">提交</button>
</form>
</body>
</html>
在這個示例中，我們使用了 `div` 元素來創建表單的各個部分，并使用 CSS 樣式來更改表單的外觀。表單中的所有元素都使用了 `class` 屬性來指定樣式，以便我們可以方便地對其進行更改。
我們可以使用 CSS 選擇器來更改表單元素的大小和位置。例如，我們可以使用 `margin-bottom` 選擇器來使表單中的子元素底部對齊，或使用 `width` 選擇器來使表單中的所有元素都寬度為 100%。
通過使用 CSS，我們可以創建出美觀、易于使用的預約表單，使用戶能夠輕松填寫預約信息。