第4节课：表格与表单——HTML中的数据展示与交互

学问小小谢

已于 2024-07-26 10:32:14 修改

阅读量460

点赞数 11

分类专栏： HTML学习文章标签：学习 html 开发语言

于 2024-07-26 10:27:37 首次发布

本文链接：https://blog.csdn.net/XWXXX666/article/details/140708911

版权

HTML学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表格 `<table>`：展示结构化数据

创建表格

表格由<table>标签定义，并通过行<tr>和列<td>来组织数据。

<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

表格的属性

border：设置表格边框的粗细。
cellpadding 和 cellspacing：控制单元格内边距和单元格间距。
width 和 height：设置表格的宽度和高度。

表格的标题和表头

<th>：表示表头单元格，通常加粗并居中显示。
<thead>：定义表格的头部。
<tbody> 和 <tfoot>：定义表格的主体和脚部。

<table>
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结1</td>
            <td>总结2</td>
        </tr>
    </tfoot>
</table>

表单 `<form>`：收集用户输入

使用表单

表单通过<form>标签定义，包含输入控件如文本框、单选按钮、复选框等。

<form action="submit_page.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="username">
    <input type="submit" value="提交">
</form>

表单的属性

action：指定提交表单数据至哪个URL。
method：指定数据提交的方式，通常是get或post。

输入控件

<input>：用于创建不同类型的输入控件，如文本框(text)、密码框(password)、单选按钮(radio)等。
<textarea>：多行文本输入控件。
<select> 和 <option>：下拉选择菜单。

<form>
    <input type="text" placeholder="输入您的姓名">
    <textarea placeholder="输入您的留言"></textarea>
    <select>
        <option>选项1</option>
        <option>选项2</option>
    </select>
    <input type="submit" value="发送">
</form>

表单数据收集与提交

数据收集

表单控件通过name属性命名，以便在服务器端识别和处理。

数据提交

当用户填写完表单并点击提交按钮后，数据会根据method属性的设置，通过GET或POST请求发送到服务器。

实践：创建一个包含表格和表单的网页

下面是一个示例，展示如何结合表格和表单来创建一个用户反馈页面。

<!DOCTYPE html>
<html>
<head>
    <title>用户反馈</title>
</head>
<body>
    <h1>用户反馈</h1>
    
    <!-- 表格展示现有反馈 -->
    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>反馈内容</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>用户A</td>
                <td>这个网站很有用。</td>
            </tr>
            <!-- 更多用户反馈 -->
        </tbody>
    </table>
    
    <!-- 表单收集新反馈 -->
    <h2>留下您的反馈</h2>
    <form action="submit_feedback.php" method="post">
        <label for="feedback">反馈内容：</label>
        <textarea id="feedback" name="feedback"></textarea>
        <input type="submit" value="提交反馈">
    </form>
</body>
</html>

结语

表格和表单是HTML中展示和收集数据的重要工具。通过本节课的学习，你应该能够理解如何创建和使用表格来展示数据，以及如何利用表单来收集用户输入。掌握这些技能，将使你能够创建交互性强、信息丰富的网页。继续学习，不断实践，你将能够进一步提升你的网页设计和开发能力。

学问小小谢

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第4节课：表格与表单——HTML中的数据展示与交互

在HTML中，表格和表单是两种强大的工具，用于数据的展示和收集。表格以结构化的方式呈现数据，而表单则允许用户输入和提交数据。本节课将详细介绍如何使用``和``标签，以及它们的属性和控件。
复制链接

扫一扫