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

HTML表格、表单标签

news 2025/10/24 8:09:43

目录

一、表格

（1）关于表格中标签说明

（2）关于表格中属性说明

（3）简单操作演示

（4）表格小结

二、表单

（1）简单操作演示

（2）注意事项 

（3）表单小结

一、表格

  • 场景：在网页中以表格(行、列）形式直观、整齐展示数据。开发一些管理类的系统时，经常会使用表格来看起来更加的直观，如：班级表、课程表、学生表、成绩表等等。
  • 标签：
（1）关于表格中标签说明
  • 在整个表格的外层定义一个标签<table>。
  • 其中每个表格中有很多的行，一个<tr>就代表一行。
  • 然后在表格中每行当中都会有很多单元格，则每个单元格都会通过标签<td>来定义。
  • 注意：如果是一个表头定义的单元格——>用标签<th>来代替。（这个标签所带来的表头单元格的效果具有"字体加粗、居中展示"。也就是普通单元格用标签<td>就可以了）
（2）关于表格中属性说明
  • border：指定表格边框的宽度的，默认表格是没有边框的。
  • width：指定表格整体的宽度
  • cellspacing：指定每个单元格之间的空间。
（3）简单操作演示
  • 基础代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="2px" cellspacing="0" width=" 500px"><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>所属学校</th></tr><tr><td>001</td><td>张三</td><td>男</td><td>18</td><td>长沙中学</td></tr><tr><td>002</td><td>老六</td><td>女</td><td>22</td><td>怀化学院</td></tr></table>
</body></html>
  • 运行效果图

  • 如果没有设置各个单元格之间的间隙为0，则：

注：

1、如果想让每个单元格之间没有间隙，就给标签<table>添加一个属性：cellspacing="0"。

2、可以给整个表格中设置一个总体的宽度：width。

3、对于整个表格的边框可以设置属性：border。

（4）表格小结
  • <table>标签定义表格。
  • <tr>标签定义表格中的行，一个<tr>表示一行
  • <th>标签——>表头单元格（加粗+居中）
  • <td>标签——>普通单元格

二、表单

  • 场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。即点击提交，将表单中所采集到的数据发送到服务端，服务端将数据保存起来。这些数据一般会存放到数据库当中。
  • 表单标签：<form>
  • 表单项：不同类型的 input 元素、下拉列表、文本域等。

1、<input>：定义表单项，通过 type 属性控制输入形式。其中还有另外一个属性name是必须的。因为表单项要成功的采集数据并提交，一定要有这个属性。name属性就是表单项的名字，如用户名表单项 ——> name="username"

2、<select>：定义下拉列表

3、<textares>：定义文本域

  • 属性：

1、action：规定当提交表单时向何处发送表单数据，URL（指定当前表单数据所提交的URL地址）

2、method：规定用于发送表单数据的方式。GET、POST（当前表单以何种方式进行提交）

（1）简单操作演示
  • 基础代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-标签</title>
</head><body><form action="" method="get">用户名：<input type="text" name="username">年龄：<input type="text" name="age"><input type="submit" value="提交"></form>
</body></html>
  • 效果图 

（2）注意事项 
  • action：表单提交的url，指定往何处提交数据。如果不指定，默认提交到当前的页面。
  • method：表单提交的方式
  • get：像上方的例子我的提交方式：用到 "get" 的方式来请求。就会在url后面拼接表单的数据。具体提交形式如下：?username=Tony&age=18。而url的长度是有限制的，所以这个对于比较大的表单是没法操作的。且 "get" 是属性method的默认值。(即默认提交方式)

  • post：与"get"不一样，它是在消息体（请求体）中传递的，且参数的大小无限制的。

演示（我将上面的"get"改成"post"）

1、按F12打开浏览器开发者界面，找到网络这一块。当点击提交，就会发起一个网络请求。

2、可以看到请求方式：post。

3、也可以看到当前提交的表单的数据。

4、其中 "username=Tom&age=33" 这一部分叫做消息体或者叫请求体。

（3）表单小结
  • 表单标签：<form>
  • 表单属性：action：表单数据提交的url地址。method：表单提交的方式。
  • get：表单数据拼接在url后面。如：?username=java，大小有限制。post：表单数据在请求体中携带，大小没有限制。

注意：表单项必须有name属性才可以提交。否则表单项内所输入的数据是无法提交的。

相关文章：

HTML表格、表单标签

目录 一、表格 &#xff08;1&#xff09;关于表格中标签说明 &#xff08;2&#xff09;关于表格中属性说明 &#xff08;3&#xff09;简单操作演示 &#xff08;4&#xff09;表格小结 二、表单 &#xff08;1&#xff09;简单操作演示 &#xff08;2&#xff09;注…...

编程日记 2024/7/15 12:30:40

（Windows环境）FFMPEG编译，包含编译x264以及x265

本文使用 MSYS2 来编译 ffmpeg 一、安装MSYS2 MSYS2 是 Windows 下的一组编译套件&#xff0c;它可以在 Windows 系统中模拟 Linux 下的编译环境&#xff0c;如使用 shell 运行命令、使用 pacman 安装软件包、使用 gcc (MinGW) 编译代码等。 MSYS2 的安装也非常省心&#x…...

编程日记 2024/7/15 12:29:39

notepad++中文出现异体汉字，怎么改正

notepad显示异体字&#xff0c;如何恢复&#xff1f; 比如 “门” 和 “直接” 的"直"字&#xff0c;显示成了 方法 修改字体&#xff0c; 菜单栏选择 Settings(设置&#xff09;&#xff0c;Style Configurator…&#xff08;语言格式设置…&#xff09;&#xf…...

编程日记 2024/7/15 12:28:38

EasyAnimate-v3版本支持I2V及超长视频生成

阿里云人工智能平台&#xff08;PAI&#xff09;自研开源的视频生成项目EasyAnimate正式发布v3版本&#xff1a; 支持 图片&#xff08;可配合文字&#xff09; 生成视频 支持 上传两张图片作为起止画面 生成视频 最大支持720p&#xff08;960*960分辨率&#xff09; 144帧视…...

编程日记 2024/7/15 12:26:36

最新PHP自助商城源码,彩虹商城源码

演示效果图 后台效果图 运行环境&#xff1a; Nginx 1.22.1 Mysql5.7 PHP7.4 直接访问域名即可安装 彩虹自助下单系统二次开发 拥有供货商系统 多余模板删除 保留一套商城,两套发卡 源码无后门隐患 已知存在的BUG修复 彩虹商城源码&#xff1a;下载 密码:chsc 免责声明&…...

编程日记 2024/7/15 12:22:32

Vue2打包部署后动态修改后端接口地址的解决方法

文章目录 前言一、背景二、解决方法1.在public文件夹下创建config文件夹&#xff0c;并创建config.js文件2.编写config.js内容3.在index.html中加载config.js4.在封装axios工具类的js中修改配置 总结 前言 本篇文章将介绍使用Vue2开发前后端分离项目时&#xff0c;前端打包部署…...

编程日记 2024/7/15 12:18:26

【后端开发实习】用MongoDB实现仓库管理的出库入库实战

用MongoDB实现仓库管理的出库入库 MongoDB什么是MongoDBMongoDB安装以及开始运行配置启动以及mongoshmongodb的基础使用命令启动和使用MongoDB服务数据库操作集合操作文档操作 项目部署在数据库中创建一张商品信息表提供信息表的增删改查操作接口 MongoDB 什么是MongoDB Mong…...

编程日记 2024/7/15 12:15:23

内网信息收集——用户凭据窃取

文章目录 一、获取域内单机密码和hash1.1 在线读取lsass进程内存1.2 离线读取lsass.exe进程内存1.3 在线读取本地SAM文件1.4 离线读取本地SAM文件 二、域hash获取三、windows凭据导出 一、获取域内单机密码和hash 在windows中&#xff0c;SAM文件是windows用户的账户数据库&am…...

编程日记 2024/7/15 12:13:20

组串式逆变器散热分析

1 引言 组串式逆变器散热方式主要有强制风冷和自然冷却两种&#xff0c;针对两种散热方式的实际效果&#xff0c;笔者抽取了不同厂家不同散热方式的两款组串式逆变器进行实验对比&#xff0c;发现在同样的环境温度下&#xff0c;强制风冷的逆变器内部环境温度及核心器件温升比…...

编程日记 2024/7/15 12:12:19

WEB07Vue+Ajax

1. Vue概述 Vue&#xff08;读音 /vjuː/, 类似于 view&#xff09;&#xff0c;是一款用于构建用户界面的渐进式的JavaScript框架&#xff08;官方网站&#xff1a;https://cn.vuejs.org&#xff09;。 在上面的这句话中呢&#xff0c;出现了三个词&#xff0c;分别是&#x…...

编程日记 2024/7/15 12:11:18

uniapp打包成Android时,使用uni.chooseLocation在App端显示的地址列表是空白？一直转圈的解决办法

问题描述&#xff1a; uniapp打包后的测试版app在ios里可以显示高德地图的定位列表&#xff0c;但是安卓手机却不显示定位列表&#xff0c;一直在转圈圈&#xff0c;怎么回事&#xff1f;之前的功能在正式版都能用&#xff0c;真机运行也能用&#xff0c;为什么测试版的安卓手…...

编程日记 2024/7/15 12:01:06

删除矩阵中0所在行 matlab

%for验证 new[]; for i1:size(old,1)if old(i,4)~0 %assume 0所在列在第4列new(end1,:)old(i,:);end enda(a(:,2)0,:)[]参考&#xff1a; 两种方式...

编程日记 2024/7/15 12:00:04

JavaWeb---HTML

一 HTML入门 1.1 HTML&CSS&JavaScript的作用 HTML 主要用于网页主体结构的搭建 CSS 主要用于页面元素美化 JavaScript 主要用于页面元素的动态处理 1.2 什么是HTML HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构&#xff0c…...

编程日记 2024/7/15 11:57:00

Apache Doris：下一代实时数据仓库

Apache Doris&#xff1a;下一代实时数据仓库 概念架构设计快速的原因——其性能的架构设计、特性和机制基于成本的优化器面向列的数据库的快速点查询数据摄取数据更新服务可用性和数据可靠性跨集群复制多租户管理便于使用半结构化数据分析据仓一体分层存储 词条诞生技术概述适…...

编程日记 2024/7/15 11:56:00

t-SNE降维可视化并生成excel文件使用其他画图软件美化

t-sne t-SNE&#xff08;t-分布随机邻域嵌入&#xff0c;t-distributed Stochastic Neighbor Embedding&#xff09;是由 Laurens van der Maaten 和 Geoffrey Hinton 于 2008 年提出的一种非线性降维技术。它特别适合用于高维数据的可视化。t-SNE 的主要目标是将高维数据映射…...

编程日记 2024/7/15 11:54:58

End-to-End Object Detection with Transformers【方法详细解读】

摘要 我们提出了一种新的方法，将目标检测视为一个直接的集合预测问题。我们的方法简化了检测流程，有效地消除了许多手工设计的组件，如非极大值抑制程序或锚生成，这些组件显式编码了我们关于任务的先验知识。新框架的主要成分，称为DEtection TRansformer或DETR，是一个基于…...

编程日记 2024/7/15 11:53:57

SQLite数据库与ROOM数据库

目录 1、SQLite数据库 目的&#xff1a; 基本操作&#xff1a; 缺点&#xff1a; 解决&#xff1a; 2、ROOM持久性库 目的&#xff1a; 优点&#xff1a; 导入依赖&#xff1a; 主要组件&#xff1a; ​编辑 使用步骤: a.定义数据实体 b.定义数据访问对象&#xff08;接…...

编程日记 2024/7/15 11:50:53

vue实现动态图片(gif)

目录 1. 背景 2. 分析 3. 代码实现 1. 背景 最近在项目中发现一个有意思的小需求&#xff0c;鼠标移入一个盒子里&#xff0c;然后盒子里的图就开始动起来&#xff0c;就像一个gif一样&#xff0c;然后鼠标移出&#xff0c;再按照原来的变化变回去&#xff0c;就像变形金刚…...

编程日记 2024/7/15 11:49:52

win11系统设置允许无密码远程桌面连接

在windows11系统中设置允许无密码远程桌面连接&#xff0c;可以通过以下步骤进行操作&#xff1a; 1、启用远程桌面功能&#xff1a;‌首先&#xff0c;‌确保您的Windows 11是专业版&#xff0c;‌因为家庭版默认不支持远程桌面功能。‌您可以通过“设置” -> “系统” -&…...

编程日记 2024/7/15 11:47:50

使用 PyAMF / Django 实现 Flex 类映射

1、问题背景 PyAMF 是一个用于在 Flex 和 Python 之间进行通信的库&#xff0c;在使用 PyAMF 与 Flex 应用进行通信时&#xff0c;经常会遇到错误。例如&#xff0c;在发送一个 Flex Investor 对象到 Python 时&#xff0c;会得到一个 ‘KeyError: first_name’ 的错误。这是因…...

编程日记 2024/7/15 11:45:47

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/10/19 16:13:07

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/10/18 14:37:23

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/10/23 2:25:58

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/10/23 8:31:11

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/10/16 10:48:29

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/10/18 0:46:47