javaweb02-表格、表单

最新推荐文章于 2024-08-10 00:37:06 发布
最新推荐文章于 2024-08-10 00:37:06 发布
阅读量734 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： javaweb 文章标签： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/binbinxiaoz/article/details/132585544
本文详细介绍了HTML中的表格标签（table,td,th,tr,caption）的属性使用，以及表单元素（input,select,textarea）的类型、属性和示例。侧重点包括合并单元格、CSS样式和表单提交方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、表格

二、表单

一、表格

1、表格属性说明

table标签：在html中表示为表格的意思，用来定义表格整体

```

<table

</table>

```

>常见作用在表格上的属性：

border：定义表格的边框，不添加或者设置0px时没有表格分割线

width、height：定义表格的宽高

rowspan：融合行单元格，融合并不是说把其他元素的值覆盖了，而是其他元素正常会衍生排版，需要自己加减去掉因为融合导致的冲突单元格

colspan：融合列单元格

cellspacing：设置表格与表格之间的间隔距离，0px表示没有间隔

cellpadding：设置表格元素与表格之间的间隔距离

2、表格配套标签说明

>td标签：表格单元格，或者说表格内容，用来包裹元素的

th标签：表格的表头

tr标签：表示表格的行，一行里可以存在多个td

caption标签：表格的名称

td标签：表格单元格，或者说表格内容，用来包裹元素的

```

<table>

<tr>

<td>内容</td>

</tr>

</table>

```

th标签：表格的表头

```

<table>

<tr>

<th>表头</th>

</tr>

</table>

```

tr标签：表示表格的行，一行里可以存在多个td

```

<table>

<tr>

<td>内容</td>

<td>内容</td>

</tr>

</table>

```

caption标签：表格的名称

```

<table>

<caption>内容</caption>

</table>

```

3.表格实操演练

网上百度随便找了一个表格

工程代码：

```

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>表.No1133000 实操练习</title>



<style>

table {

text-align: center;

background-image: linear-gradient(#fff, #87BEE5)

}



td {

font-style: normal;

font-weight: bold;

width: 150px;

}



#left_title {

text-align: left;

}

</style>

</head>



<body>

<table border="1px" cellspacing="0px" cellpadding="10px">

<caption>表.No1133000 实操练习</caption>

<tr>

<td colspan="7">资产负债表水平分析表</td>

</tr>

<tr>

<td rowspan="2">项目</td>

<td rowspan="2">2009年</td>

<td rowspan="2">2008年</td>

<td colspan="2">变动情况</td>

<td rowspan="2">对资产影响（%）</td>

</tr>

<tr>

<td>变动额</td>

<td>变动百分比</td>

</tr>

<tr>

<td id="left_title" colspan="7">流动资产</td>

</tr>

<tr>

<td>货币资金</td>

<td>9,743 152 155.24</td>

<td>8,093,721.891.16</td>

<td>1649.430.264.08</td>

<td>20.38%</td>

<td>10.47%</td>

</tr>

<tr>

<td>应收票据</td>

<td>380760.283.20</td>

<td>170612609.00</td>

<td>210,147.674.20</td>

<td>123.17 %</td>

<td>1.33%</td>

</tr>

<tr>

<td>应收账款</td>

<td>21,386,314.28</td>

<td>34 825.094.84</td>

<td>-13 438 780.56</td>

<td>-38.59%</td>

<td>-0.09%</td>

</tr>

<tr>

<td>预付款项</td>

<td>1,912,600.00</td>

<td>18,12,1.891.16</td>

<td>23.1.264.08</td>

<td>80.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>应收利息</td>

<td>9,155.24</td>

<td>721.891.16</td>

<td>430.264.08</td>

<td>10.38%</td>

<td>0.47%</td>

</tr>

<tr>

<td>其他应收款</td>

<td>155.24</td>

<td>121.891.16</td>

<td>430.264.08</td>

<td>2.38%</td>

<td>1.47%</td>

</tr>

<tr>

<td>存货</td>

<td>9,99 155.24</td>

<td>891.16</td>

<td>430.264.08</td>

<td>66.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>一年内到期的非流动资立</td>

<td>123 155.24</td>

<td>666.891.16</td>

<td>264.08</td>

<td>12.38%</td>

<td>11.47%</td>

</tr>

<tr>

<td>流动资产合计埃烦椿唉前甸</td>

<td>9,999 999 999.99</td>

<td>9,999,999.999.99</td>

<td>999.999.999.08</td>

<td>99.99%</td>

<td>99.99%</td>

</tr>

</table>

</body>



</html>

```

>侧重点：

1.如果说存在合并单元格的情况，总数一定是不变的，即合并单元格的部分不能当成一个单元格项。

2.合并单元格的下一行内容对应上一行单元格内容的时候，合并单元格中没有内容的项，是可以省略不写的。

3.css3文本加粗写法 font-style: normal; font-weight: bold;

4.表格线性渐变 background-image: linear-gradient(#fff, #87BEE5)

5.表格内容居中text-align: center;


 

#二、表单

网页上用于采集用户手动输入的数据，常见用于用户注册、信息填报之类的。

##1、表单标签

>一共就分为三种

input：定义表单项，通过`type属性`控制文本输入形式，

select：定义下拉列表，

textarea：定义文本域

type值的属性有很多：

`1.text：默认值，单行文本输入内容`

`2.password：密码字段`

`3.radio：单选按钮`

`4.checkbox：复选框`

`5.file：文件上传按钮`

`6.date/time/datetime-local：日期/时间/日期时间`

`7.number：数字输入框 `

`8.email：邮件输入框`

`9.hidden：隐藏块，隐藏域，占位`

`10.submit/reset/button：提交按钮/重置按钮/可点击按钮`


 

##2、表单属性

>action：定义提交表单时 向何处发送数据，举例：url传参

method：规定发送表单数据的方式，get、post二选一

##3.表单演练

照着type类型全部梳理一遍，展示下对应的最终效果，书写顺序跟上面type值的顺序一致

代码如下，ui有点丑，有兴趣可以自己敲敲并且处理下css样式，此处只做属性演示

```

<!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>

<form action="" method="get">

`1.text：默认值，单行文本输入内容` <input type="text" required name="name"><br>

`2.password：密码字段` <input type="password" name="password"><br>

`3.radio：单选按钮`

<label><input type="radio" name="radio" value="1"> AAA</label>

<label><input type="radio" name="radio" value="2"> BBB</label><br>

`4.checkbox：复选框`

<label><input type="checkbox" name="checkbox">AAA</label>

<label><input type="checkbox" name="checkbox">BBB</label>

<label><input type="checkbox" name="checkbox">CCC</label><br>

`5.file：文件上传按钮`

<input type="file" name="file"><br>

`6.date/time/datetime-local：<br> 日期/时间/日期时间`<br>

<input type="date" name="date" id=""><br>

<input type="time" name="time" id=""><br>

<input type="datetime-local" name="datetime-local：日期" id=""><br>

`7.number：数字输入框 `

<input type="number" name="number" id=""><br>

`8.email：邮件输入框`

<input type="email" name="email：邮件输入框" id=""><br>

`9.hidden：隐藏块，隐藏域，占位`

<input type="hidden" name="hidden"><br>

`10.submit/reset/button： <br> 提交按钮/重置按钮/可点击按钮`<br>

<input type="submit" value="submit">

<input type="reset" value="reset">

<input type="button" value="button">

<br><br><br>

11.select -----------------定义下拉列表

<br><br>

<select name="select">

<option value="">选择</option>

<option value="a">AAA</option>

<option value="b">BBB</option>

<option value="c">CCC</option>

<option value="d">DDD</option>

</select>

<br><br>



12 .textarea----------文本域

<br><br>

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

</form>




</body>



</html>

```

>侧重点

1.label标签是作用于整个区域，如果radio或者checkbox有名称的话，不加label点击选择只能点击选择框才会生效，加了label看做一个整体，点名称也可以勾选上

2.method提交方式，submit提交表单数据的时候，如果是get直接会提交到当前页面的url中，这种提交方式是有长度限制的，常用的post

3.required属性，标记属性 必填


 

JavaWeb中的表单
qq_51592187的博客
04-04 587
Web中表单设计及其部分解析 mzt
JAVAWEB HTML 标签 表格table
chengqingshihuishui的博客
08-30 742
表格语法： table 表格；tr 行标签；th 表头标签（就多一个加粗，一般第一行使用）；td 单元格标签。 <table 【border="1" width="500" height="200" align="center" cellspacing="0"】> <!--生成了一个3*3表格--> <tr> <th 【colspan="2"】 > 表头内容 </th> <!--colspan 从此单元格起，行
javaweb 表单提交
10-15
启用session ，javaweb 表单提交 3个页面 一个有页面姓名 密码输入， 然后密码再次输入， 对的显示正确，还有就是随便输入俩个数字 实现个位数是多少
Java Web（html表格，表单，表单项）
k11582kk的博客
08-10 2650
table 标签：定义表格。tr 标签：表示表格中的一行。td 标签：表示表格中的一个数据单元格。th 标签：表示表格中的表头单元格，通常用于表头，其内容会以加粗和居中的方式显示。貌似markdown看不出设置的表格底色，并且默认居中对齐。
JAVAWeb表单
m0_64081550的博客
12-28 2045
表单. 表单的作用：主要是用来收集用户在页面输入的数据，并提交到指定的服务器 表单属性 （1）name：设置表单的名字 ， （2）action：用来设置表单数据提交的服务器地址 （3）method：用来设置表单数据提交的方式 GET & POST 默认使用GET请求，通常使用POST （4）enctype(表单数据的传输方式)： 默认值 application/x-www-form-urlencoded 表单数据传输到服务器中，通过 键值对 结构进行传输 multipart/form
Javaweb--HTML+CSS+JavaScript
weixin_51933701的博客
04-24 1054
Web标准也称为网页标准，由一系列的标准组成，大部分由W3CWorldWideWebConsortium万维网联盟）负责制定。三个组成部分：负责网页的结构（页面元素和内容）。负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。负责网页的行为（交互效果）。
JavaWeb学习-Servlet处理解析JSON文件导出Excel实例
Hana_bii的博客
09-29 1336
该篇讲解的是一个利用Servlet处理页面上传的JSON文件，对其解析后以表格形式呈现在响应页面，并可勾选相应的行下载导出excel文件。
JavaWeb-第1章-网页开发基础
12-31
"JavaWeb-第1章-网页开发基础" 本章主要讲解了网页开发基础知识，包括HTML基础、HTML标签概述、常用的HTML标签等。 1. HTML基础 HTML（HyperText Markup Language）是超文本标记语言，主要用于描述网页中的图像、...
JavaWeb-E-mall：JavaWeb的线上商城项目，使用到了Java，HTML，CSS，JavaScript等技术
02-26
【JavaWeb-E-mall项目详解】 JavaWeb-E-mall是一个基于JavaWeb技术的线上商城项目，旨在提供一个全面的电子商务平台，集成了多种技术如Java、HTML、CSS和JavaScript，以实现用户友好的界面和高效的后台功能。这个...
JavaWeb应用开发-题库.doc
最新发布
06-11
在JavaWeb应用开发领域，题库是帮助开发者巩固和测试自身技能的重要工具。题库中的题目通常覆盖了广泛的技术点，包括Java基础、HTML、面向对象编程、JSP、Servlet以及JavaBean等。以下是从题库中提炼出的一些知识点...
JAVAWEB创建User表单
12-26
写javaweb基本是必要用的一个类，我是个初学者，大家看看是什么
Java WEB开发之表单实例.rar
07-10
Java WEB开发之表单实例，实际上这是一个JSP项目的实例，主要是一个servlet的应用实例，servlet.jar已经为您打包在源码里。表单的代码是通过Java的out.println来一行一行的实现，最后生成了formdemo.htm，因此你在JSP环境下运行这个文件即可测试实例。
JAVAweb实现简单的登录注册以及表格填报功能（学生初学者水平）
07-01
这是最基本的java的登录注册功能以及登录后的表格填报功能实现，非常基础。
JavaWeb-06-表格、表单、表单项标签
yelitoudu的博客
04-04 1084
场景：在网页中主要负责数据采集功能，如：注册、登录等数据采集。场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。post：在消息体（请求体）中传递的，参数大小无限制。元素、下拉列表、文本域等。
Javaweb表格加载---DataTable
weixin_34198881的博客
02-27 244
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 使用 jQuery Datatable 构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时， jQuery Datatable 强大的功能支持：排序，分页，搜索等。 datatable引入 css : //cdn.datatable...
JavaWeb | 表单开发
m0_70720417的博客
12-03 1647
表单有如下性质: 在表单中可以输入内容,这些输入功能由控件提供,叫作表单元素。在表单中一般会有一个按钮负责提交，单击提交按钮表单元素中的内容会提交给服务器端......
JAVA操作Excel表格
面向未来
10-29 888
一、JExcelApi 可以从文件或者输入流进行读取操作。基本步骤：　　1.由文件或者输入流创建一个workbook;　　2.由workbook的getSheet()方法创建一个工作表Sheet（两种方法，下标和名字，下标从0开始）；　　3.由Sheet的getCell（x,y）方法得到某个单元格，cell对象可以读取它的类型(getType)、内容(getContents)等。读取excel表格
java web 表单控件_Javaweb Form表单查询
weixin_29145157的博客
02-13 343
1.表单(form)，是一种可以由用户输入，并提交给服务器端的一个图形界面，有如下性质：(1)表单中可以输入一些内容，这些输入功能由控件提供，叫做表单元素(2)表单中一般都有一个按钮负责提交(3)单击提交按钮，表单元素中的内容会自动提交给服务器端(4)表单元素放在之间2、表单中主要有以下几种属性：(1)action=“query.jsp”：表示提交给后台的query.jsp这个文件去处理这个请求。...
JAVA 表格
qq_44744586的博客
07-17 532
JTable 是Java.swing包下的一个类，用于显示和编辑常规二维单元表 构造方法： //表格title一维数组 String[] columnNames=new String[] {"id","name","hp","damage"}; //表格内容二维数组 String[][]heros=new String[][] {{"1","盖伦","616","100"}, {"2","提莫","512","102"}, {"3","奎因","832","200"}
javaweb表格表单居中
05-25
要使表格和表单居中，可以使用CSS样式。以下是一个简单的示例： ```html <!DOCTYPE html> 居中表格和表单 table, form { margin: 0 auto; /* 水平居中 */ } 标题1 标题2 标题3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值