HTML中的表格与表单_网页源码插入表格-CSDN博客

本文链接：https://blog.csdn.net/sjdjjdkd/article/details/148070642

表格标签

<table>定义表格整体，可以包裹多个<tr>
<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>表格</title>
</head>

<style>
    table {
        width: 50%;
        text-align: center;
        /* 设置文本居中 */
        border-collapse: collapse;
        /* 边框会合并为一个单一的边框 */
    }

    /* 联合选择器 */
    td,
    th {
        border: 1px solid black;
    }

    img {
        width: 30px;
    }
</style>

<body>
    <table>
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>001</td>
            <td><img src="./img/huawei.jpg"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>002</td>
            <td><img src="./img/alibaba.jpg" alt=""></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>

</html>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：<form>
表单项：不同类型的input元素、下拉列表、文本域等。

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

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

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

<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL

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

接下来我们用一个例子来对表单标签有更深的理解:

<!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属性: 定义表单提交方式
                get:  请求数据直接拼接在路径后面  ?username=zs&age=18, 大小有限制
                post: 请求数据通过请求体传递  username=lisi&age=19, 大小无限制
            注意: 如果要提交数据,必须添加name属性
     -->
    <form action="" method="get">
        姓名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="get提交数据">
    </form>

    <br>

    <form action="" method="post">
        姓名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="post提交数据">
    </form>
</body>
</html>

表单标签: form

action属性: 定义提交数据的路径, 不写的话提交到当前路径

method属性: 定义表单提交方式

get: 请求数据直接拼接在路径后面 ?username=zs&age=18, 大小有限制

post: 请求数据通过请求体传递 username=lisi&age=19, 大小无限制

注意: 如果要提交数据,必须添加name属性

用户名: <input type="text" name="username">

1.get提交方式

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

2.post提交方式

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：username=Tom&age=12。

两种方式对比可知，get请求数据直接拼接在路径后面，post请求数据通过请求体传递，post提交比get提交更安全，并且大小没有限制。

代码如下：

<!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>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <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="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

注意：单选按钮和复选框中的name必须相同，使得单选按钮只能选一个