【Web前端】创建我的第一个 Web 表单
Web 开辟中，表单是不可或缺的组成部分。无论是用户注册、登录照旧反馈网络，表单都是与用户交互的重要方式。https://img-blog.csdnimg.cn/img_convert/1896b8bd872b246c421b3676ef73b45a.jpeg
什么是 Web 表单？
Web 表单是一种用于网络用户输入数据的界面元素。它们答应用户在浏览器中输入信息并提交这些信息到服务器。Web 表单通常由多个字段组成，例如文本框、下拉菜单和按钮等。
https://img-blog.csdnimg.cn/img_convert/bbd65c59583947088143d13ec2de0b2b.png
设计表单
在开始编码之前，必要思量我们盼望从用户那里网络哪些信息。将创建一个简单的联系人表单，答应用户输入他们的姓名、电子邮件、消息内容，并提交该信息。
表单设计要素
[*]姓名 - 一个文本框，用户输入他们的名字。
[*]电子邮件 - 一个文本框，用户输入他们的电子邮件地址。
[*]消息 - 一个多行文本框，用户可以输入他们的消息。
[*]提交按钮 - 用户点击此按钮以提交表单数据。
使用 HTML 实现我们的表单
现在，使用以下 HTML 元向来构建我们的表单：
[*]<form>：定义表单的开始和竣事。
[*]<label>：为每个输入字段提供形貌。
[*]<input>：用于输入单行文本（如姓名和电子邮件）。
[*]<textarea>：用于输入多行文本（如消息）。
[*]<button>：用户提交表单的按钮。
HTML 代码示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系表单</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>联系我们</h1>
<form action="/submit" method="POST">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">消息:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
</body>
</html>
https://img-blog.csdnimg.cn/img_convert/9bd16ef76f7da898d828919d662c3a52.png
代码解释
[*]<!DOCTYPE html> 声明文档范例为 HTML5。
[*]<html lang="zh"> 设置网页语言为中文。
[*]<head> 中包含了网页元信息和样式链接。
[*]<form> 元素的 action 属性指定了数据提交的目的 URL（这里为 /submit），method 属性设置为 POST，表现以 POST 方法提交数据。
[*]每个 <label> 元素使用 for 属性与对应的输入控件关联，增强可访问性。
[*]<input> 和 <textarea> 元素用于接收用户输入，且都设置了 required 属性，确保用户必填这些字段。
[*]<button> 元素用于提交表单。
基本表单样式
为了使我们的表单看起来更加美观，我们可以使用 CSS（层叠样式表）为其添加一些基本的样式。以下是一个简单的 CSS 示例，可以使表单更加整齐和用户友好。
/* styles.css */
body {
font-family: Arial, sans-serif; /* 设置全局字体 */
margin: 20px; /* 设置页面边距 */
}
h1 {
color: #333; /* 设置标题颜色 */
}
form {
max-width: 400px; /* 设置表单的最大宽度 */
margin: auto; /* 居中显示表单 */
padding: 20px; /* 为表单添加内边距 */
border: 1px solid #ccc; /* 添加边框 */
border-radius: 5px; /* 圆角边框 */
background-color: #f9f9f9; /* 设置背景颜色 */
}
div {
margin-bottom: 15px; /* 各个输入控件之间的间距 */
}
label {
display: block; /* 标签占据一整行 */
margin-bottom: 5px; /* 标签与输入框之间的间距 */
}
input,
input,
textarea {
width: 100%; /* 输入框和文本区域宽度充满父容器 */
padding: 10px; /* 内边距，增大可点击区域 */
border: 1px solid #ccc; /* 添加边框 */
border-radius: 3px; /* 圆角边框 */
}
button {
padding: 10px 15px; /* 内边距，使按钮更大 */
background-color: #28a745; /* 按钮背景色 */
color: white; /* 按钮文本颜色 */
border: none; /* 去掉默认边框 */
border-radius: 3px; /* 圆角边框 */
cursor: pointer; /* 鼠标悬停时显示手指光标 */
}
button:hover {
background-color: #218838; /* 鼠标悬停时更改按钮颜色 */
}
https://img-blog.csdnimg.cn/img_convert/e515f36e057c86ca8db665addb8bc609.png
样式解释
全局样式：body 设置了全局字体和页面的边距，使内容不会紧贴浏览器边缘。
标题：h1 的颜色被设置为深灰色，以提高可读性。
表单样式：form 的最大宽度限制在 400 像素，并居中显示。它有一定的内边距和圆角边框，增长了视觉效果。
输入控件间距：每个输入控件都被包裹在一个 <div> 中，通过 margin-bottom 属性给予了得当的隔断。
标签样式：使用 display: block 使得标签占据整行，从而让输入框看起来更整齐。
输入框和文本地区：所有输入字段（文本框、电子邮件框和文本区）都宽度设置为 100%，并且有统一的内边距、边框和圆角样式。
按钮样式：按钮的背景致为绿色，悬停时会变深色，以增强用户交互体验。
向服务器发送表单数据
当用户填写完表单并点击提交按钮后，表单数据将通过 POST 方法被发送到指定的 URL（在本例中为 /submit）。为了处置处罚这些数据，必要有一个服务器端应用程序来接收和处置处罚哀求。下面是一个使用 Node.js 和 Express 框架的简单服务器示例：
Node.js Express 服务器示例
const express = require('express'); // 引入 Express 框架
const bodyParser = require('body-parser'); // 引入 body-parser 中间件
const app = express(); // 创建 Express 应用
// 使用 body-parser 中间件解析请求体
app.use(bodyParser.urlencoded({ extended: true }));
// 定义处理表单提交的路由
app.post('/submit', (req, res) => {
const name = req.body.name; // 获取姓名
const email = req.body.email; // 获取电子邮件
const message = req.body.message; // 获取消息内容
// 在这里可以处理收到的数据，例如保存到数据库或发送电子邮件
console.log(`姓名: ${name}, 电子邮件: ${email}, 消息: ${message}`);
// 返回响应给客户端
res.send(`感谢您提交的信息，${name}！`);
});
// 启动服务器并监听指定的端口
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
}); 代码解释
引入依赖：express：轻量级的 Web 应用框架，用于构建服务器。body-parser：中间件，用于解析哀求体，使得我们可以轻松获取 POST 哀求中的数据。
创建应用：使用 express() 创建一个新的 Express 应用实例。
解析哀求体：使用 body-parser 的 urlencoded 方法来解析 URL 编码的数据（即表单数据）。extended: true 选项答应使用丰富的数据对象。
定义 POST 路由：当用户提交表单时，浏览器会向 /submit 发送一个 POST 哀求。在这个路由处置处罚函数中，我们从 req.body 中提取用户输入的姓名、电子邮件和消息。
处置处罚数据：在实际应用中，你可能想要将这些数据存储到数据库或通过电子邮件发送给某人。在示例中，我们仅在控制台打印信息。
发送响应：服务器返回一个简单的消息，确认用户已乐成提交表单。
启动服务器：使用 app.listen 方法启动服务器，并指定监听的端口（3000）。当服务器启动时，它将在控制台输出一条消息。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]