《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)

简介: 《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)

af1c3b40f97059675b294b5329c7d99.png

4.1 表单的基础(📝🚀💬 开启沟通的大门)

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

4.1.1 表单基础知识点

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

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 基础知识点

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

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>

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

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

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

<!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 案例扩展二:创建一个文件上传表单

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

<!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 基础案例:创建一个基本的验证表单

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

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

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

源码如下:

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

<!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个字符)。

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

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

源码如下:

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

<!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 来提供即时反馈(现在看不懂没关系,当了解一下即可)。

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

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

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

源码如下:

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

<!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进行表单验证和动态交互。

目录
相关文章
|
6天前
HTML_表单标签
HTML_表单标签
17 0
|
6天前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
|
6天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
6天前
|
移动开发 搜索推荐 前端开发
《HTML 简易速速上手小册》第10章:HTML 的维护与优化(2024 最新版)
《HTML 简易速速上手小册》第10章:HTML 的维护与优化(2024 最新版)
27 0
|
6天前
|
存储 移动开发 API
《HTML 简易速速上手小册》第9章:HTML5 新特性(2024 最新版)
《HTML 简易速速上手小册》第9章:HTML5 新特性(2024 最新版)
11 0
|
6天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
34 0
|
6天前
|
移动开发 定位技术 UED
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
43 0
|
6天前
|
前端开发 搜索推荐 UED
《HTML 简易速速上手小册》第6章:HTML 语义与结构(2024 最新版)
《HTML 简易速速上手小册》第6章:HTML 语义与结构(2024 最新版)
22 0
|
6天前
|
前端开发 UED C++
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
41 0
|
6天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码