JavaWeb——HTML基础标签table标签与form标签的学习与理解

最新推荐文章于 2024-04-22 11:43:36 发布
最新推荐文章于 2024-04-22 11:43:36 发布
阅读量1.3k 收藏 4
点赞数 3
分类专栏： JavaWeb 文章标签： html web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44025396/article/details/105928677
版权

使用表格标签制作规整的表格

table标签是表格标签，
border属性设置表格的边框厚度，
width属性设置表格的宽度，
align设置表格的对齐方式，
cellspacing设置单元格的间距
tr是行标签，
td是单元格标签，
th是字体居中加粗的单元格标签,
b是字体加粗标签
下面制作一个3*3的表格，放置在页面中心，边框厚度为2，宽度为500，单元格内没有间距，并每一行使用不同的效果

<h4>规整的表格</h4>
<!--table标签是表格标签，border属性设置表格的边框厚度，
    width属性设置表格的宽度，align设置表格的对齐方式，cellspacing设置单元格的间距
    tr是行标签，td是单元格标签，th是字体居中加粗的单元格标签,b是字体加粗标签-->
<table align="center" border="2" width="500"  cellspacing="0">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <th>2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <td><b>3.1</b></td>
        <td><b>3.2</b></td>
        <td><b>3.3</b></td>
    </tr>
</table>

截图
在这里插入图片描述

使用表格标签制作不规整的表格

colspan属性可以横向拓展，rowspan属性可以竖向拓展
可以使用这两个属性来使表格变得不规整。如：

<h4>不规整的表格</h4>
<!--colspan属性可以横向拓展，rowspan属性可以竖向拓展-->
<table align="center" border="2" width="500"  cellspacing="0">
    <tr>
        <td colspan="3">1.1</td>
    </tr>
    <tr>
        <th rowspan="2">2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <td><b>3.2</b></td>
        <td><b>3.3</b></td>
    </tr>
</table>

截图
在这里插入图片描述

表单标签的样式

input是输入标签，可以通过type选择其输入的类型：text是文本框，password是密码框，radio是单选框，checkbox是复选框，reset是重置按钮，submit是提交按钮，button是按钮，file是文件上传，hidden是隐藏域；value属性可以设置默认显示的内容。对于选择框checked属性可以默认选择,name属性可以防止冲突。
select标签是下拉列表标签，option标签是选项，selected属性可以设置默认值。
textarea标签是多行文本框，rows是高度，cols是宽度。

下面是一个案例：

<h4>表单</h4>
<!--input是输入标签，
        可以通过type选择其输入的类型：text是文本框，password是密码框，radio是单选框，
                                checkbox是复选框，reset是重置按钮，submit是提交按钮，
                                button是按钮，file是文件上传，hidden是隐藏域
        value属性可以设置默认显示的内容。对于选择框checked属性可以默认选择,name属性可以防止冲突
    select标签是下拉列表标签，option标签是选项，selected属性可以设置默认值
    textarea标签是多行文本框，rows是高度，cols是宽度-->
<form>
    账户：<input type="text" value="请输入你的账号"/><br />
    密码：<input type="password" ><br />
    性别：<input type="radio" name="sex" checked="checked" />男
         <input type="radio" name="sex" />女<br />
    技能：<input type="checkbox">Java
         <input type="checkbox">c++
         <input type="checkbox">web<br />
    国籍：<select>
            <option>请选择国籍</option>
            <option>中国</option>
            <option>日本</option>
        </select><br />
    补充内容：<br /><textarea rows="5" cols="20"></textarea><br />
    <input type="file" /><br />
    <input type="reset" />
    <input type="submit" />
</form>

截图
在这里插入图片描述

表格与表单结合

将表单和表格结合起来就可以让表单更加的美观

<h4>表单表格</h4>
<form>
    <table width="200" align="center"   cellspacing="0">
        <tr>
            <td> 账户：</td>
            <td> <input type="text" value="请输入你的账号"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" ></td>
        </tr>
        <tr>
            <td> 性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked" />男
                <input type="radio" name="sex" />女
            </td>
        </tr>
        <tr>
            <td> 技能：</td>
            <td>
                <input type="checkbox">Java
                <input type="checkbox">c++
                <input type="checkbox">web
            </td>
        </tr>
        <tr>
            <td>  国籍：</td>
            <td>
                <select>
                    <option>请选择国籍</option>
                    <option>中国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>补充内容：</td>
            <td><textarea rows="5" cols="20"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"> <input type="file" /></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td><input type="submit" /></td>
        </tr>
    </table>

</form>

截图
在这里插入图片描述

表单的提交

form标签中的action属性可以设置提交服务器的地址
method属性是提交方式有GET（默认）和POST
表单提交需要给表单中的项目添加name值，并且给选择框添加value值

<h4>表单提交</h4>
<!--form标签中的action属性可以设置提交服务器的地址
    method属性是提交方式有GET（默认）和POST
    表单提交需要给表单中的项目添加name值，并且给选择框添加value值-->
<form action="https://www.baidu.com/">
    <table width="200" align="center"   cellspacing="0">
        <tr>
            <td> 账户：</td>
            <td> <input name="zh" type="text" value="请输入你的账号"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input name="mm" type="password" ></td>
        </tr>
        <tr>
            <td> 性别：</td>
            <td>
                <input type="radio" name="sex" value="nan" checked="checked" />男
                <input type="radio" name="sex" value="nv"/>女
            </td>
        </tr>
        <tr>
            <td> 技能：</td>
            <td>
                <input name="skill" value="java" type="checkbox">Java
                <input name="skill" value="c++" type="checkbox">c++
                <input name="skill" value="web" type="checkbox">web
            </td>
        </tr>
        <tr>
            <td>  国籍：</td>
            <td>
                <select name="country">
                    <option >请选择国籍</option>
                    <option value="cn">中国</option>
                    <option value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>补充内容：</td>
            <td><textarea name="content" rows="5" cols="20"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"> <input type="file" /></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td><input type="submit" /></td>
        </tr>
    </table>

</form>

在这里插入图片描述
在这里插入图片描述
我们在地址栏就可以看见我们所提交的信息，但是这是不安全的，提交方式变成post就可以避免这些信息的显示。

希望对看到这里的诸位有所帮助，如果喜欢这篇个人理解不妨点一个赞，谢谢~。

全部代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格和表单</title>
</head>
<body>
<h4>规整的表格</h4>
<!--table标签是表格标签，border属性设置表格的边框厚度，
    width属性设置表格的宽度，align设置表格的对齐方式，cellspacing设置单元格的间距
    tr是行标签，td是单元格标签，th是字体居中加粗的单元格标签,b是字体加粗标签-->
<table align="center" border="2" width="500"  cellspacing="0">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <th>2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <td><b>3.1</b></td>
        <td><b>3.2</b></td>
        <td><b>3.3</b></td>
    </tr>
</table>

<h4>不规整的表格</h4>
<!--colspan属性可以横向拓展，rowspan属性可以竖向拓展-->
<table align="center" border="2" width="500"  cellspacing="0">
    <tr>
        <td colspan="3">1.1</td>
    </tr>
    <tr>
        <th rowspan="2">2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <td><b>3.2</b></td>
        <td><b>3.3</b></td>
    </tr>
</table>

<h4>表单</h4>
<!--input是输入标签，
        可以通过type选择其输入的类型：text是文本框，password是密码框，radio是单选框，
                                checkbox是复选框，reset是重置按钮，submit是提交按钮，
                                button是按钮，file是文件上传，hidden是隐藏域
        value属性可以设置默认显示的内容。对于选择框checked属性可以默认选择,name属性可以防止冲突
    select标签是下拉列表标签，option标签是选项，selected属性可以设置默认值
    textarea标签是多行文本框，rows是高度，cols是宽度-->
<form>
    账户：<input type="text" value="请输入你的账号"/><br />
    密码：<input type="password" ><br />
    性别：<input type="radio" name="sex" checked="checked" />男
         <input type="radio" name="sex" />女<br />
    技能：<input type="checkbox">Java
         <input type="checkbox">c++
         <input type="checkbox">web<br />
    国籍：<select>
            <option>请选择国籍</option>
            <option>中国</option>
            <option>日本</option>
        </select><br />
    补充内容：<br /><textarea rows="5" cols="20"></textarea><br />
    <input type="file" /><br />
    <input type="reset" />
    <input type="submit" />
</form>

<h4>表单表格</h4>
<form>
    <table width="200" align="center"   cellspacing="0">
        <tr>
            <td> 账户：</td>
            <td> <input type="text" value="请输入你的账号"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" ></td>
        </tr>
        <tr>
            <td> 性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked" />男
                <input type="radio" name="sex" />女
            </td>
        </tr>
        <tr>
            <td> 技能：</td>
            <td>
                <input type="checkbox">Java
                <input type="checkbox">c++
                <input type="checkbox">web
            </td>
        </tr>
        <tr>
            <td>  国籍：</td>
            <td>
                <select>
                    <option>请选择国籍</option>
                    <option>中国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>补充内容：</td>
            <td><textarea rows="5" cols="20"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"> <input type="file" /></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td><input type="submit" /></td>
        </tr>
    </table>

</form>

<h4>表单提交</h4>
<!--form标签中的action属性可以设置提交服务器的地址
    method属性是提交方式有GET（默认）和POST
    表单提交需要给表单中的项目添加name值，并且给选择框添加value值-->
<form action="https://www.baidu.com/">
    <table width="200" align="center"   cellspacing="0">
        <tr>
            <td> 账户：</td>
            <td> <input name="zh" type="text" value="请输入你的账号"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input name="mm" type="password" ></td>
        </tr>
        <tr>
            <td> 性别：</td>
            <td>
                <input type="radio" name="sex" value="nan" checked="checked" />男
                <input type="radio" name="sex" value="nv"/>女
            </td>
        </tr>
        <tr>
            <td> 技能：</td>
            <td>
                <input name="skill" value="java" type="checkbox">Java
                <input name="skill" value="c++" type="checkbox">c++
                <input name="skill" value="web" type="checkbox">web
            </td>
        </tr>
        <tr>
            <td>  国籍：</td>
            <td>
                <select name="country">
                    <option >请选择国籍</option>
                    <option value="cn">中国</option>
                    <option value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>补充内容：</td>
            <td><textarea name="content" rows="5" cols="20"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"> <input type="file" /></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td><input type="submit" /></td>
        </tr>
    </table>

</form>
</body>
</html>
かわいいの喵小忍
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javaweb标签大全
07-22
资源名称：java web 标签大全资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
1、Javaweb_HTML&table布局
qq1092881420的博客
01-07 1543
* JavaWeb： * 使用Java语言开发基于互联网的项目* 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端
JavaWeb-标签库应用方法初探.docx
12-16
JavaWeb-标签库应用方法初探.docx
Web前端开发 form标签相关用法和属性
m0_52841254的博客
05-24 3191
<form>标签 html中的<form>标签，通常用于对用户信息的收集，form表单中需要使用<input>、<textarea>以及<select>标签完成各种功能的实现。 一、<input>标签及其相关属性 1.type属性 type属性用于设置<input>标签所设置的浏览器控件的类型 1.1.text type属性设置为text时，将在表单中插入单行文本框控件 用户名:<input type=
java web中jsp，action，service，dao，po分别是什么意思和什么作用
weixin_34191734的博客
08-30 272
JSP：全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它[1] 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而...
HTML中的table标签属性
热门推荐
My_liuying0901
05-17 7万+
表格 表格是由行和列排列而成的一种结构 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在<table>和</table>标签中； tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示； td标签和th标签用来定义单元...
HTML JavaWeb form表单里的action属性是干嘛的
xiao_xiao_w的博客
01-04 1176
啊哈终于学到了Javawe但对于表单发送请求还不怎了解，那就看这篇超细讲解。学完就会觉得action妙啊
web工程的表单（Form）和代码架构格式详解
qq_41043166的博客
11-16 833
web编程的表单
4、HTML——表格标签、表单标签
CSDN_Loveletter的博客
11-17 2808
一、表格标签：table—tr—td/th 1、合并单元格 1.1 合并同行不同列的单元格（列合并） 1.2 合并同列不同行的单元格（行合并） 二、表单标签：form 1、form标签 2、input输入标签 2.1 type属性值：text；password 2.2 type属性值：radio 2.3 type属性值：checkbox 2.4 type属性值：file 2.5 下拉列表标签：select—option 2.6 文本域标签：textarea 2
【Java 进阶篇】HTML表格标签详解
繁依Fanyi的博客
10-08 395
HTML（Hypertext Markup Language）表格标签是在网页中用于创建表格的重要工具。表格是一种在网页上以行和列的方式组织和显示数据的有效方式。在本文中，我们将详细介绍HTML表格标签，包括如何创建表格、定义表头、单元格合并等内容。这篇文章适用于初学者，将帮助你理解如何使用HTML创建各种类型的表格。
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
javaWeb自定义标签用法实例详解
08-30
主要介绍了javaWeb自定义标签用法,结合实例形式分析了javaweb自定义标签的功能、定义方法及执行原理,需要的朋友可以参考下
WEB基础之： form标签
f_carey的博客
12-03 3359
form表单1. form标签属性1.1 action 属性1.2 name属性1.3 method传送方法1.4 enctype编码方式1.5 target目标显示方式2. form中input输入类的控件2.1 text文字字段2.2 password密码域2.3 radio单选按钮2.4 checkbox复选框2.5 button普通按钮2.6 submit提交按钮2.7 reset重置按钮2.8 image图像域2.9 hidden隐藏域2.10 file文件域3. form中lable定义标签4
java的action_JavaWeb(action层)
weixin_34194829的博客
02-12 4160
action是什么？action是获得form表单数据 再去处理的类为什么要有action？因为在servlet中往往会出现使用一个servlet处理多个功能，比如登陆功能，注册功能，浏览功能等，这样action就是必不可少的了怎么去使用action？首先是启动服务后，在浏览器上输入然后通过代码来获取action的值String action = req.getParameter("action"...
java表格标签_前端编程之路一一表格标签table
weixin_26874745的博客
02-26 298
在 HTML 中，我们使用 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。在学习表格之前，我们不妨先来看一段简单的 HTML 代码：1. 2. 3. 名称4. 官网5. 性质6. 7. 8. C语言...
web表单（详解）
m0_52896041的博客
11-29 3566
web表单（详解）
web前端form表单的action路径url问题
YiGeiGiaoGiao的博客
01-22 2798
绝对路径与相对路径
使用html画一个键盘
最新发布
liulang68的博客
04-22 4195
【代码】使用html画一个键盘。
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值