HTML表单案例分析 | 豆包MarsCode AI刷题

用户3065725168461
166 阅读4分钟

在网页开发中，表格和表单是非常基础且常用的元素。它们广泛应用于数据展示和用户输入。通过这两个案例，我们可以深入理解如何使用 HTML 来创建和设计表格与表单，并分析其中的结构与功能。

学生信息表案例分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><strong>优秀学生信息表</strong></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年三班</td>
            </tr>
            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>
        <tfoot>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tfoot>
    </table>
</body>
</html>

代码解析

  1. 表格结构：

    • <table> 标签定义了一个表格，border="1" 表示为表格添加边框，width="500" 和 height="300" 分别设置表格的宽度和高度。
    • <caption> 标签用来给表格添加标题，<strong> 使标题加粗，表格的标题为 "优秀学生信息表"。

  2. 表头（<thead>）：

    • <thead> 用来定义表格的头部，包含一个 <tr> 标签，这个标签表示表格的每一行。
    • <th> 标签用于定义表头单元格，每个 <th> 表示一列的标题，这里定义了 "年级"、"姓名"、"学号" 和 "班级"。

  3. 表体（<tbody>）：

    • <tbody> 用来定义表格的主体部分，包含学生的具体信息。
    • 使用 <tr> 来定义每一行学生的信息。这里有两行数据，分别是张三和赵四。
    • rowspan="2" 属性表示 "年级" 列中的 "高三" 内容跨越两行，因为这两位学生都属于高三。

  4. 表脚（<tfoot>）：

    • <tfoot> 用于定义表格的底部部分，通常包含一些总结性内容。在这个案例中，"评语" 列包含了 "你们都很优秀" 的评语，使用 colspan="3" 属性使得评语占据三列。

思考与分析

  • 设计与结构：这个学生信息表的设计相对简单，适用于展示少量学生的基本信息。rowspan 和 colspan 的使用使得表格的布局更为简洁。通过 thead、tbody 和 tfoot 的划分，表格内容也更清晰，易于维护。
  • 改进建议：可以通过 CSS 来进一步美化表格，比如增加边框样式、设置不同的背景颜色等，使表格更加直观和美观。另外，可以考虑为表格增加排序功能，方便查看不同学生的成绩或其他信息。

表单案例分析

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br><br>
        性别：
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>
        所在城市：
        <select>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="nanjing" selected>南京</option>
            <option value="shenzhne">深圳</option>
        </select>
        <br><br>
        擅长语言：
        <label><input type="checkbox">C</label>
        <label><input type="checkbox">C++</label>
        <label><input type="checkbox">Java</label>
        <label><input type="checkbox">Python</label>
        <br><br>
        个人介绍：<br>
        <textarea name="#" id="#" cols="60" rows="10"></textarea>
        <br><br>
        <h3>我声明</h3>
        <ul>
            <li>C/C++是最好的语言</li>
            <li>Java是最好的语言</li>
            <li>Python是最好的语言</li>
        </ul>
        <br><br>
        <input type="checkbox">我同意以上条款
        <br><br>
        <input type="submit" value="免费注册">
        <button type="button">登录</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

代码解析

  1. 基本结构：

    • <form> 标签用于定义表单，action="" 表示提交表单后不指定目标地址。
    • 各种表单元素（如 input、select、textarea）用来收集用户的不同信息。

  2. 表单元素：

    • 文本输入框：<input type="text"> 用来输入昵称。
    • 单选框：<input type="radio"> 用于选择性别，name="sex" 表示两个单选框属于同一组，用户只能选择其中一个。
    • 下拉框：<select> 用来选择城市，<option> 定义了具体的选项，selected 属性表示默认选项。
    • 多选框：<input type="checkbox"> 用于选择擅长的编程语言，用户可以多选。
    • 文本区域：<textarea> 用来输入个人介绍，用户可以输入多行文本。

  3. 声明与同意条款：

    • 使用 <ul> 列出一些语言声明，并用 <input type="checkbox"> 来表示用户同意条款。

  4. 提交与重置按钮：

    • <input type="submit"> 用于提交表单，<button> 标签用于定义其他按钮，这里有 "登录" 和 "重置" 按钮。

思考与分析

  • 功能性：这个表单设计简单明了，能够收集用户的基本信息（昵称、性别、城市、编程语言、个人介绍等），适合初步的用户注册功能。submit 按钮可以提交表单数据，reset 按钮则是用来清空表单。
  • 交互设计：通过使用单选框、复选框和下拉菜单，表单设计得很有层次，用户可以清楚地知道每项内容该如何填写。对于编程语言的多选，表单提供了较好的灵活性。
  • 改进建议：
    1. 表单字段缺少必填标识，可以通过 required 属性标记必要字段，避免用户提交空数据。
    2. 可以为表单项添加更多的样式，使表单界面更加友好和吸引人。
    3. action 属性需要指定处理表单数据的服务器地址，否则表单提交后没有实际的处理动作。

总结

通过这两个案例，我们深入了解了 HTML 表格和表单的基本结构、元素及其使用方法。表格用来展示结构化数据，而表单则是收集用户输入的主要方式。设计时要考虑到表格的可读性和表单的交互性，通过合理使用 HTML 标签及属性来提升用户体验。在实际项目中，配合 CSS 和 JavaScript，这些基础组件能够帮助我们创建功能丰富且易于使用的网页。

avatar
文章
阅读
粉丝