HTML表格与表单

最新推荐文章于 2024-10-18 19:19:52 发布

下雨的清晨

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量1k

点赞数 26

分类专栏： # HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/2301_79155654/article/details/141257162

版权

HTML学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表格

创建表格：`<table>`、`<tr>`、`<td>`、`<th>` 标签

<table>标签是表格的容器，用于定义表格的开始和结束

<tr>表示表格中的一行。表格中的每一行都需要一个<tr>标签

<td>用于定义表格的普通单元格

<th>用于定于表格的表头单元格

示例：学生信息表

<table>
   <tr>
	<th>姓名</th>
    <th>年龄</th>
    <th>入学时间</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>17</td>
        <td>6月3日</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>7月1日</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>18</td>
        <td>9月2日</td>
    </tr>
</table>

表格的结构性标签

<thead> 标签用于分组表格的头部内容，通常包含一组<tr>标签。这部分内容通常包含列标题。

<tbody> 标签用于分组表格的主体内容，通常包含表格中的实际数据行。

<tfoot> 标签用于分组表格的尾部内容，通常用于汇总数据或显示表格的脚注。这个部分一般放在表格底部。

示例：学生信息表

<table>
    <thead>
    <tr>
	<th>姓名</th>
    <th>年龄</th>
    <th>入学时间</th>
    </tr>
 </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>17</td>
        <td>6月3日</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>7月1日</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>18</td>
        <td>9月2日</td>
    </tr>
 </tbody>
</table>

表格的属性：`border`、`cellpadding`、`cellspacing`

border 属性:定义表格单元格的边框宽度。默认情况下，表格是没有边框的。

cellpadding 属性：设置单元格内容与单元格边框之间的空白间距。默认值是浏览器决定的，通常为2个像素。

cellspacing 属性：设置单元格之间的间距（即单元格外部的空间）。默认值也是由浏览器决定的，通常为2个像素。

合并单元格：`colspan` 和 `rowspan`

colspan 和 rowspan都是某个单元格的属性：

colspan 属性：定义一个单元格跨越多列。

rowspan 属性：定义一个单元格跨越多行。

表单基础

表单标签：`<form>`、`<input>`、`<label>`、`<textarea>`、`<button>`、`<select>`、`<option>`

HTML 表单是收集用户输入的基础工具。

`<form>`标签

<form> 标签是表单的容器，包含表单中的所有输入元素。它还定义了表单数据提交的目的地（URL）和方法（如GET或POST）。

示例：

<form action="#" method = "post">
    <!-- 表单内容-->
</form>

属性：

action：指定表单提交时数据发送到的URL。

action如果为空或未定义，表单将提交到当前页面的URL。

method：指定提交表单时使用的HTTP方法。常见有GET和POST。

enctype：指定表单数据的编码方式。常见值包括application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件上传）、text/plain（纯文本数据）。

`<input>`标签

<input> 标签用于创建各种类型的输入框，如文本框、复选框、单选按钮等。根据type属性的不同，<input>可以创建不同的表单控件。

属性：

type：指定输入框的类型，常见的有text（文本框）、password（密码框）、checkbox（复选框）、radio（单选按钮）、submit（提交按钮）、file（文件上传）、email（电子邮件输入框）、number（数字输入框，可以指定范围和步进值）、date（日期输入框）等。

name：指定输入框的名称，用于提交表单时标识数据。

value：定义输入框的初始值，或提交时发送的值。

placeholder：在输入框为空时显示的提示文本。

required：如果存在该属性，则表单提交时必须填写此字段。

readonly：该字段仅供读取，用户无法修改。

disabled：该字段被禁用，用户无法交互。

关于value属性：

设置默认值：为输入框或按钮提供默认值。
表单提交：当表单提交时，value属性的值会与name属性对应的字段一起发送到服务器。

示例

1. 文本框（type="text"）
<input type="text" name="username" value="默认用户名">
作用：文本框显示“默认用户名”作为初始值，用户可以修改。

2. 隐藏字段（type="hidden"）
<input type="hidden" name="userId" value="12345">
作用：提交时发送“12345”作为userId的值，用户看不到这个字段。

3. 复选框（type="checkbox"）
<input type="checkbox" name="subscribe" value="newsletter"> 订阅
作用：选中复选框时，subscribe的值为“newsletter”；不选中则不发送。

4. 单选按钮（type="radio"）
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
作用：用户选择“男”时，gender的值为“male”；选择“女”时，值为“female”。

5. 按钮（type="submit"）
<input type="submit" value="提交表单">
作用：按钮显示“提交表单”文本