<div>是HTML中非常常見的一個元素，它通常用來創建容器，用于將文檔分割成一些獨立的部分。除了分割內容之外，<div>還可以用來包裹其他HTML元素，并提供樣式和布局上的控制。本文將重點介紹<div>元素與輸入文本相關的應用。

1. 使用<div>創建輸入文本框：

<div>
<label for="inputText">請輸入文本：</label>
<input type="text" id="inputText">
</div>

上面的代碼演示了如何使用<div>創建一個輸入文本框。通過<label>元素為文本框添加了一個描述性標簽，用戶在標簽后的輸入框中輸入內容。這樣的布局增強了用戶體驗并有利于網頁的可訪問性。

2. 響應用戶輸入事件：

<div>
<label for="inputText">請輸入文本：</label>
<input type="text" id="inputText" oninput="handleChange(event)">
<p id="display"></p>
</div>
<br>
<script>
function handleChange(event) {
const inputText = event.target.value;
document.getElementById("display").innerText = "您輸入的文本是：" + inputText;
}
</script>

這段代碼展示了如何通過<div>元素以及相關的JavaScript代碼響應用戶在文本框中的輸入事件。通過為<input>元素添加oninput事件處理程序，當用戶輸入文本時，會觸發handleChange函數，該函數從事件對象中獲取用戶輸入內容，并將其顯示在

元素中。

3. 使用CSS樣式美化<div>元素與輸入文本：

<style>
.input-container {
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
}
.input-container label {
font-weight: bold;
}
.input-container input {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
}
</style>
<br>
<div class="input-container">
<label for="inputText">請輸入文本：</label>
<input type="text" id="inputText">
</div>

上述代碼演示了如何通過為<div>元素添加CSS樣式類，并通過類名選擇器定義樣式，來美化<div>元素與其中的輸入文本框。通過調整背景顏色、邊框樣式和圓角，以及設置不同的字體加粗等等，可以使輸入文本框在用戶界面上看起來更加美觀。

通過以上實例，我們可以看到<div>元素在輸入文本方面的應用。它能夠提供良好的布局和樣式控制，同時結合JavaScript事件處理程序，實現對用戶輸入事件的響應。結合CSS樣式，還可以美化輸入文本框，提升用戶體驗。