《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 案例扩展二：创建一个动态反馈的表单
4.1 表单的基础（ 开启沟通的大门）
欢迎来到表单制作的入门课程，这里我们将学会如何构建网页上的信息收集站。想象一下，表单就像是一家小小的邮局，用户通过它给你发送信息。嗨，让我们一起搭建这座桥梁吧！
4.1.1 表单基础知识点
标签：这是表单的容器，里面包含了所有的输入元素。标签：用于收集用户的输入，可以有不同的类型，如文本、密码、提交按钮等。标签：为输入元素定义标签，提高可访问性。action属性：定义提交表单时，数据应该发送到哪个 URL。method属性：指定数据提交时使用的 HTTP 方法（通常是get或post）。
4.1.2 基础示例：创建一个简单的注册表单
让我们从最基本的开始：创建一个用户注册表单。
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 案例扩展一：创建一个调查问卷
现在，让我们试着制作一个调查问卷表单，收集一些有趣的用户意见。
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 案例扩展二：创建一个预订表单
接下来，让我们制作一个预订餐厅座位的表单。
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 基础知识点
- 文本框 (
)：用于收集简短的文本输入。 - 密码框 (
)：隐藏输入内容，保护用户隐私。 - 单选按钮 (
)：让用户从几个选项中选择一个。 - 复选框 (
)：用户可以选择多个选项。 - 下拉列表 (
和)：节省空间的方式让用户从多个选项中选择。 - 文件上传 (
)：允许用户上传文件。 - 提交按钮 (
)：提交表单数据。
4.2.2 基础示例：创建一个多功能注册表单
让我们创建一个包含多种输入控件的注册表单，好像是在为你的网站打造一个全功能的仪表盘。
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>
在这个例子中，我们使用了文本框收集用户名，密码框用于密码输入，单选按钮让用户选择性别，而