當今的網站設計越來越多地使用了動態交互效果，而表單驗證則是其中不可或缺的一個環節。本文將介紹如何使用HTML5和CSS制作一個簡單的輸入郵箱號碼提交訂閱表單，并添加表單驗證功能。
創建一個HTML文件
我們需要創建一個HTML文件，在文件中加入基本的HTML結構和表單元素。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訂閱郵件</title>
</head>
<body>
<h1>輸入您的郵箱地址，訂閱我們的最新資訊！</h1>
<form>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
</body>
</html>
在這個代碼片段中，我們使用了<form>標簽來創建一個表單，里面包含一個用于輸入郵箱的<input>元素和一個用于提交的<button>元素。
注意：我們在<input>元素中使用了type="email"屬性，這是HTML5新增的一種類型，可以對郵箱格式進行基本的驗證。同時，我們也使用了required屬性，告訴瀏覽器這個字段必須填寫才能提交表單。
添加樣式
我們為表單添加一些基本的樣式，讓它看起來更加美觀。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訂閱郵件</title>
<style>
h1 {
text-align: center;
font-size: 24px;
}
form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px;
}
label {
font-size: 16px;
margin-right: 10px;
}
input[type="email"] {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 300px;
margin-bottom: 10px;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 5px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<h1>輸入您的郵箱地址，訂閱我們的最新資訊！</h1>
<form>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
</body>
</html>
在這段代碼中，我們使用了CSS對頁面進行了一些簡單的布局和樣式美化。其中使用了display: flex和flex-direction: column來將表單元素垂直排列；使用了margin來增加頁面間距，以及為<button>元素設置了一些基本的樣式。
添加表單驗證
上面我們使用了HTML5的type="email"屬性來進行郵箱格式的基本驗證。但是，這種驗證只能在前端進行，無法完全保證數據的準確性。我們還需要在后臺進行一些額外的驗證，以保證用戶輸入的數據是有效的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訂閱郵件</title>
<style>
h1 {
text-align: center;
font-size: 24px;
}
form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px;
}
label {
font-size: 16px;
margin-right: 10px;
}
input[type="email"] {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 300px;
margin-bottom: 10px;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 5px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0069d9;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>輸入您的郵箱地址，訂閱我們的最新資訊！</h1>
<form>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit" id="submit-btn">提交</button>
<div id="error-message-container"></div>
</form>
<script>
const emailInput = document.getElementById('email');
const submitBtn = document.getElementById('submit-btn');
const errorMessageContainer = document.getElementById('error-message-container');
submitBtn.addEventListener('click', (event) => {
// 阻止表單默認的提交行為
event.preventDefault();
// 獲取輸入的郵箱地址
const emailValue = emailInput.value.trim();
// 正則表達式驗證郵箱格式
const emailRegEx = /\S+@\S+\.\S+/;
const isValidEmail = emailRegEx.test(emailValue);
if (!isValidEmail) {
// 如果郵箱格式不正確，顯示錯誤提示信息
errorMessageContainer.innerHTML = '請輸入有效的郵箱地址';
} else {
// 否則清空錯誤提示信息，提交表單
errorMessageContainer.innerHTML = '';
document.forms[0].submit();
}
});
</script>
</body>
</html>
在上面的代碼中，我們使用了JavaScript來添加表單驗證功能。我們先獲取了表單元素和相關的DOM節點，給提交按鈕添加了一個點擊事件的監聽器。當用戶點擊提交按鈕時，會執行回調函數進行驗證。
在驗證函數中，我們使用正則表達式對用戶輸入的郵箱地址進行了基本的格式驗證。如果格式不正確，則在頁面上顯示錯誤提示信息；否則清空錯誤提示信息并提交表單。
通過以上步驟，我們成功地制作了一個簡單的輸入郵箱號碼提交訂閱表單，并添加了表單驗證功能。當然，這只是一個基本的范例，實際應用中可能需要更加復雜的驗證方式。但是，通過這個例子，我們可以初步了解HTML5和CSS如何配合JavaScript來創建交互式網站。
