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

  • <form>标签：这是表单的容器，里面包含了所有的输入元素。
  • <input>标签：用于收集用户的输入，可以有不同的类型，如文本、密码、提交按钮等。
  • <label>标签：为输入元素定义标签，提高可访问性。
  • 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 基础知识点

  • 文本框 (<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>

  2. 密码验证：

    • 对于密码，你可能需要它至少包含8个字符。你可以使用 minlength 属性来实现这一点。
    • 示例代码：<input type="password" name="password" minlength="8" required>

  3. 提交按钮：

    • 最后，添加一个提交按钮，允许用户在填写完表单后提交信息。
    • 示例代码：<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进行表单验证和动态交互。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/443229.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【01】Linux 基本操作指令

【01】Linux 基本操作指令

带⭐的为重要指令 &#x1f308; 01、ls 展示当前目录下所有文件&#x1f308; 02、pwd 显示用户当前所在路径&#x1f308; 03、cd 进入指定目录&#x1f308; 04、touch 新建文件&#x1f308; 05、tree 以树形结构展示所有文件⭐ 06、mkdir 新建目录⭐ 07、rmdir 删除目录⭐…
阅读更多...
【Java 数据结构】LinkedList与链表

【Java 数据结构】LinkedList与链表

LinkedList与链表 1. ArrayList的缺陷2. 链表2.1 链表的概念及结构2.2 链表的实现 3. LinkedList的模拟实现4.LinkedList的使用4.1 什么是LinkedList4.2LinkedList的使用 5. ArrayList和LinkedList的区别 1. ArrayList的缺陷 上节课已经熟悉了ArrayList的使用&#xff0c;并且…
阅读更多...
虚拟机扩容后黑屏卡死解决方法

虚拟机扩容后黑屏卡死解决方法

亲测有效&#xff0c;首先一般是在扩容后黑屏的&#xff0c;现象为开机后看到个横线光标不闪&#xff0c;黑屏&#xff0c;进入不了桌面。原因是硬盘已经满了&#xff0c;所以解决方法就是清理硬盘。所以首先还是要解决登录问题。 开机时按 esc 键进入 GNU GRUB&#xff0c;选择…
阅读更多...
windows平台使用tensorRT部署yolov5详细介绍，整个流程思路以及细节。

windows平台使用tensorRT部署yolov5详细介绍，整个流程思路以及细节。

目录 Windows平台上使用tensorRT部署yolov5 前言&#xff1a; 环境&#xff1a; 1.为什么要部署&#xff1f; 2.那为什么部署可以解决这个问题&#xff1f;&#xff08;基于tensorRT&#xff09; 3.怎么部署&#xff08;只讨论tensorRT&#xff09; 3.0部署的流程 3.1怎…
阅读更多...
GoLang和GoLand的安装和配置

GoLang和GoLand的安装和配置

1. GoLang 1.1 特点介绍 Go 语言保证了既能达到静态编译语言的安全和性能&#xff0c;又达到了动态语言开发维护的高效率&#xff0c;使用一个表达式来形容 Go 语言&#xff1a;Go C Python , 说明 Go 语言既有 C 静态语言程序的运行速度&#xff0c;又能达到 Python 动态语…
阅读更多...
闭包的理解？闭包使用场景

闭包的理解？闭包使用场景

说说你对闭包的理解&#xff1f;闭包使用场景 #一、是什么 一个函数和对其周围状态&#xff08;lexical environment&#xff0c;词法环境&#xff09;的引用捆绑在一起&#xff08;或者说函数被引用包围&#xff09;&#xff0c;这样的组合就是闭包&#xff08;closure&#…
阅读更多...
Vite+Vue3使用Vue-i18n笔记

Vite+Vue3使用Vue-i18n笔记

一、下载依赖 vue-i18n yarn add vue-i18n创建存放语言文件的目录 以及配置文件的配置 我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夹其中再分别新建cn.ts以及en.ts /lang/index.ts 用于导出vue-i18n需要的配置对象 import en from "./en.ts"; import…
阅读更多...
无人机在三维空间中的转动问题

无人机在三维空间中的转动问题

前提 这篇博客是对最近一个有关无人机拍摄图像项目中所学到的新知识的一个总结&#xff0c;比较杂乱&#xff0c;没有固定的写作顺序。 无人机坐标系旋转问题 上图是无人机坐标系&#xff0c;绕x轴是翻滚(Roll)&#xff0c;绕y轴是俯仰(Pitch)&#xff0c;绕z轴是偏航(Yaw)。…
阅读更多...
开发工具git分支冲突解决

开发工具git分支冲突解决

在团队协作的软件开发过程中&#xff0c;Git是一款广泛使用的版本控制系统。然而&#xff0c;当多个开发者同时修改同一文件或代码段时&#xff0c;就会产生分支冲突。解决这些冲突需要仔细的协调和技术知识。本篇博客将介绍Git分支冲突的解决方法&#xff0c;以及开发工具和最…
阅读更多...
代码随想录 Leetcode108. 将有序数组转换为二叉搜索树

代码随想录 Leetcode108. 将有序数组转换为二叉搜索树

题目&#xff1a; 代码(首刷自解 2024年1月31日&#xff09;&#xff1a; class Solution { public:TreeNode* recursion(vector<int>& nums, int left, int right) {if (left > right) return nullptr;int mid left (right-left)/2;TreeNode* node new TreeN…
阅读更多...
2024西湖论剑misc方向wp

2024西湖论剑misc方向wp

每年的misc都是最无聊坐牢的 数据安全-easy_tables import pandas as pd import hashlib from datetime import datetimeusers_df pd.read_csv(users.csv) permissions_df pd.read_csv(permissions.csv) tables_df pd.read_csv(tables.csv) actionlog_df pd.read_csv(acti…
阅读更多...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例5-5 Canvas 绘制三角形

响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例5-5 Canvas 绘制三角形

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>Canvas 绘制三角形</title> </head><body><canvas id"cavsElem">您的浏览器不支持Canvas&#xff0c;请升级浏览器</canvas…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023