HTML（HyperText Markup
Language，超文本标记语言）是一种用于创建网页的标准标记语言，在 HTML 中，我们可以使用各种标签来构建网页的结构和内容，留言板是网站中常见的功能之一，它允许用户在网站上留下他们的意见和建议，在本教程中，我们将学习如何使用 HTML
编写一个简单的留言板。
1、创建一个 HTML 文件
我们需要创建一个 HTML 文件，可以使用任何文本编辑器（如 Notepad++、Sublime Text 等）来创建一个新的 HTML 文件，将文件保存为 index.html。
2、编写 HTML 结构
接下来，我们需要编写 HTML 的基本结构，一个基本的 HTML 页面包括以下部分：<!DOCTYPE>、<html>、<head> 和 <body>，在 <head> 标签内，我们可以添加一些元数据，如字符集、标题等，在 <body> 标签内，我们可以添加网页的主要内容。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<!-在这里添加留言板的代码 -->
</body>
</html>
3、添加表单元素
为了创建一个留言板，我们需要添加一个表单，表单允许用户输入他们的姓名、电子邮件地址和留言内容，我们可以使用 <form> 标签来创建表单，并使用 <input> 标签来添加输入字段，我们还需要添加一个提交按钮和一个重置按钮。
<form action="submit_message.php" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="提交留言">
<input type="reset" value="重置">
</form>
在上面的代码中，我们使用了 action 属性来指定表单提交的目标 URL（在这个例子中是 submit_message.php），我们还使用了 method 属性来指定表单提交的方法（在这个例子中是 post），我们使用了 required 属性来确保所有输入字段都是必填的。
4、添加 CSS 样式
为了使留言板看起来更美观，我们可以添加一些 CSS 样式，我们可以将 CSS 代码放在 <head> 标签内的 <style> 标签内，在这个例子中，我们将为表单添加一些基本样式。
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input, textarea {
width: 100%;
margin-top: 5px;
}
input[type="submit"], input[type="reset"] {
margin-top: 10px;
}
</style>
</head>
5、添加 JavaScript 验证（可选）
为了提高用户体验，我们可以使用 JavaScript 对表单进行实时验证，我们可以检查用户是否输入了有效的电子邮件地址，在这个例子中，我们将使用正则表达式来验证电子邮件地址的格式，请注意，这只是一个基本示例，实际应用中可能需要更复杂的验证规则。
<script>
function validateEmail(email) {
var re = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return re.test(email);
}
</script>
将上述 JavaScript 代码添加到 <head> 标签内，我们可以在 <form> 标签内为电子邮件输入字段添加一个 onchange 事件，以便在用户更改电子邮件时进行验证，如果电子邮件无效，我们可以显示一个错误消息，同样，我们可以为提交按钮添加一个 onclick 事件，以便在用户点击提交按钮时进行验证，如果电子邮件无效，我们可以阻止表单提交并显示错误消息。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/353721.html
微信扫一扫 