JavaWeb——HTML基础标签table标签与form标签的学习与理解-物联网技术文章-傲云油气装备网

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

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>

• 详解.NET Core 依赖注入生命周期	• [React][2020] webpack 4.x 项目中配置解析 jsx
• 中科院分区和JCR分区查询	• 微机原理 8253/8254编程示例
• 推荐——大学四年来受益匪浅的10个网站	• 计算机考研复试之操作系统四十二问

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享
• STM32查询式按键输入[直接用寄存器]	• Ubuntu系统 USB设备端口绑定
• 2021-04-14 第四次按键输入实验	• Flutter扫码功能完美实现