HTML 表单与表格布局实战：两个经典作业案例详解

作为 HTML 初学者，表单元素应用和表格布局是基础且核心的技能。本文将通过两个经典作业案例 ------用户注册页面 和工商银行电子汇款单，详细拆解实现过程，从题目分析到代码落地，来巩固 HTML 基础语法与布局逻辑。

一、作业1：用户注册页面

题目：根据所学HTML知识完成以下表单题目

要求:

1.用户名为文本框，名称为UserName，长度为15，最大字符数为20。

2.密码为密码框,名称为UserPass,长度为15,最大字符数为20。

3.性别为两个单选按钮，名称为sex，值分别为男和女，男默认选中。

4.爱好是三个多选按钮，名称为like，值分别为写作、听音乐、体育。

5.省份为下拉框，名称为province,选项的键-值对为Key:陕西省,value:shaanxi;Key:山西省,value:shanx;陕西省默认选中.。

6.自我介绍为多行文本框，名称为intro，宽25，高5，默认值为"这个家伙什么也没留下"。

7.提交按钮，名称为"send"，标签为"提交"。

8.重置按钮，名称为"reset"，标签为"重置"。

9.参照图使用表格定位表单。

1.题目分析

这道题目核心目标是掌握 HTML 表单 各类元素的使用，同时通过表格实现页面的整齐排版。需要整合文本框、密码框、单选按钮、多选按钮、下拉框、多行文本框及功能按钮 ，确保每个元素的属性符合需求，布局美观规整。

2.代码需求

①用户名：文本框（name="UserName"）；

②密码：密码框（name="UserPass"）；

③性别：单选按钮（name="sex"），值为 "男 / 女"，默认选中 "男"；

④爱好：多选按钮（name="like"），值为 "写作 / 听音乐 / 体育"；

⑤省份：下拉框（name="province"），选项为陕西（value="shaanxi"，默认选中）、山西（value="shanx"）；

⑥自我介绍：多行文本框（name="intro"），宽 25、高 5，默认值 "这个家伙什么也没留下"；

⑦功能按钮：提交（name="send"，标签 "提交"）、重置（name="reset"，标签 "重置"）；

⑧整体使用表格定位表单元素。

3.完整代码

html 复制代码

<!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="post">
        <table border="1" align="center">
            <!-- 用户注册行 -->
            <tr>
                <td colspan="2" class="title" align="center">用户注册</td>
            </tr>
            <!-- 用户名行 -->
            <tr>
                <td align="right">用户名</td>
                <td><input type="text" name="UserName" size="15" maxlength="20"></td>
            </tr>
            <!-- 密码行 -->
            <tr>
                <td align="right">密码</td>
                <td><input type="password" name="UserPass" size="15" maxlength="20"></td>
            </tr>
            <!-- 性别行 -->
            <tr>
                <td align="right">性别</td>
                <td>
                    <input type="radio" name="sex" value="男" checked> 男
                    <input type="radio" name="sex" value="女"> 女
                </td>
            </tr>
            <!-- 爱好行 -->
            <tr>
                <td align="right">爱好</td>
                <td>
                    <input type="checkbox" name="like" value="写作"> 写作
                    <input type="checkbox" name="like" value="听音乐"> 听音乐
                    <input type="checkbox" name="like" value="体育"> 体育
                </td>
            </tr>
            <!-- 省份行 -->
            <tr>
                <td align="right">省份</td>
                <td>
                    <select name="province">
                        <option value="shaanxi" selected>陕西省</option>
                        <option value="shanx">山西省</option>
                    </select>
                </td>
            </tr>
            <!-- 自我介绍行 -->
            <tr>
                <td align="right">自我介绍</td>
                <td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td>
            </tr>
            <!-- 提交和重置按钮 -->
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="send" value="提交">
                    <input type="reset" name="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

4.运行结果截图

二、作业2：工商银行电子汇款单

题目：根据所学HTML知识完成以下表单题目

1.题目分析

这道题目重点练习表格的合并单元格（colspan 跨列合并、rowspan 跨行合并）功能，同时应用文本格式化标签（加粗、斜体、下划线、删除线），还原真实电子汇款单的信息展示格式，要求信息准确、布局对称。

2.代码需求

①页面标题：工商银行电子汇款单；

②表格布局：宽度 800px，带边框，展示汇款单核心信息；

③单元格合并：收款人 / 付款人信息跨行合并（rowspan="4"），部分标签跨列合并（colspan="2"）；

④文本格式：关键标签加粗（如 "户名""卡号"），交易时间 / 时间戳斜体，钞汇标识下划线，打印单位删除线；

⑤信息准确：还原户名、卡号、地区、网点、金额、手续费、时间等所有数据。

3.完整代码

html 复制代码

<!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>
    <!-- 标题行 -->
    <h1>工商银行电子汇款单</h1>
    <!-- 表格整体 -->
    <table border="1" width="800px">
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4"><b>付款人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000002</td>
        </tr>
        <tr>
        <td>地区</td>
        <td>南京</td>
        <td>地区</td>
        <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人名币</td>
            <td colspan="2"><b>钞汇标识</b></td>
            <td><u>钞票</u></td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00, 00000</i></td>
        </tr>
    </table>
    <!-- 文字段落行 -->
    <p>
        票据打印时间:2017-06-01 15:00:12
    </p>
    <p>
        <del>票据打印单位:江苏徐州业务中心</del>
    </p>
    <p>
        操作员:大曾
    </p>
</body>
</html>

4.运行结果截图

三、总结

这两个作业看似简单，却涵盖了 HTML 初学者必须掌握的核心知识点：

①表单元素 ：文本框、密码框、单选 / 多选按钮、下拉框、多行文本框的属性配置（name、value、checked、size、cols等）；

②表格布局 ：border、align、cellpadding等基础属性，以及colspan（跨列）、rowspan（跨行）的合并逻辑；

③文本格式化 ：b（加粗）、i（斜体）、u（下划线）、del（删除线）的合理应用；

④细节把控 ：布局的对称性与美观度。

通过这两个案例的练习，能够快速熟悉 HTML 的基础语法与布局思维，为后续学习 CSS 美化、JavaScript 交互打下坚实基础。