《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 方法(通常是 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>
  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进行表单验证和动态交互。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Gson源码解读

一&#xff0c;概述 gson作为流行的json工具&#xff0c;笔者使用较多。本文主要目的是解读下Gson的源码实现&#xff0c;就没有然后了。 二&#xff0c;实例 实例如下图所示&#xff0c;笔者简单调用gson的toJson方法获得json字符串&#xff0c;fromJson则从json字符串解析…

最新2024如何解决谷歌浏览器Chrome谷歌翻译无法使用问题

快速恢复谷歌浏览器一键翻译功能在Chrome 中安装好【翻译】插件 Macbook 操作步骤&#xff1a; 1点击“前往”&#xff0c;打开“前往文件夹” 2 在对话框中输入“/etc” 囝找到“hosts”文件&#xff0c;复制粘贴到桌面 3 在复制的文件最后新起一行&#xff0c;输入并保存&am…

【CSS + ElementUI】el-tree下拉扩展图标置于右侧

效果图 代码实现 <template><div class"search_resource"><el-tree class"filter-tree" ref"tree" default-expand-all :data"directoryList" :props"defaultProps"icon-class"el-icon-arrow-right…

飞凌嵌入式RK3568开发板蓝牙收、发文件测试

本文由电子发烧友论坛用户fsdzdzy提供&#xff0c;感谢分享。飞凌嵌入式每月定期开展新的开发板体验活动&#xff0c;欢迎更多工程师朋友的关注和参与。 飞凌嵌入式OK3568-C开发板板载WiFi&BT模组&#xff0c;蓝牙版本为Bluetooth 5.0&#xff0c;速率高达3Mbps。笔者将在本…

MySQL之谈谈MySQL里的日志

文章目录 前言一、SQL是如何做更新操作的二、MySQL中的redo log三、MySQL中的binlog四、聊聊两阶段提交总结 前言 上一章我们讲了一条SQL是如何做查询的&#xff0c;其中经历了许多步骤。这次来讲讲一条SQL是如何做更新操作的。 常有大佬说他可以把MySQL恢复到半个月内任意一秒…

2024年美赛B题:寻找潜水器 Searching for Submersibles 思路模型代码解析

2024年美赛B题&#xff1a;寻找潜水器 Searching for Submersibles 思路模型代码解析 【点击最下方群名片&#xff0c;加入群聊&#xff0c;获取更多思路与代码哦~】 问题翻译 海上游轮迷你潜艇&#xff08;MCMS&#xff09;是一家位于希腊的公司&#xff0c;专门制造能够将人…

jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理&#xff1a; 当鼠标移入某个星星&#xff0c;前面的星星都会被点亮&#xff1b;当鼠标移出&#xff0c;星星将会变暗&#xff0c;单击某个星星后&#xff0c;即可完成评论&#xff0c;此时鼠标移出后&#xff0c;被单击星星前面的星星都会被点亮&#xff0c;后面…

GmSSL - GmSSL的编译、安装和命令行基本指令

文章目录 Pre下载源代码(zip)编译与安装SM4加密解密SM3摘要SM2签名及验签SM2加密及解密生成SM2根证书rootcakey.pem及CA证书cakey.pem使用CA证书签发签名证书和加密证书将签名证书和ca证书合并为服务端证书certs.pem&#xff0c;并验证查看证书内容&#xff1a; Pre Java - 一…

在Mixamo网站上,下载的模型导入unity后没有材质怎么解决

在Mixamo网站上&#xff0c;下载的模型导入unity后没有材质 1.导入的模型没有材质2.解决方法3.提取后就有材质了 1.导入的模型没有材质 2.解决方法 选中导入的模型 > 选择提取纹理>选择你要提取到的文件夹(默认是当前文件夹)>点击 fix now 3.提取后就有材质了

力扣hot100 最小路径和 多维DP 滚动数组 一题多解

Problem: 64. 最小路径和 文章目录 思路&#x1f496; 朴素版&#x1f496; 空间优化版 思路 &#x1f468;‍&#x1f3eb; 路飞 &#x1f496; 朴素版 ⏰ 时间复杂度: O ( n m ) O(nm) O(nm) &#x1f30e; 空间复杂度: O ( n m ) O(nm) O(nm) class Solution {public …

026-安全开发-PHP应用模版引用Smarty渲染MVC模型数据联动RCE安全

026-安全开发-PHP应用&模版引用&Smarty渲染&MVC模型&数据联动&RCE安全 #知识点&#xff1a; 1、PHP新闻显示-数据库操作读取显示 2、PHP模版引用-自写模版&Smarty渲染 3、PHP模版安全-RCE代码执行&三方漏洞 演示案例&#xff1a; ➢新闻列表&…

linux麒麟系统安装mongodb7.0

1.mogedb下载 下载的是他tar包 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz wget -o https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz 也可以下载rpm包 2.将包上传至服务器并解压 #进入目录 并解压 cd /opt/ tar …

动网格-网格重构之弹性光顺局部重构法(四)

弹性光顺法的基本特点 弹性光顺法中&#xff0c;网格线类似于弹簧&#xff0c;两端节点(node)作弹性移动 弹性光顺法有如下特点。 (1)节点的数量和节点之间的连接关系均不变&#xff0c;即节点之间的连接属性不变。 (2)单独使用时&#xff0c;仅限于变形非常小的情况&#xff…

常用API2---system

是一个工具类&#xff0c;提供了一些与系统相关的方法. 常用方法&#xff1a; package MyApi.a02Systemdemo;public class SystemDem01 {public static void main(String[] args) {//方法形参://状态码&#xff1a;//0 表示当前虚拟机是正常停止//非0&#xff1a;1表示当前虚拟…

TRUNCATE TABLE和DELETE FROM对比

相同点:用于删除数据,同时保留表结构. 不同点: TRUNCATE比DELETE更快(数据量小可能体现不出来,单数据量大就很明显了) 原因:TRUNCATE是DDL(数据定义语言)DELETE是逐行删除属于(DML) TRUNCATE 不会产生大量日志,但DELETE删除会产生大量日志 DELETE FROM 可以加WHERE子句指定…

(已解决)spingboot项目如何做QQ邮箱注册功能,如何在邮箱注册中进行随机数添加作为动态验证码,并满足分层解耦

前面我们已经完成了发送静态验证码&#xff0c;现在用随机数作为动态验证码。 文章地址&#xff1a;spingboot 后端发送QQ邮箱验证码 使用注解Component进行分层解耦加入ioc容器&#xff0c;方便调用。 package com.example.tianyidemo.utils; import org.springframework.st…

新媒体与传媒行业数据分析实践:从网络爬虫到文本挖掘的综合应用,以“中国文化“为主题

大家好&#xff0c;我是八块腹肌的小胖&#xff0c; 下面将围绕微博“中国文化”以数据分析、数据处理、建模及可视化等操作 目录 1、数据获取 2、数据处理 3、词频统计及词云展示 4、文本聚类分析 5、文本情感倾向性分析 6、情感倾向演化分析 7、总结 1、数据获取 本…

AI算力专题:华为算力分拆:全球AI算力的第二极

今天分享的是AI算力系列深度研究报告&#xff1a;《AI算力专题&#xff1a;华为算力分拆&#xff1a;全球AI算力的第二极》。 &#xff08;报告出品方&#xff1a;华西计算机团队&#xff09; 报告共计&#xff1a;53页 全球龙头英伟达业绩持续高度景气&#xff0c;印证全球A…

字符串的简单处理

第1题 ISBN号码 查看测评数据信息 每一本正式出版的图书都有一个ISBN号码与之对应&#xff0c;ISBN码包括9位数字、1位识别码和3位分隔符&#xff0c;其规定格式如“x-xxx-xxxxx-x”&#xff0c;其中符号“-”就是分隔符&#xff08;键盘上的减号&#xff09;&#xff0c;最…

[css] 让文字进行竖着 分散对齐

.demo2 {width: 60px;background-color: aqua;height: 200px;display: grid;place-items: center;}参考&#xff1a; css 让文字进行竖着书写&#xff0c; 附带个小知识&#xff0c;行内块元素添加文字之后底部对不齐的问题