4.1 表单的基础（📝🚀💬 开启沟通的大门）

欢迎来到表单制作的入门课程，这里我们将学会如何构建网页上的信息收集站。想象一下，表单就像是一家小小的邮局，用户通过它给你发送信息。嗨，让我们一起搭建这座桥梁吧！

4.1.1 表单基础知识点

<form>标签：这是表单的容器，里面包含了所有的输入元素。
<input>标签：用于收集用户的输入，可以有不同的类型，如文本、密码、提交按钮等。
<label>标签：为输入元素定义标签，提高可访问性。
action属性：定义提交表单时，数据应该发送到哪个 URL。
method属性 ：指定数据提交时使用的 HTTP 方法（通常是 get 或 post）。

4.1.2 基础示例：创建一个简单的注册表单

让我们从最基本的开始：创建一个用户注册表单。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>注册表单</title>
</head>
<body>
    <h2>加入我们的社区</h2>
    <form action="/submit_registration" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

在这个例子中，我们创建了一个包含用户名和邮箱的简单表单。用户填写信息后，点击"注册"按钮，数据就会被发送到服务器的 /submit_registration 地址。

4.1.3 案例扩展一：创建一个调查问卷

现在，让我们试着制作一个调查问卷表单，收集一些有趣的用户意见。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>调查问卷</title>
</head>
<body>
    <h2>你对网站的意见</h2>
    <form action="/submit_survey" method="post">
        <p>你喜欢我们的网站吗？</p>
        <input type="radio" id="like" name="opinion" value="like">
        <label for="like">喜欢</label><br>
        <input type="radio" id="dislike" name="opinion" value="dislike">
        <label for="dislike">不喜欢</label><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个问卷中，我们使用了单选按钮让用户选择他们对网站的看法。这个简单的交互方式可以帮助我们快速了解用户的意见。

4.1.4 案例扩展二：创建一个预订表单

接下来，让我们制作一个预订餐厅座位的表单。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>餐厅预订</title>
</head>
<body>
    <h2>预订座位</h2>
    <form action="/reserve_table" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="date">日期:</label>
        <input type="date" id="date" name="date"><br><br>
        <label for="time">时间:</label>
        <input type="time" id="time" name="time"><br><br>
        <input type="submit" value="预订">
    </form>
</body>
</html>

在这个预订表单中，我们添加了日期和时间选择器，让用户可以选择他们想要预订的具体时间。这样，用户就能轻松预订他们的晚餐了。

就这样，我们已经探索了表单的基础用法，以及一些有趣的实际应用。记住，表单是你的网页与用户之间沟通的关键，它们可以收集宝贵的信息，也可以为用户提供互动的乐趣。现在，就让我们动手制作吧！

4.2 不同类型的输入控件（🚀📝💼 挖掘更多宝藏）

欢迎来到输入控件的多彩世界！这里就像是一个神奇的宝箱，每种输入控件都是一颗独特的宝石。让我们一起来探索如何使用这些宝石，打造一份吸引人的表单。

4.2.1 基础知识点

文本框 (<input type="text">)：用于收集简短的文本输入。
密码框 (<input type="password">)：隐藏输入内容，保护用户隐私。
单选按钮 (<input type="radio">)：让用户从几个选项中选择一个。
复选框 (<input type="checkbox">)：用户可以选择多个选项。
下拉列表 (<select> 和 <option>)：节省空间的方式让用户从多个选项中选择。
文件上传 (<input type="file">)：允许用户上传文件。
提交按钮 (<input type="submit">)：提交表单数据。

4.2.2 基础示例：创建一个多功能注册表单

让我们创建一个包含多种输入控件的注册表单，好像是在为你的网站打造一个全功能的仪表盘。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>注册表单</title>
</head>
<body>
    <h2>创建账号</h2>
    <form action="/signup" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="password"><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="bio">个人简介:</label>
        <textarea id="bio" name="bio"></textarea><br><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

在这个例子中，我们使用了文本框收集用户名，密码框用于密码输入，单选按钮让用户选择性别，而 <textarea> 则提供了一个多行的文本区域供用户填写个人简介。

4.2.3 案例扩展一：创建一个调查问卷

现在，让我们创建一个包含复选框的调查问卷，让用户可以选择多个喜欢的活动。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>兴趣调查问卷</title>
</head>
<body>
    <h2>你的兴趣爱好</h2>
    <form action="/submit_interests" method="post">
        <label>选择你的兴趣:</label><br>
        <input type="checkbox" id="travel" name="interest" value="travel">
        <label for="travel">旅行</label><br>
        <input type="checkbox" id="reading" name="interest" value="reading">
        <label for="reading">阅读</label><br>
        <input type="checkbox" id="sports" name="interest" value="sports">
        <label for="sports">运动</label><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

这个问卷通过复选框提供了多选项，用户可以根据自己的兴趣选择一个或多个选项。

4.2.4 案例扩展二：创建一个文件上传表单

最后，我们来创建一个允许用户上传文件的表单，这就像是在你的网站上开设了一个小型的数据中转站。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>


</head>
<body>
    <h2>上传你的文件</h2>
    <form action="/file_upload" method="post" enctype="multipart/form-data">
        <label for="fileUpload">选择文件:</label>
        <input type="file" id="fileUpload" name="file"><br><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

在这个例子中，<input type="file"> 允许用户选择文件进行上传。注意，我们还在 <form> 标签中添加了 enctype="multipart/form-data"，这对于文件上传是必须的。

通过掌握这些不同类型的输入控件，你可以为用户提供更加丰富和互动的表单体验。现在，就让我们动手试试，看看你能创造出什么有趣的表单来！

4.3 表单验证和提交（🌟😉✅ 让你的表单像侦探一样聪明）

4.3.1 基础知识点

为什么表单验证重要：想象一下，如果你的网站是一个俱乐部，表单验证就像是站在门口的保安，确保只有合适的访客能进来。没有验证，你的网站可能会被错误信息或垃圾数据充斥。
HTML5 验证技巧 ：HTML5 提供了一些内置的验证属性，比如 required, pattern, min, max。它们就像是小巧的法术，可以轻松地添加到你的表单中，以确保数据的准确性。
客户端 vs 服务端验证：虽然客户端验证（在浏览器中进行）对用户体验很棒，但别忘了服务端验证（在服务器上进行）！它就像是你的最后一道防线，确保一切都是安全的。

4.3.2 基础案例：创建一个基本的验证表单

让我们先从一个简单的例子开始。假设你要创建一个注册表单，需要用户输入他们的电子邮箱和一个密码。

电子邮件验证：
- 你可以在电子邮件输入字段中添加 type="email" 和 required 属性。这样，浏览器就会自动检查用户是否输入了有效的电子邮件地址。
- 示例代码：<input type="email" name="email" required>
密码验证：
- 对于密码，你可能需要它至少包含8个字符。你可以使用 minlength 属性来实现这一点。
- 示例代码：<input type="password" name="password" minlength="8" required>
提交按钮：
- 最后，添加一个提交按钮，允许用户在填写完表单后提交信息。
- 示例代码：<button type="submit">注册</button>

当用户尝试提交表单时，如果他们的输入不符合你设置的规则，浏览器会显示一个小提示，告诉他们需要修正什么。

源码如下：

这个示例展示了一个基本的注册表单，要求用户输入有效的电子邮件和至少8个字符的密码。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>简单注册表单</title>
</head>
<body>
    <form action="/submit-your-form" method="post">
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required>
        <br>

        <label for="password">密码 (至少8个字符):</label>
        <input type="password" id="password" name="password" minlength="8" required>
        <br>

        <button type="submit">注册</button>
    </form>
</body>
</html>

4.3.3 案例扩展一：使用正则表达式进行复杂验证

假设你想要验证用户输入的是有效的用户名（只包含字母和数字，长度为5-10个字符）。

用户名验证 ：
- 你可以使用 pattern 属性加上一个正则表达式来实现。
- 示例代码：<input type="text" name="username" pattern="[A-Za-z0-9]{5,10}" required title="用户名应只包含字母和数字，且长度为5-10个字符。">

这个正则表达式确保了用户名只包含字母和数字，且长度符合要求。如果用户的输入不符合这个模式，浏览器会使用 title 属性中的文本来显示一条提示信息。

源码如下：

此示例包含一个要求用户输入符合特定格式（只包含字母和数字，长度为5-10个字符）的用户名的表单。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>用户名验证表单</title>
</head>
<body>
    <form action="/submit-your-form" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,10}" required title="用户名应只包含字母和数字，且长度为5-10个字符。">
        <br>

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

4.3.4 案例扩展二：创建一个动态反馈的表单

为了提升用户体验，你可以使用一些 JavaScript 来提供即时反馈（现在看不懂没关系，当了解一下即可）。

即时反馈系统 ：
- 当用户在输入框中键入内容时，你可以用 JavaScript 来检查他们的输入是否符合要求，并根据情况显示不同的消息或图标。
- 比如，当用户开始键入密码时，你可以显示一个小图标，表明密码强度是否足够。

通过这些案例，你不仅学会了如何创建基本的表单验证，还掌握了使用正则表达式和JavaScript为用户提供更好体验的技巧。现在，你的表单已经不仅仅是一个数据收集工具，它还能够与用户进行互动，提供即时的反馈和引导。这不仅让你的网站显得更专业，也使得填写表单的过程变得更加友好和愉快！

当然可以！让我们将前面提到的三个案例分别整理成完整的HTML表单示例。这些示例将展示如何在实际应用中使用表单验证。

源码如下：

这个示例演示了一个表单，它使用JavaScript来为用户提供即时反馈。这里我们将创建一个密码字段，用于展示密码强度。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>动态反馈表单</title>
    <script>
        function checkPasswordStrength() {
            var password = document.getElementById("password").value;
            var strengthBar = document.getElementById("strength");
            var strength = 0;
            if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
                strength += 1;
            }
            if (password.match(/[~<>?]+/)) {
                strength += 1;
            }
            if (password.match(/[!@#$%^&*()]+/)) {
                strength += 1;
            }
            if (password.length > 5) {
                strength += 1;
            }
            strengthBar.value = strength;
        }
    </script>
</head>
<body>
    <form action="/submit-your-form" method="post">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" onkeyup="checkPasswordStrength()" required>
        <br>
        <label for="strength">密码强度:</label>
        <progress id="strength" value="0" max="4"></progress>
        <br>

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

在这个示例中，当用户输入密码时，checkPasswordStrength()函数会根据密码的复杂性来更新进度条，从而提供实时反馈。每个案例都是独立的，并且展示了如何使用HTML和JavaScript进行表单验证和动态交互。

《HTML 简易速速上手小册》第4章：HTML 的表单与输入（2024 最新版）

4.1 表单的基础（📝🚀💬 开启沟通的大门）

4.1.1 表单基础知识点

4.1.2 基础示例：创建一个简单的注册表单

4.1.3 案例扩展一：创建一个调查问卷

4.1.4 案例扩展二：创建一个预订表单

4.2 不同类型的输入控件（🚀📝💼 挖掘更多宝藏）

4.2.1 基础知识点

4.2.2 基础示例：创建一个多功能注册表单

4.2.3 案例扩展一：创建一个调查问卷

4.2.4 案例扩展二：创建一个文件上传表单

4.3 表单验证和提交（🌟😉✅ 让你的表单像侦探一样聪明）

4.3.1 基础知识点

4.3.2 基础案例：创建一个基本的验证表单

4.3.3 案例扩展一：使用正则表达式进行复杂验证

4.3.4 案例扩展二：创建一个动态反馈的表单