前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签

news/2024/7/27 7:34:35/文章来源:https://blog.csdn.net/Tingfeng__/article/details/136596093

🔥博客主页：【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

1.0 表格标签概述

1.1 表格标签定义

2.0 表单标签概述

2.1 表单标签定义

3.0 表单项标签概述

3.1 表单项标签定义

1.0 表格标签概述

顾名思义，就是用来定义表格用的标签。在网页中以表格(行、列)形式整齐展示数据，如：班级表。

1.1 表格标签定义

<table>：定义表格整体，可以包裹多个 <tr>

border：规定表格边框的宽度(如果没有这个属性，整体表格是不会显示边框)

width：规定表格的宽度(整体表格的宽度)

cellspacing：规定单元之间的空间(如果没有这个属性，默认单元之间是有空隙的)

<tr>：表格的行，可以包裹多个 <td>

<td>：表格单元格(普通)，可以包裹内容,如果是表头单元格，可以替换为 <th> 具有加粗居中的效果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" cellspacing="0px" width="300px"><tr><th>学号</th><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>01</td><td>张三</td><td>男</td><td>计科</td></tr><tr><td>02</td><td>李四</td><td>男</td><td>美术</td></tr><tr><td>03</td><td>王五</td><td>女</td><td>体育</td></tr></table>
</body>
</html>

运行结果为：

需要注意的是：若表格中的属性没有 border 时，整体表格都不会有边框，如：

若表格中的属性没有 cellspacing 时，单元表之间默认是有间隙的，如：

2.0 表单标签概述

表单标签可能我们每天都会接触到，比如账号密码的登录。在网页中主要负责数据采集功能。

表单的结构形式：

2.1 表单标签定义

<form>：定义表单的整体

action：规定当提交表单时向何处发送表单数据，URL 。如果不指定，默认提交到当前页面。

method：规定用于发送表单数据的方式，GET、POST：

get：在 url 后面拼接表单数据，url 长度有限制，默认值。

post：在消息体(请求体)中传递的，参数大小无限制。

代码如下：

    <form action="" method="get">表单项1表单项2...</form>

3.0 表单项标签概述

表单项是组成表单的基本元素

表单项的结构：

比如性别这项，是由表单项定义而来。

3.1 表单项标签定义

<input>：表单项，通过 type 属性控制输入形式

type 属性：

<select>：定义下拉列表，<option> 定义列表项

<textarea>：文本域，cols：指定一行多少个字符；rows：指定一共多少行。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" method="post">姓名: <input type="text" name="username"><br><br>密码: <input type="password" name="pass"><br><br>性别: <label><input type="radio" name="gender" value="1">男</label><label><input type="radio" name="gender" value="2">女</label><br><br>爱好: <label><input type="checkbox" name="hobby" value="java">java</label><label><input type="checkbox" name="hobby" value="game">game</label><label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>图像: <input type="file" name="imag"><br><br>生日: <input type="date" name="birthday"><br><br>时间: <input type="time" name="t"><br><br>日期时间: <input type="datetime-local" name="localtime"><br><br>邮箱: <input type="email" name="email"><br><br>年龄: <input type="number" name="age"><br><br>学历: <select name="gender"><option value="0">--------请选择--------</option><option value="1">--------高中--------</option><br><option value="2">--------初中--------</option><br><option value="3">--------小学--------</option><br></select><br><br>描述: <textarea name="dis" cols="30" rows="10"></textarea><br><br><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body>
</html>

运行结果为：