javaweb02-表格、表单

本文详细介绍了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属性,标记属性 必填


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值