<div>和<form>是HTML中常用的兩個標簽，用于創建網頁中的表單元素和設置表單的樣式。下面我將通過幾個代碼案例詳細解釋說明這兩個標簽的使用方法和樣式設置。
，我們來看一個簡單的例子，利用<div>和<form>標簽創建一個登錄表單。代碼如下：

<div style="width: 300px; margin: 0 auto;">
<h2>登錄</h2>
<form>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登錄">
</form>
</div>

在上面的代碼中，我們利用<div>標簽創建了一個容器，設置了容器的寬度為300px，并使用了居中對齊的樣式。在<div>標簽內部，我們使用了<form>標簽創建了一個表單，表單包含了兩個輸入框和一個提交按鈕。輸入框使用了<input>標簽，并通過type屬性指定了輸入框的類型。
接下來，我們可以給表單元素設置樣式，例如改變輸入框的寬度、邊框樣式等。代碼如下：

<style>
form {
width: 200px;
}
<br>
  input[type="text"], input[type="password"] {
width: 100%;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
<br>
  input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>

在上面的代碼中，我們使用了內聯樣式和<style>標簽來為表單元素設置樣式。我們給<form>標簽設置了寬度為200px，然后使用了屬性選擇器來選擇所有的輸入框，并為其設置了寬度為100%、內邊距、邊框樣式等。最后，我們還為提交按鈕設置了背景顏色、文字顏色、內邊距、邊框樣式等。
除了可以通過樣式表設置表單的樣式外，我們還可以使用JavaScript來動態改變表單的樣式。例如，我們可以通過JavaScript自動聚焦到用戶名輸入框，并給輸入框加上邊框樣式。代碼如下：

<script>
window.onload = function() {
var usernameInput = document.getElementById("username");
usernameInput.focus();
usernameInput.style.border = "2px solid #007bff";
}
</script>

在上面的代碼中，我們使用了JavaScript的window.onload事件，當頁面加載完畢后，會自動執行我們的代碼。我們通過getElementById方法獲取到了用戶名輸入框的元素，然后使用focus方法實現自動聚焦。接著，我們通過設置style屬性來改變輸入框的邊框樣式。
綜上所述，<div>和<form>是HTML中常用的兩個標簽，用于創建表單和設置表單的樣式。我們可以通過設置標簽中的元素和屬性來實現不同的功能和樣式效果，從而為用戶提供更好的交互體驗。