HTML 表单实践

HTML 表单是网页设计中用于收集用户输入的一种重要工具。这些表单允许用户输入文本,选择选项,上传文件等。创建一个调查问卷和注册表单,包含各种类型的输入字段。

1、调查问卷

表单包括了姓名、年龄、性别、邮箱和反馈等基本字段,每个字段都简单地使用了HTML标准的输入类型来收集数据。可以根据具体的调查需求修改或增加字段。代码如下,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调查问卷</title>
</head>
<body>
    <form action="提交地址" method="post">
        <h1>调查问卷</h1>

        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" required><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>

        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br>

        <label for="feedback">反馈:</label>
        <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea><br>

        <input type="submit" value="提交">
    </form>
</body>
</html>

2、注册表单

创建一个注册表单的HTML实践可以包括多个元素,比如文本输入、密码输入、电子邮件输入、提交按钮等。代码如下,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
</head>
<body>
<form action="/submit-your-form-handler" method="POST">
    <h2>Registration Form</h2>

    <!-- 用户名 -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <br><br>

    <!-- 密码 -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <br><br>

    <!-- 电子邮件 -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br><br>

    <!-- 性别选择 -->
    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
    <br><br>

    <!-- 提交按钮 -->
    <button type="submit">Register</button>
</form>
</body>
</html>

3、学生信息统计表单

一个HTML表单来统计学生信息可以用来收集学生的各种数据,例如姓名、年龄、性别等。用于统计学生信息。表单将包含输入字段和一个提交按钮。代码如下,

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学生信息统计表格</title>
</head>
<body>
<h2>学生信息统计</h2>
<form action="/submit-your-form-handler" method="POST">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" required min="5" max="100"><br><br>

    <label for="gender">性别:</label>
    <select id="gender" name="gender">
        <option value="male"></option>
        <option value="female"></option>
        <option value="other">其他</option>
    </select><br><br>

    <label for="class">班级:</label>
    <input type="text" id="class" name="class" required><br><br>

    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required><br><br>

    <input type="submit" value="提交">
</form>
</body>
</html>

推荐阅读
cjavapy编程之路首页