显示表单数据

介绍

在Web开发中，表单是非常常见的交互方式，用户通过填写表单中的字段来提交数据。而我们作为程序员需要接收并处理这些表单数据。在本文中，我将向你介绍如何从表单中获取用户输入的数据并将其显示在页面上。

步骤

1. HTML表单

首先，我们需要在HTML中编写一个表单，例如：

<form method="POST" action="/submit">
  <label>姓名：</label>
  <input type="text" name="name"><br>
  <label>年龄：</label>
  <input type="text" name="age"><br>
  <label>性别：</label>
  <input type="radio" name="gender" value="男">男
  <input type="radio" name="gender" value="女">女<br>
  <input type="submit" value="提交">
</form>

这是一个简单的表单，包含姓名、年龄和性别三个字段。注意：我们使用了POST方法提交表单，并将表单数据提交到了/submit路径。

2. 服务器端代码

在服务器端使用相应的编程语言处理此次表单提交：

Node.js

const express = require('express')
const app = express()

app.post('/submit', (req, res) => {
  const name = req.body.name
  const age = req.body.age
  const gender = req.body.gender
  
  res.send(`
    <h1>用户信息</h1>
    <p>姓名：${name}</p>
    <p>年龄：${age}</p>
    <p>性别：${gender}</p>
  `)
})

app.listen(3000, () => console.log('服务器已启动...'))

PHP

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = $_POST['name'];
  $age = $_POST['age'];
  $gender = $_POST['gender'];

  echo "
    <h1>用户信息</h1>
    <p>姓名：{$name}</p>
    <p>年龄：{$age}</p>
    <p>性别：{$gender}</p>
  ";
}
?>

3. 显示表单数据

以上代码中，我们已经获取到了用户提交的表单数据，但是我们还需要将这些数据显示在页面上。在Node.js与PHP中，我们都可以使用字符串模板来轻松实现：

# 用户信息

姓名：${name}

年龄：${age}

性别：${gender}

只需将模板中的${name}、${age}、${gender}替换为相应的表单数据即可。

结论

至此，我们已经学会了如何从HTML表单中获取用户输入的数据，并将其显示在页面上。通过这种方式，我们可以让用户更加直观地了解他/她所提交的数据，提高交互的友好度。