html创建表单代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单表单示例</title> </head> <body> <h2>简单表单示例</h2> <form action="/submit_form" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br><br> <label>性别:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男性</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女性</label><br><br> <label for="hobbies">爱好:</label><br> <input type="checkbox" id="hobby1" name="hobbies" value="football"> <label for="hobby1">足球</label><br> <input type="checkbox" id="hobby2" name="hobbies" value="basketball"> <label for="hobby2">篮球</label><br> <input type="checkbox" id="hobby3" name="hobbies" value="swimming"> <label for="hobby3">游泳</label><br><br> <label for="country">国家:</label> <select id="country" name="country"> <option value="usa">美国</option> <option value="uk">英国</option> <option value="china">中国</option> <option value="japan">日本</option> </select><br><br> <input type="submit" value="提交"> </form> </body> </html>

这个表单包括了:

一个文本输入框一个密码输入框单选按钮复选框下拉菜单提交按钮

你可以根据需要修改表单中的各种元素的属性和值。

当用户填写完表单并点击提交按钮后,表单数据将被发送到指定的服务器端地址,并使用指定的请求方法。

在这个例子中,表单数据将被发送到服务器上的 /submit_form 路径,并使用 POST 方法发送。

一旦表单数据被发送到服务器,服务器端的代码可以处理这些数据,执行相应的操作,比如将数据存储到数据库中、发送电子邮件等等。

javascript
const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; // 使用 body-parser 中间件来解析表单数据 app.use(bodyParser.urlencoded({ extended: false })); // 当接收到 POST 请求时处理表单数据 app.post('/submit_form', (req, res) => { const username = req.body.username; const password = req.body.password; const gender = req.body.gender; const hobbies = req.body.hobbies; const country = req.body.country; // 在这里可以对表单数据进行处理,比如将其存储到数据库中 // 返回一个简单的响应 res.send('表单提交成功!'); }); app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); });

在这个例子中,我们使用了 Express.js 框架来创建一个简单的服务器。当接收到 POST 请求时,我们从请求体中获取表单数据,并可以在服务器端执行任何我们需要的操作,比如存储到数据库、发送到其他服务等等。

这就是一个简单的 HTML 表单和服务器端处理的示例。