javaweb02-表格、表单

这篇具有很好参考价值的文章主要介绍了javaweb02-表格、表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、表格

二、表单

一、表格

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;


 文章来源地址https://www.toymoban.com/news/detail-684507.html

#二、表单

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

##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属性,标记属性 必填


 

到了这里,关于javaweb02-表格、表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3表格和表单样式

    在传统网页中,表格主要用于网页布局,因此也成为网页编辑的主要工具;在标准化网页设计中,表格的主要功能是显示数据,也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果,如表格和表单的边框、背景等样式。 CSS为表格定义了5个专用属性,

    2024年02月06日
    浏览(36)
  • 2-web前端 音频、视频、表格、表单

    1.音频 2.视频   视频,音频通用标签:   3.有序无序列表 有序列表:olli ol内必须是li,li内没限制 无序列表:ulli ul内必须是li,li内没限制 4.表格   th---字体加粗并居中 示例:   案例:个人简历   5.表单   针对表单整理的相关问题: !-- action:行动 提交的地址 服务器地址 后台

    2024年02月08日
    浏览(88)
  • 安全基础 --- 编码(02)+ form表单实现交互

    (1)php 用php文件接收 运行结果: (2)nodejs 我们使用linux虚拟机实现交互:创建新目录,使用 npm init 创建 package.json 包 下载express库 修改package.json包 web-express目录下创建web-express.js文件 直接运行web-express.js文件 web界面运行form表单与nodejs交互 (3)python 下载Flask模块 创建 12

    2024年02月14日
    浏览(30)
  • ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

    目录 一、树形表格如何添加序号体现层级关系  二、树形表格展开收缩图标位置放置,设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下:这种方法只能校验表格的第一层,树形需要递归设置子级节点prop。 树形表格绑定如下:使用下面

    2024年02月11日
    浏览(46)
  • Vue3 element-plus表单嵌套表格实现动态表单验证

    部分效果图如下: 另表格有添加和删除按钮,点击提交进行表单验证。 首先data格式必须是对象包裹数组 给表单绑定form数据 表格绑定tableData数据 给表单项增加验证规则 rules对应data rules对象,prop对应表单字段(注意是表格里每一行对应的字段 forms.tableData[下标].key) prop的关

    2024年02月14日
    浏览(41)
  • ElementUI--数据表格增删改查与表单验证

    1.1 后台CRUD编写 1.2 配置访问路径 src/api/action.js : 1.3 前端编写(及窗口) 注1:隐藏显示设置,通过Vue实例对象中的dialogFormVisible=\\\"true|false\\\"来控制dialog显示隐藏        :visible.sync=\\\"dialogFormVisible\\\"      注2:通过close或closed事件,在关闭dialog弹出框时清空form表单数据和验证信息

    2024年02月07日
    浏览(31)
  • Vue2 Element 表格&表单 我惯用的写法

    我需要整理一下表单验证和表格, 我们的项目里大量的使用了它们, 我应该形成一个模式去套用而不是像现在这样边构思边写. 还好后端返回的数据通常规范好用, 不是一些奇形怪状的结构. 表头创建, 最少需要知道表头要写的字( label )和该表头下该列出何种数据, 大部分时候这

    2023年04月15日
    浏览(33)
  • vue2 ElementUI 表单标签、表格表头添加问号图标提示

    使用element-ui有时候需要对表格的 表头 、表单的 标签 进行自定义,添加问号的悬浮提示。 要达到的效果,如图所示: https://element.eleme.cn/#/zh-CN/component/tooltip 定义问号图标,图标上方显示tooltip提示内容 代码: 实现效果: 为什么不写content属性和里面的提示内容也能显示?

    2024年01月25日
    浏览(48)
  • JS中BOM事件,JS样式特效,表格对象和表单操作

    1.DOM中的事件可以分为两类 1.浏览器行为 如:文档加载完成,图片加载完成 2.用户行为 如:输入框输入数据,点击按钮 (2).常见的DOM事件 (3).DOM事件绑定的二种方式 1.在元素的事件属性中直接绑定 如: 2.通过元素对象的事件属性赋值(匿名函数实现) 如: 语法: 语法: 事件:

    2024年02月14日
    浏览(28)
  • ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

    在写项目时,老师通过向后端发请求获得表格原来的数据来填充修改表单里的数据。 这是表格: 这是点击修改按钮后显示出来的修改表单: 但本地里都已经有这些数据了,就没必要再发一次请求,徒增服务器压力。 准备 可是该怎么获得当前行的数据填充上去呢?答案在

    2023年04月23日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包