前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签

news/2024/5/30 1:40:20/文章来源:https://blog.csdn.net/Tingfeng__/article/details/136596093

🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍
    

文章目录

        1.0 表格标签概述

        1.1 表格标签定义

        2.0 表单标签概述

        2.1 表单标签定义

        3.0 表单项标签概述

        3.1 表单项标签定义


        1.0 表格标签概述

        顾名思义,就是用来定义表格用的标签。在网页中以表格(行、列)形式整齐展示数据,如:班级表。

        1.1 表格标签定义

        <table>:定义表格整体,可以包裹多个 <tr> 

                        border:规定表格边框的宽度(如果没有这个属性,整体表格是不会显示边框)

                        width:规定表格的宽度(整体表格的宽度)

                        cellspacing:规定单元之间的空间(如果没有这个属性,默认单元之间是有空隙的)

        <tr>:表格的行,可以包裹多个 <td> 

        <td>:表格单元格(普通),可以包裹内容,如果是表头单元格,可以替换为 <th> 具有加粗居中的效果

代码如下:

<!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="1px" cellspacing="0px" width="300px"><tr><th>学号</th><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>01</td><td>张三</td><td>男</td><td>计科</td></tr><tr><td>02</td><td>李四</td><td>男</td><td>美术</td></tr><tr><td>03</td><td>王五</td><td>女</td><td>体育</td></tr></table>
</body>
</html>

运行结果为:

        需要注意的是:若表格中的属性没有 border 时,整体表格都不会有边框,如:

        若表格中的属性没有 cellspacing 时,单元表之间默认是有间隙的,如:

        2.0 表单标签概述

        表单标签可能我们每天都会接触到,比如账号密码的登录。在网页中主要负责数据采集功能。

表单的结构形式:

        2.1 表单标签定义

        <form>:定义表单的整体

        action:规定当提交表单时向何处发送表单数据,URL 。如果不指定,默认提交到当前页面。

        method:规定用于发送表单数据的方式,GET、POST:

                get:在 url 后面拼接表单数据,url 长度有限制,默认值。

                post:在消息体(请求体)中传递的,参数大小无限制。

代码如下:

    <form action="" method="get">表单项1表单项2...</form>

        3.0 表单项标签概述

        表单项是组成表单的基本元素

表单项的结构:

        比如性别这项,是由表单项定义而来。

        3.1 表单项标签定义

        <input>:表单项,通过 type 属性控制输入形式

type 属性:

        <select>:定义下拉列表,<option> 定义列表项

        <textarea>:文本域,cols:指定一行多少个字符;rows:指定一共多少行。

代码如下:

<!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><form action="" method="post">姓名: <input type="text" name="username"><br><br>密码: <input type="password" name="pass"><br><br>性别: <label><input type="radio" name="gender" value="1">男</label><label><input type="radio" name="gender" value="2">女</label><br><br>爱好: <label><input type="checkbox" name="hobby" value="java">java</label><label><input type="checkbox" name="hobby" value="game">game</label><label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>图像: <input type="file" name="imag"><br><br>生日: <input type="date" name="birthday"><br><br>时间: <input type="time" name="t"><br><br>日期时间: <input type="datetime-local" name="localtime"><br><br>邮箱: <input type="email" name="email"><br><br>年龄: <input type="number" name="age"><br><br>学历: <select name="gender"><option value="0">--------请选择--------</option><option value="1">--------高中--------</option><br><option value="2">--------初中--------</option><br><option value="3">--------小学--------</option><br></select><br><br>描述: <textarea name="dis" cols="30" rows="10"></textarea><br><br><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body>
</html>

运行结果为:

        填完数据之后,查看数据提交的位置

所填写的数据:

由于 method = "post" ,那么数据会在消息体中

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

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

相关文章

分享一下 iOS 发布/测试证书 申请过程

1.使用 已开通iOS开发者 的账号登陆 Apple Developer Apple Developer 2.点击下图右上角的 Account&#xff08;账户&#xff09; 点击下图中的 certificates&#xff08;证书&#xff09; 然后会挑战至下图所示页面 3.然后先要注册一个 App id 点击 register 就完成了 4.…

数字化转型导师坚鹏:基于湖北产业的科技金融创新模式与案例研究

基于湖北产业政策的科技金融创新模式与案例研究 课程背景&#xff1a; 很多银行存在以下问题&#xff1a; 不清楚科技金融有哪些利好政策&#xff1f; 不知道科技金融有哪些成功案例&#xff1f; 不知道科技金融有哪些创新模式&#xff1f; 课程特色&#xff1a; 有…

【LeetCode: 2864. 最大二进制奇数 + 模拟 + 位运算】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Android SDK 开发 云托管

开发SDK,拒绝重复造轮子。 本文陈述两种SDK开发方式&#xff0c;第一种AAR方式&#xff1b;第二种远程依赖方式。 具体步骤分为&#xff1a; 一、如何开发SDK&#xff1f; 二、如何打包AAR&#xff1f; 三、如何打包AAR&#xff1f; 四、如何进行SDK远程托管&#xff1f; 五、如…

【LeetCode热题100】21. 合并两个有序链表(链表)

一.题目要求 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 二.题目难度 简单 三.输入样例 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入…

webpack5零基础入门-6webpack处理图片资源

1.在webpack5中file-loader和url-loader为内置模块 通过在加载器中配置rule即可激活 {test: /\.(png|jpe?g|gif|webp)$/,type: asset} 2.使用webpack进行打包 执行npx webpack 可以看到图片资源打包后都被放到了dist文件目录下 3.使用webpack进行图片格式转换为base64 优势…

Vue.js+SpringBoot开发考研专业课程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

Midjourney绘图欣赏系列(九)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

Apache SeaTunnel MongoDB CDC 使用指南

随着数据驱动决策的重要性日益凸显&#xff0c;实时数据处理成为企业竞争力的关键。SeaTunnel MongoDB CDC(Change Data Capture) 源连接器的推出&#xff0c;为开发者提供了一个高效、灵活的工具&#xff0c;以实现对 MongoDB 数据库变更的实时捕获和处理。 本文将深入探讨该连…

如何使用ChatGPT辅助写论文、数据分析、AI绘图?【附学习资料】

原文链接&#xff1a;如何使用ChatGPT辅助写论文、数据分析、AI绘图&#xff1f;【附学习资料】https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247597452&idx1&sn8aa991235ffee89fc76590a90b9005d7&chksmfa823c6bcdf5b57df0cb02ecd1821921f38ea6de34c7…

【MMDetection3D实战(2)】: 利用MMDet3D预训练模型进行推理

安装完成MMDet3D环境后,我们就可以基于MMDet3D提供的预训练模型在点云和单目图像上进行推理。 下图是利用是基于预训练模型的推理结果,可以看到无论是基于点云还是图像,它都能给出一个正确的推理结果,把对应的car和motor的3D box正确的框出来。 推理的实现很简单,大体分…

【git】GitHub仓库没有 Contribution activity

解决方案 检查并更改本地的 git 绑定的邮箱和名字 git config --global user.name "Your New Name" git config --global user.email "yournewemailexample.com"查询方式 git config --global user.name git config --global user.email成功显示

【SQL】1070. 产品销售分析 III(窗口函数)

题目描述 leetcode题目&#xff1a;1070. 产品销售分析 III 方法一&#xff1a;窗口函数 select product_id, year as first_year, quantity, price from (select *,dense_rank() over(partition by product_id order by year) as rkfrom Sales ) A where A.rk 1方法二 …

IDEA开启Run Dashboard

1、Run Dashboard是什么&#xff0c;为什么要使用 Run Dashboard 是 IntelliJ IDEA 中的一个工具窗口&#xff0c;用于管理和监视项目中正在运行的应用程序和配置。它提供了一种集中管理运行和调试过程的方式&#xff0c;可以让开发人员更方便地查看和控制正在运行的应用程序。…

【Swing】Java Swing实现省市区选择编辑器

【Swing】Java Swing实现省市区选择编辑器 1.需求描述2.需求实现3.效果展示 系统&#xff1a;Win10 JDK&#xff1a;1.8.0_351 IDEA&#xff1a;2022.3.3 1.需求描述 在公司的一个 Swing 的项目上需要实现一个选择省市区的编辑器&#xff0c;这还是第一次做这种编辑器&#xf…

Midjourney新算法来袭!解决你角色形象一致性的大难题——亲测猫与女孩跨场景表现

嘿&#xff0c;朋友们&#xff0c;你们想过这个问题吗&#xff1f; 当你在制作一部电影或写一部小说时&#xff0c;你总希望同一个角色能在不同的场景和背景下出现&#xff0c;对吧&#xff1f; 但这时&#xff0c;一个难题冒出来了&#xff1a;如何确保这个角色的形象在各个…

机器学习-04-分类算法-03KNN算法

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法与knn算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…

[Unity]Mesh.uv赋值报错“Mesh.uv is out of bounds“

一、原因 顶点的数量和UV的数量不同&#xff0c;Mesh不会复制数组中数据&#xff0c;其实只是函数调用先后顺序的问题&#xff0c;类使用C的include有先后顺序。 二、解决 先赋值顶点&#xff0c;再赋值UV即可

【Vue】Request模块 - axios 封装Vuex的持久化存储

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 Request模块 - axios 封装 使用axios来请求后端接口&#xff0c;一般会对axios进行一些配置&#xff08;比如配置基础地址&#xff0c;请求响应拦截器…

掌握Java建造者模式:逐步构建复杂对象的艺术与实践

建造者模式的主要目的是将一个复杂对象的构建过程封装起来&#xff0c;使得客户端代码不需要知道对象创建的细节。这种模式特别适用于那些具有多个组成部分、创建过程复杂、对象属性多且大多数属性可选的场合。 在Java中&#xff0c;建造者模式通常涉及以下几个角色&#xff1…