当今的网站设计越来越多地使用了动态交互效果，而表单验证则是其中不可或缺的一个环节。本文将介绍如何使用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来创建交互式网站。
