当前位置： 首页 > news >正文

HTML 表单笔记/练习

news 2026/4/2 2:04:23

表单

概述

表单用于收集用户信息，用户填写表单提交到服务器

  • 一般传参方式：
    • GET
    • POST
    • Cookie
  • 传参要素
    • 传参方式
      • GET
      • POST
    • 参数的名字
    • 目标页面
    • 内容的数据类型（只有在上传文件的时候）

提示信息

  • 一个表单中通常还包含一些说明性的文字，提示用户填写和操作

表单域

  • 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过表单域定义处理表单数据所提交到的 url 地址，以及数据提交到服务器的方法
  • 如果不定义表单域，则数据将无法提交给服务器

表单声明

<form action="" method=""></form>

<form> 表单属性

  • action 代表提交的地址

  • method 代表提交的方式

    • get 方法会在 url 中显示提交的内容

    • post 方法不会在 url 中显示提交的内容，而会显示在http中

  • target

    • _blank 新标签页打开提交的表单
    • _self 当前标签页打开

  • enctype

    • application/x-www-form-urlencoded 默认传参方式
    • multipart/form-data 只有在文件上传时使用

表单控件

  • 能与用户进行交互的可视化控件
  • 包含了具体的表单功能
  • 包括
    • 单行文本输入框
    • 密码输入框
    • 复选框 (点击选择)
    • 提交按钮
    • 重置按钮等

<input>输入框

<input> 属性
属性说明
type用来区分文本框的类型。
name
id		标签的唯一标识符。 用来表示当前文本框的名字。 要服务器完成完整的交互传参，此属性必不可少。
value代表表单元素控件的默认值； 如果没有此属性，需要从用户获得。
disabled代表控件禁用； disabled = “disabled”。
type 属性

默认为 type="text"

type属性描述
textinput 将会接受文本输入
password可用于一些私密性和隐私性的内容（例如：密码）
button、submit、reset实现一个按钮形式，但用于的内容不同，实质上都是实现一个按钮形式，此时可以为 input 元素设置 value 值为按钮贴上文字
radio实现单选框（注意：同一组单选框 name 属性需要相同，否则无法实现单选）
checkbox实现复选框
time时间框
week星期框
month年月框
date日期框
datetime_local本地日期和时间
search实现搜索框，从搜索框字可以看出这个值用于搜索方面的
color实现颜色选择框（例如：ps中的拾色器一样）
image实现图像按钮，将一幅图像作为按钮，点击图像任何位置都会做出响应
file有时我们需要将文件上传至服务器，使用file值将会实现此功能，但是如果只给type属性设置为file，并不能实现完整的上传操作，除需要给form元素中method属性设置为post外，还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了
number设置为此属性输入框只能输入数字
range实现数值滚动条
hidden将i元素给隐藏
email、tel、url对邮箱、电话号码、网址等数据进行把关，但是把关方面需要 正则表达式来定义（正则表达式通过pattern属性来定义）
文本输入框

  • 明文显示输入的内容

    <form action=""><input type="">
</form>
密码输入框

  • 加密显示输入的内容

    <form action=""><input type="password"><!-- 密码输入框，输入的内容无法看到 -->
</form>

    image-20231018090931364

单选框

  • type="radio"

  • 注意：同一组单选框 name 属性需要相同，否则无法实现单选

    通过 value 属性，可以为每个单选框设置不同的标识值，以便在后端处理表单数据时进行识别和处理。

    <form action="">男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女">
</form>

    image-20231018090943353

复选框

  • type="checkbox"

  • 注意：同一组复选框 name 属性需页要相同

    通过 value 属性，可以为每个单选框设置不同的标识值，以便在后端处理表单数据时进行识别和处理。

    <form action="">吃<input type="checkbox" name="love" value="吃">喝<input type="checkbox" name="love" value="喝">拉<input type="checkbox" name="love" value="拉">撒<input type="checkbox" name="love" value="撒">
</form>

    image-20231018090951674

普通按钮
<input type="button" value="按钮上显示的文字">
提交按钮

  • type="submit"

    <input type="submit">

    image-20231018090956866

重置按钮

  • type="reset"

    <input type="reset">

    image-20231018091005827

上传文件

  • type=file

    <form><input type="file" name="photo">
</form>

    image-20231018091013944

<textarea> 多行文本框

  • 录入多行数据的文本框

    <textarea name="" id="" cols="30" rows="10"></textarea>

    属性

    • name 定义控件名称，提供给服务器用

    • cols 代表每行中的字符数

    • rows 代表显示的行数

    image-20231018091023885

<label> 焦点

  • 用于通过 id 绑定一个表单元素，被绑定的表单元素就会获得输入焦点

    <label for="id">链接名</label>

    image-20231018091031225

<select>下拉菜单

  • 使用

    <select><option value="">选择1</option><option value="">选择2</option><option value="">选择3</option>
</select>

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form</title><style>label{cursor: pointer;display: inline-block;padding: 3px 6px;text-align: right;width: 150px;vertical-align: top;} </style></head><body><h1>用户注册</h1><form action="http://4399.com" method="传参方法"><label>用户名：</label><input type="text" name="username"><br><label>密码：</label><input type="password" name="password"><br><label>确认密码：</label><input type="password"><br><label>性别：</label><input type="radio" name="sex">男<input type="radio" name="sex">女<br><label>生日：</label><input type="date"><br><label>籍贯：</label><select name="省份" id=""><option value="">选择省份</option><option value="">America</option><option value="">Japan</option><option value="">Australia</option></select><br><label>用户协议：</label><textarea name="" id="" cols="30" rows="10" >免责声明：概不负责</textarea><br><label for="">头像上传：</label><input type="file"><br><label for="">操作：</label><input type="button" value="普通按钮"><input type="reset" value="重置按钮"><input type="submit" value="提交按钮" ></form></body>
</html>

在这里插入图片描述

相关文章：

HTML 表单笔记/练习

表单 概述 表单用于收集用户信息&#xff0c;用户填写表单提交到服务器 一般传参方式&#xff1a; GETPOSTCookie 传参要素 传参方式 GETPOST 参数的名字目标页面内容的数据类型&#xff08;只有在上传文件的时候&#xff09; 提示信息 一个表单中通常还包含一些说明性的文…...

编程日记 2023/10/20 8:25:03

关于Java Integer和Long使用equals直接比较

Integer和Long不能直接equals比较会返回False Long.class源码 public boolean equals(Object obj) {if (obj instanceof Long) {return this.value (Long)obj;} else {return false;} }Integer.class源码 public boolean equals(Object obj) {if (obj instanceof Integer) {…...

编程日记 2023/10/20 8:24:02

nodejs+vue衣服穿搭推荐系统-计算机毕业设计

模块包括主界面&#xff0c;系统首页、个人中心、用户管理、风格标签管理、衣服分类管理、衣服穿搭管理、服装信息管理、我的搭配管理、用户反馈、系统管理等进行相应的操作。无论是日常生活&#xff0c;还是特定场景&#xff0c;诸如面试、约会等&#xff0c;人们都有展现自我…...

编程日记 2023/10/20 8:23:01

Java并发面试题：（七）ThreadLocal原理和内存泄漏

ThreadLocal是什么&#xff1f; ThreadLocal是线程本地存储机制&#xff0c;可以将数据缓存在线程内部。ThreadLocal存储的变量在线程内共享的&#xff0c;在线程间又是隔离的。 ThreadLocal实现原理&#xff1f; ThreadLocal的底层是ThreadLocalMap&#xff0c;每个Thread都…...

编程日记 2023/10/20 8:22:00

香港服务器在国内访问太慢怎么能提高？

​　　一直以来&#xff0c;全球化业务需求的增长是跟随着蓬勃向上的互联网而发展的。有了网络&#xff0c;海外贸易就在鼠标的轻点中完成。而IDC市场中的香港服务器也因为免备案政策的特性&#xff0c;开始逐渐成为企业想要跨越地域壁垒而考虑的对象。但在使用过程中&#xff…...

编程日记 2023/10/20 8:20:59

使用Proxyman抓取Android的https请求

使用Proxyman抓取Android的https请求 有时&#xff0c;您可能需要测试您的移动应用程序并检查与其关联的所有网络请求。在网络上&#xff0c;此任务非常简单&#xff0c;只需按Ctrl Shift I打开开发人员工具即可。从那里&#xff0c;您可以导航到网络选项卡并检查与网页相关的…...

编程日记 2023/10/20 8:19:58

基础MySQL的语法练习

基础MySQL的语法练习 create table DEPT(DEPTNO int(2) not null,DNAME VARCHAR(14),LOC VARCHAR(13) );alter table DEPTadd constraint PK_DEPT primary key (DEPTNO);create table EMP (EMPNO int(4) primary key,ENAME VARCHAR(10),JOB VARCHAR(9),MGR …...

编程日记 2023/10/20 8:18:56

RAID和LVM配置指南：创建、扩容和管理RAID设备和逻辑卷的方法

文章目录 1. 简介1.1 什么是RAID和LVM1.2 RAID和LVM的作用和优势 2. RAID配置命令&#xff1a;mdadm2.1 安装mdadm2.2 创建RAID设备2.2.1 RAID 02.2.2 RAID 12.2.3 RAID 52.2.4 RAID 10 2.3 添加磁盘到RAID设备2.4 删除磁盘从RAID设备2.5 查看和管理RAID设备2.6 故障处理与恢复…...

编程日记 2023/10/20 8:17:55

MapStruct使用方法

一、用途 1.1 优势 与动态映射框架相比&#xff0c;MapStruct 具有以下优势&#xff1a; &#xff08;1&#xff09;通过使用普通方法getter、setter调用&#xff0c;而不是反射来快速执行&#xff0c;效率很高。 &#xff08;2&#xff09;编译时类型安全&#xff1a;只能映…...

编程日记 2023/10/20 8:14:52

【LeetCode】50. Pow(x, n)

1 问题 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c; x n x^n xn &#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000 示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&a…...

编程日记 2023/10/20 8:13:51

vue2技能树(2)-模板语法、vue的工具链、渐进式框架

目录 Vue2技能树Vue 2 简单的模板语法详解插值绑定属性指令v-if 和 v-elsev-forv-on 计算属性过滤器插槽 Vue 2 生态系统详解1. Vue Router2. Vuex3. Vue CLI4. Axios5. Vue Devtools6. Element UI、Vuetify、Quasar等UI框架7. Nuxt.js8. Vue Apollo、Vue Router、Vue Fire等插…...

编程日记 2023/10/20 8:12:50

【Git系列教程-目录大纲】

《Git系列教程-目录大纲》 完完全全从零开始深入学习Git&#xff0c;教程配图200张&#xff0c;其中包括包括Git基本命令、命令原理、Git底层命令、分支、分支的原理、Git代码冲突原理/解决、tag标签、Git存储状态、分支合并原理、典型合并、快进合并、同轴开发、非同轴开发、…...

编程日记 2023/10/20 8:11:49

【高等数学】导数与微分

文章目录 1、导数的概念1.1、引例1.1.1、变速直线运动瞬时速度1.1.2、曲线的切线 1.2、导数的定义1.3、证明常用导数1.4、导数的几何意义1.5、可导与连续的关系 2、函数的求导法则2.1、函数的和、差、积、商的求导法则2.2、反函数的求导法则2.3、复合函数的求导法则2.4、基本初…...

编程日记 2023/10/20 8:10:48

springboot之quartz动态可控定时任务

Quartz Quartz是一个开源的任务调度框架&#xff0c;可以用来实现定时任务的调度&#xff0c;如定时发送邮件、定时备份数据等。Quartz具有很高的可靠性和灵活性&#xff0c;支持集群部署和分布式调度&#xff0c;并且提供了丰富的API和插件&#xff0c;可以轻松实现复杂的调度…...

编程日记 2023/10/20 8:08:46

什么是CSS的外边距重叠？

区块的上下外边距有时会合并&#xff08;折叠&#xff09;为单个边距&#xff0c;其大小为两个边距中的最大值&#xff08;或如果它们相等&#xff0c;则仅为其中一个&#xff09;&#xff0c;这种行为称为外边距折叠。注意&#xff1a;有设定浮动和绝对定位的元素不会发生外边…...

编程日记 2023/10/20 8:07:45

设计模式之抽象工厂模式

前言 工厂模式一般指的是简单工厂模式、工厂方法模式、抽象工厂模式&#xff0c;这是三种工厂模式的最后一篇&#xff0c;其他两种的文章链接如下&#xff1a; 设计模式之简单工厂模式-CSDN博客 设计模式之工厂方法模式-CSDN博客 建议三种模式放在一起对比学习&#xff0c;…...

编程日记 2023/10/20 8:06:44

Compose预处理组件大比拼：性能、应用场景和可视化对比总结

在机器学习的世界里，预处理组件就像是厨师的烹饪工具。选择合适的工具不仅可以让整个烹饪过程更加顺畅，还能确保最终的菜肴更加美味。 本文将深入探讨四种“烹饪工具”：TransformedTargetRegressor、make_column_transformer、make_column_selector和ColumnTransformer。通…...

编程日记 2023/10/20 8:04:42

【小米】Linux 实习生

下午不准备去图书馆自习来着&#xff0c;中午就狠狠地多睡了一个小时&#xff0c;三点起床靠在椅子上剥柚子&#xff0c;太爽了&#xff0c;这秋天的下午。“邮件&#xff1a;小米公司邀请你预约面试时间”.......... 我擦&#xff0c;投了一个月了&#xff0c;认真准备的时候…...

编程日记 2023/10/20 8:02:40

python一点通：coroutine (协程）是什么和重要知识点？

协程已经成为Python用于编写并发和异步代码的重要工具之一。在这篇博客文章中&#xff0c;我们将深入探讨协程是什么&#xff0c;它们的优点&#xff0c;以及它们与传统的线程和进程有何不同。 什么是协程&#xff1f; 协程是用于合作式多任务处理的子程序&#xff08;或函数…...

编程日记 2023/10/20 8:01:39

QCC51XX-QCC30XX系列开发教程（实战篇) 之 12.1-空间音频相关模块的概述

查看全部教程开发请点击：全网最全-QCC51xx-QCC30xx（TWS）系列从入门到精通开发教程汇总（持续更新中） ==================================================================== 版权归作者所有，未经允许，请勿转载。 ==========================================...

编程日记 2023/10/20 8:00:38

【Python原生AOT编译终极指南】：2026年CPython 3.15+官方AOT源码级拆解与生产落地避坑清单

第一章&#xff1a;Python原生AOT编译的演进脉络与3.15官方定位Python长期以来以解释执行和字节码&#xff08;.pyc&#xff09;为默认运行范式&#xff0c;AOT&#xff08;Ahead-of-Time&#xff09;编译长期处于社区实验阶段。从Nuitka、Cython到PyO3/Rust绑定&#xff0c;再…...

编程新知 2026/4/2 1:36:13

附链小程序测评：支持Word/PDF/PPT/EXCEL/压缩包上传，解决公众号文件嵌入难题

公众号运营中&#xff0c;文件分发存在明确痛点&#xff1a;推文无法直接嵌入附件&#xff0c;第三方链接常出现跳转繁琐、广告弹窗、文件过期等问题&#xff0c;增加运营成本且影响用户体验。附链小程序为微信生态原生工具&#xff0c;核心解决上述痛点&#xff0c;支持公众号…...

编程新知 2026/4/2 1:06:01

拯救者笔记本性能优化终极指南：如何用Lenovo Legion Toolkit释放硬件潜力

拯救者笔记本性能优化终极指南&#xff1a;如何用Lenovo Legion Toolkit释放硬件潜力 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionTool…...

编程新知 2026/4/2 0:37:11

小白也能玩转AI翻译：translategemma图文翻译快速入门指南

小白也能玩转AI翻译&#xff1a;translategemma图文翻译快速入门指南 1. 认识translategemma&#xff1a;你的私人翻译助手 translategemma-12b-it是Google基于Gemma 3模型开发的开源翻译模型&#xff0c;它能同时处理文本和图片中的文字翻译。想象一下&#xff0c;你正在国外…...

编程新知 2026/4/1 22:57:44

DeOldify开发者效率提升：10分钟集成到现有Flask/Django项目中

DeOldify开发者效率提升&#xff1a;10分钟集成到现有Flask/Django项目中 1. 项目简介 你是不是遇到过这样的场景&#xff1a;客户想要一个黑白照片上色的功能&#xff0c;但你完全不懂深度学习&#xff1f;或者想要给老照片修复应用添加AI能力&#xff0c;却被复杂的模型部署…...

编程新知 2026/4/1 22:51:36

CLIP-GmP-ViT-L-14算力适配：自动检测CUDA版本并加载对应优化内核

CLIP-GmP-ViT-L-14算力适配&#xff1a;自动检测CUDA版本并加载对应优化内核 1. 引言&#xff1a;当高性能模型遇见复杂环境 如果你部署过AI模型&#xff0c;大概率遇到过这样的场景&#xff1a;好不容易把模型跑起来了&#xff0c;却发现速度慢得让人抓狂&#xff0c;或者干…...

编程新知 2026/4/1 19:41:14

KOReader 2025.04：重新定义电子墨水屏阅读

KOReader 2025.04&#xff1a;重新定义电子墨水屏阅读 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https://gitcode.co…...

编程新知 2026/4/1 18:48:50

秋招简历模板下载怎么选？6款主流简历模板工具深度测评

秋招季来临&#xff0c;对应届生来说&#xff0c;简历是踏入职场的第一块敲门砖&#xff0c;而一份贴合岗位需求、契合HR筛选思路的简历模板&#xff0c;既能降低简历制作难度&#xff0c;也是提高简历初筛通过率的关键。如今市面上的简历模板工具五花八门&#xff0c;功能定位…...

编程新知 2026/4/1 18:32:13

Redis 相关命令详解及其原理

Redis 相关命令详解及其原理 文章目录Redis 相关命令详解及其原理1. Redis 简介2. Redis 安装2.1 包管理器安装2.2 源码编译安装2.4 验证安装3. Redis 基础原理3.1 单线程模型3.2 底层数据结构概述4. 数据类型详解4.1 String&#xff08;字符串&#xff09;底层存储结构常用命令…...

编程新知 2026/4/1 17:57:44

Flutter状态管理实战：ChangeNotifier与Provider的完美搭配（附完整代码）

Flutter状态管理实战&#xff1a;ChangeNotifier与Provider的完美搭配 在Flutter开发中&#xff0c;状态管理一直是构建复杂应用的核心挑战。当UI需要根据数据变化动态更新时&#xff0c;如何高效、优雅地管理状态流转&#xff0c;直接决定了应用的性能和可维护性。本文将深入…...

编程新知 2026/4/1 17:24:51