標題：CSS HTML 登錄表單
登錄表單是網站中常見的一種表單元素，用于驗證用戶的身份和授權。在網站中，登錄表單通常用于用戶注冊或登錄頁面，讓用戶輸入用戶名和密碼等信息，以便驗證其有效性并讓用戶訪問受保護的內容。
本文將介紹如何使用 CSS 和 HTML 創建一個簡單的登錄表單。我們將使用 HTML 標記和 CSS 樣式來創建一個具有正常表單元素的登錄表單，包括用戶名和密碼輸入框、提交按鈕和返回按鈕。
1. 創建 HTML 文件
在本地計算機上創建一個新的 HTML 文件，并使用文本編輯器編寫以下代碼：
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
label {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
</style>
</head>
<body>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
<input type="submit" value="Register">
</form>
</body>
</html>
2. 添加 CSS 樣式
將上面的代碼保存為一個 CSS 文件，并將其添加到 HTML 文件中。使用以下 CSS 樣式來調整表單的外觀：
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
label {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
3. 驗證表單
在瀏覽器中打開新的 HTML 文件或登錄表單頁面，確保表單頁面正常工作。使用 JavaScript 代碼檢查表單中的用戶名和密碼是否有效，確保用戶輸入的信息沒有被篡改或無效。
使用 CSS 和 HTML 創建登錄表單非常簡單。通過使用 CSS 樣式來美化表單的外觀，以及使用 HTML 標記和 JavaScript 代碼來驗證表單的有效性，我們可以創建一個簡單的、易于使用的登錄表單。