HTML表格表单及框架标签

一.表格标签

1.<table></table> 创建表格

2.<caption></caption> 表格的标题

3.<tr></tr>Table Row（表格行）

4.<td></td>Table Data（表格数据）其中有属性rowspan="2" colspan="2" 用来优化表格 合并表格

5.    <thead></thead>表格头部标签     <tbody></tbody>     <tfoot></tfoot>  将表格分成三个部分

<!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 bgcolor="#ff6347" border="1" width="80" height="200" align="center" cellspacing="0"><caption><h2>我是表格的标题</h2></caption><tr align="center" valign="top" bgcolor="red"><td rowspan="2">1</td><td colspan="2">2</td><td>3</td><td>4</td><td>5</td></tr></table>
</body>
</html>

效果展示:

二.表单

1.<form action="" method="post" enctype="multipart/form-data" > </form>,其中 action属性表示数据提交到的路径  

注意:

如果表单项中出现文件上传项那么需要两件事

        1.表单的传输方式必须为post方式

        2.更改传输编码格式 在form标签中enctype="multipart/form-data"

2.<input type="text" name="username" value="" > 文本格式

3.<input type="password" name="password" value="">密码格式

4. <input type="radio" id="nan" name="sex" value="1"> 单选框

如

5.<input type="checkbox" name="hobby[]" id="one" value="0">  多选框 

注意在设置成多选框时name后面一定要有[].这样后端才能拿到数据

6.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单标签及其属性</title>
</head>
<body><h2> 用户登入</h2>如果表单项中出现文件上传项那么需要两件事1.表单的传输方式必须为post方式2.更改传输编码格式 在form标签中enctype="multipart/form-data"<form action="" method="post" enctype="multipart/form-data" >用户名:<input type="text" name="username" value="" ><br>密码:<input type="password" name="password" value=""><br><input type="radio" id="nan" name="sex" value="1"><label for="nan">男</label><input type="radio" id="nv" name="sex" checked value="2"><label for="nv">女</label><label ><input type="radio" id="w" name="sex" value="3" >未知</label><input type="submit" value="登入"><br>爱好:<input type="checkbox" name="hobby[]" id="one" value="0"><label for="one">学习</label><input type="checkbox" name="hobby[]" value="1" checked>打球<input type="checkbox" name="hobby[]" value="2">吃<input type="checkbox" name="hobby[]" value="3">喝<input type="checkbox" name="hobby[]" value="4">乐<br><input type="file" name="" id=""><input type="hidden" name="hidde" id="hello"></form></body>
</html>

效果展示

会员表   

thead,tbody,tfoot的运用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>tbody:hover{background-color: tomato;}
</style>
</head>
<body><table border="1" width="600" align="center" cellpadding="0" cellspacing="0"><thead><tr><th>编号</th><th>用户名</th><th>年龄</th><th>性别</th><th>操作</th></tr></thead><tbody><tr align="center"><td>1</td><td>admin</td><td>18</td><td>男</td><td><a href="">删除</a><a href="">修改</a> </td></tr><tr align="center"><td>1</td><td>admin</td><td>18</td><td>男</td><td><a href="">删除</a><a href="">修改</a> </td></tr><tr align="center"><td>2</td><td>xiaohong</td><td>18</td><td>女</td><td><a href="">删除</a><a href="">修改</a> </td></tr><tr align="center"><td>3</td><td>xiaoming</td><td>19</td><td>男</td><td><a href="">删除</a><a href="">修改</a> </td></tr><tr align="center"><td>4</td><td>xiaohei</td><td>19</td><td>男</td><td><a href="">删除</a><a href="">修改</a> </td></tr></tbody><tfoot><tr><td colspan="5" align="center"><a href="">首页</a><a href="">上一页</a><a href="">下一页</a><a href="">尾页</a></td><!-- <td></td><td></td><td></td><td></td> --></tr></tfoot></table>
</body>
</html>

下拉列表

1.<select> </select> 下拉列表标签

2.<option value=""></option> 选项标签

<!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="get"><input type="text" name="" id=""><!-- <input type="image" src="../../img/img2.png" name="" id="" width="50"> --><button>提交</button><input type="submit" name="submit" id=""><button type="button">这只是一个按钮</button><input type="reset" value="重置" name="" id="">
<br>
<!-- 多行文本输入  -->地址:<textarea name="address" id="" rows="5" cols="50">  admim</textarea><!-- 下拉列表 --><select name="xueli" id=""><option value="xueli">--请选择--</option><option value="0">小学</option><option value="1">初中</option>  有value拿value没有就拿文本<option value="2">高中</option><option value="3">专科</option><option value="4" selected>本科</option><option value="5">研究生</option></select></form></body>
</html>

效果展示

h5中新增表单

请看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5中新增的表单</title>
</head>
<body><form action="" method="get"><fieldset><legend>个人基本信息</legend>姓名:<input type="text" name="name" id="">性别:<input type="radio" name="sex" value="0">女<input type="radio" name="sex" value="1">男<br>年龄:<input type="text" name="age" id="" value="">电话:<input type="text" name="phone" id=""></fieldset><br>        <fieldset><legend>基本情况</legend>身高:<input type="text" name="height" id="">体重:<input type="text" name="weight" id=""><br>三围<input type="text" name="" id=""></fieldset><select name="" id=""><option value="">--请选择--</option><optgroup label="服装"><!-- <option value="">服装</option> --><option value="">女装</option><option value="">童装</option></optgroup><optgroup label="数码"><!-- <option value="">数码</option> --><option value="">笔记本</option><option value="">台式</option><option value="">照相机</option></optgroup>
</select><br>   邮箱验证<input type="email" name="email" id="">URL验证<input type="url" name="url" id=""><input type="submit" name="submit" id="">    <br>数值<input type="number" name="num" id="" min="0" max="100">滑块<input type="range" name="range" id=""min="0" max="100" value="100"><br>搜索<input type="search" name="search" id=""><br>颜色选取<input type="color" name="color" id="">电话:<input type="tel" name="phone" id="">日期<input type="date" name="" id=""><br>时间<input type="time" name="" id=""><br>周<input type="week" name="" id=""><br>月<input type="month" name="" id=""><br><input type="datetime-local" name="" id=""></form></body>
</html>

Form表单常用属性

1.readonly只读

2.novalidate取消表单验证 适用于Form标签

3.multiple可以选择多个

4.pattern正则匹配

5.step 用于数值表单设置步长

<!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="get" novalidate> novalidate取消表单验证 适用于Form标签<input type="text" name="admin" id="" value="admin" readonly><br><input type="text" name="user1" id="" value="admin" disabled>  <br><input type="text" name="user2" id="" autofocus><br><input type="text" name="user3" id="" required placeholder="手机号/用户名/邮箱"><input type="submit" name="" id=""><br><input type="file" name="file" id="" multiple> multiple可以选择多个<br><input type="text" name="pattern" id="" pattern="[a-z]">正则匹配<br><input type="number" name="" id="" step="2"><input type="submit" name="" id=""formaction="http://www.baidu.com"formmethod="post"formenctype="multipart/form-data"value="提交"></form>
</body>
</html>

框架标签

<iframe>用来将浏览器分块

<!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>框架标签<iframe src="http://www.lmonkey.com" width="100%" frameborder="0"></iframe> 
</body>
</html>

如

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

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

相关文章

Linux操作系统——数据库

Linux操作系统——数据库

数据库 sun solaris gnu 1、分类&#xff1a; 大型 中型 小型 ORACLE MYSQL/MSSQL SQLITE DBII powdb 关系型数据库 2、名词&#xff1a; DB 数据库 select update database DBMS 数据…
阅读更多...
距离变换 Distance Transformation

距离变换 Distance Transformation

以下为该学习地址的学习笔记&#xff1a;Distance transformation in image - Python OpenCV - GeeksforGeeks 其他学习资料&#xff1a;Morphology - Distance Transform 简介 距离变换是一种用于计算图像中每个像素与最近的非零像素之间距离的技术。它通常用于图像分割和物体…
阅读更多...
51单片机5（GPIO简介）

51单片机5（GPIO简介）

一、序言&#xff1a;不论学习什么单片机&#xff0c;最简单的外设莫过于I口的高低电平的操作&#xff0c;接下来&#xff0c;我们将给大家介绍一下如何在创建好的工程模板上面&#xff0c;通过控制51单片机的GPIO来使我们的开发板上的LED来点亮。 二、51单片机GPIO介绍&#…
阅读更多...
PySide在Qt Designer中使用QTableView 显示表格数据

PySide在Qt Designer中使用QTableView 显示表格数据

在 PySide6 中&#xff0c;可以使用 Qt Model View 架构中的 QTableView 部件来显示和编辑表格数据。 1、创建ui文件 在Qt Designer中新建QMainWindow&#xff0c;命名为csvShow.ui。QMainWindow上有两个部件&#xff1a;tableview和btn_exit。 2、使用pyuic工具将ui文件转换为…
阅读更多...
Kafka（四） Consumer消费者

Kafka（四） Consumer消费者

一&#xff0c;基础知识 1&#xff0c;消费者与消费组 每个消费者都有对应的消费组&#xff0c;不同消费组之间互不影响。 Partition的消息只能被一个消费组中的一个消费者所消费&#xff0c; 但Partition也可能被再平衡分配给新的消费者。 一个Topic的不同Partition会根据分配…
阅读更多...
MySQL集群、Redis集群、RabbitMQ集群

MySQL集群、Redis集群、RabbitMQ集群

一、MySQL集群 1、集群原理 MySQL-MMM 是 Master-Master Replication Manager for MySQL&#xff08;mysql 主主复制管理器&#xff09;的简称。脚本&#xff09;。MMM 基于 MySQL Replication 做的扩展架构&#xff0c;主要用来监控 mysql 主主复制并做失败转移。其原理是将真…
阅读更多...
基于Faster R-CNN的安全帽目标检测

基于Faster R-CNN的安全帽目标检测

基于Faster R-CNN的安全帽目标检测项目通常旨在解决工作场所&#xff0c;特别是建筑工地的安全监管问题。这类项目使用计算机视觉技术&#xff0c;特别是深度学习中的Faster R-CNN算法&#xff0c;来自动检测工人是否正确佩戴了安全帽&#xff0c;从而确保遵守安全规定并减少事…
阅读更多...
实验一：图像信号的数字化

实验一：图像信号的数字化

目录 一、实验目的 二、实验原理 三、实验内容 四、源程序及结果 源程序&#xff08;python&#xff09;&#xff1a; 结果&#xff1a; 五、结果分析 一、实验目的 通过本实验了解图像的数字化过程&#xff0c;了解数字图像的数据矩阵表示法。掌握取样&#xff08;象素个…
阅读更多...
Linux 网络配置与连接

Linux 网络配置与连接

一、网络配置 1.1 ifconfig 网卡配置查询 ifconfig #查看所有启动的网络接口信息 ifconfig 指定的网卡 #查看指定网络接口信息 1.2 修改网络配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 #ens33网络配置文…
阅读更多...
【电源拓扑】反激拓扑

【电源拓扑】反激拓扑

目录 工作模式 固定频率 CCM连续电流模式 DCM不连续电流模式 可变频率 CRM电流临界模式 反激电源CRM工作模式为什么要跳频 反激电源应用场景 为什么反激电源功率做不大 电感电流爬升 反激变压器的限制条件 精通反激电源设计的关键-反激电源变压器设计 反激电源变压…
阅读更多...
MySQL 事务与锁

MySQL 事务与锁

事务ACID特性 原子性&#xff1a;事务要么同时成功&#xff0c;要么同时失败&#xff0c;事务的原子性通过undo log日志保证 一致性&#xff1a;业务代码要抛出报错&#xff0c;让数据库回滚 隔离性&#xff1a;事务并发执行时&#xff0c;他们内部操作不能互相干扰 持久性&…
阅读更多...
Python 读取esxi上所有主机的设备信息

Python 读取esxi上所有主机的设备信息

&#xff08;主要是为了统计所有虚拟机的设备名称和所属主机&#xff09; 代码&#xff1a; from pyVim import connect from pyVmomi import vim import ssldef get_vm_devices(vm):devices []try:if vm.config is not None and hasattr(vm.config, hardware) and hasattr(v…
阅读更多...
postgresql简单导出数据与手动本地恢复（小型数据库）

postgresql简单导出数据与手动本地恢复（小型数据库）

问题 需要每天手动备份postgresql。 步骤 导出数据 /opt/homebrew/opt/postgresql16/bin/pg_dump --file/Users/zhangyalin/backup_sql/<IP地址>_pg-2024_07_15_17_30_15-dump.sql --dbname<数据库名> --username<用户名> --host<IP地址> --port54…
阅读更多...
Day53:图论 岛屿数量 岛屿的最大面积

Day53:图论 岛屿数量 岛屿的最大面积

99. 岛屿数量 时间限制&#xff1a;1.000S 空间限制&#xff1a;256MB 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成&#xff0c;并且四周…
阅读更多...
低空经济持续发热，无人机培训考证就业市场及前景剖析

低空经济持续发热，无人机培训考证就业市场及前景剖析

随着科技的不断进步和社会需求的日益增长&#xff0c;低空经济已成为全球及我国经济增长的新引擎。作为低空经济的重要组成部分&#xff0c;无人机技术因其广泛的应用领域和显著的经济效益&#xff0c;受到了社会各界的广泛关注。为满足市场对无人机人才的需求&#xff0c;无人…
阅读更多...
深入剖析 Android 开源库 EventBus 的源码详解

深入剖析 Android 开源库 EventBus 的源码详解

文章目录 前言一、EventBus 简介EventBus 三要素EventBus 线程模型 二、EventBus 使用1.添加依赖2.EventBus 基本使用2.1 定义事件类2.2 注册 EventBus2.3 EventBus 发起通知 三、EventBus 源码详解1.Subscribe 注解2.注册事件订阅方法2.1 EventBus 实例2.2 EventBus 注册2.2.1…
阅读更多...
ipynb转换为pdf、Markdown（.md）

ipynb转换为pdf、Markdown（.md）

Jupyter Notebook 文件&#xff08;.ipynb&#xff09;可以转换成多种数据格式&#xff0c;以适应不同的使用场景和需求。以下是几种常见的转换格式及其简洁描述&#xff1a; HTML: Jupyter Notebook可以直接导出为静态的网页&#xff08;HTML&#xff09;格式&#xff0c;这样…
阅读更多...
记一次IP数据处理过程，文本（CSV文件）处理，IP解析

记一次IP数据处理过程，文本（CSV文件）处理，IP解析

个人博客&#xff1a;无奈何杨&#xff08;wnhyang&#xff09; 个人语雀&#xff1a;wnhyang 共享语雀&#xff1a;在线知识共享 Github&#xff1a;wnhyang - Overview 起因 突然接收到XX给的任务&#xff0c;要将一批IP数据处理一下&#xff0c;将IP对应的省市区解析出来…
阅读更多...
PHP智云物业管理平台微信小程序系统源码

PHP智云物业管理平台微信小程序系统源码

​&#x1f3e0;智云物业管理新纪元&#xff01;微信小程序&#xff0c;让家园管理更智慧&#x1f4f1; &#x1f3e1;【开篇&#xff1a;智慧生活&#xff0c;从物业开始】&#x1f3e1; 在快节奏的现代生活中&#xff0c;我们追求的不仅仅是家的温馨&#xff0c;更是生活的…
阅读更多...
基于hive数据库的泰坦尼克号幸存者数据分析

基于hive数据库的泰坦尼克号幸存者数据分析

进入 ./beeline -u jdbc:hive2://node2:10000 -n root -p 查询 SHOW TABLES; 删除 DROP TABLE IF EXISTS tidanic; 上传数据 hdfs dfs -put train.csv /user/hive/warehouse/mytrain.db/tidanic 《泰坦尼克号幸存者数据分析》 1、原始数据介绍 泰坦尼克号是当时世界上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023