表单与表格

最新推荐文章于 2024-07-15 11:41:19 发布

童童童ing

最新推荐文章于 2024-07-15 11:41:19 发布

阅读量804

点赞数

文章标签： html css html5 前端 css3

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124354753

版权

表单与表格

一、表格（table）
二、表单

一、表格（table）

1.标签

HTML中做一个表格，需要用到的标签有<table>,<tr>表格行,<th>表头,<td>单元
案例构造了一个2行2列的表格

 <table border="1">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>

    </table>

在这里插入图片描述

2.css重置表格

table{border-collapse:collapse}用于单元格间隙合并
合并单元格之后的效果如下

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
        }
        /* td {
            width: 40px;
            height: 26px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
         */
        td{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>

    </table>

在这里插入图片描述

th,td{padding:0}用于重置单元格默认填充

3.单元格合并

colspan(横向合并)
rowspan(纵向合并)
合并步骤：1找2合3删除（找到要合并的起始单元格，设置colspan,rowspan,设置值为需要合并的单元格数目，删除被合并的单元格）
案例如下

<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>table</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 40px;
            height: 26px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        
        /* th,td{
            padding: 0;
            width: 100px;
            height: 100px;
        } */
    </style>
</head>
<body>
    <!-- <table border="1">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>

    </table> -->

    <table border="1">
        <tr>
            <td rowspan="5">1</td>
            <td>2</td>
            <td colspan="2">3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td colspan="3">4</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>

在这里插入图片描述

二、表单

1.表单元素

(1)input

1.属性type=""是表单元素的类型,对应的值有text文本框，password密码，radio单选框，checkbox复选框，button按钮，submit提交（此时点击按钮会将表单中的信息提交到指定地址），placeholder提示文本，reset重置，file文件，hidden隐藏

属性name=“”,是关键词和作用域
属性value=""是当前表单元素的值
（2）select/option —下拉选择框
（3）textarea—多行文本域

2.提交方式method

get：信息拼接在地址后，信息不安全，以明文方式，信息不安全
post:信息打包发送，信息安全

3.action

（1）action---- 对应值为数据提交的地址
案例1

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* reset input */
        input{
            border: 0;
            /* 外廓 outline，用法跟border一样，不占地儿 */
            outline: 0;
            /* input本身是白色的 */
            background-color: transparent;

        }
        .search{
            width: 650px;
            height: 40px;
            border: 2px solid deepskyblue;
            /* background-color: pink; */
            margin: 150px auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .search input{
            float: left;
            height: 40px;
        }
        #search{
            /* 使光标不贴div的左边，改小一点加左外边距 */
            width: 530px;
            margin: 0 10px;
        }
        #submit{
            width: 100px;
            background-color: deepskyblue;
            color: #fff;
        }
        /* 伪类选择器 */
        #submit:hover{
            background-color: blue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <div class="search">
            <input id="search" type="text" name="wd">
            <input id="submit" type="submit" value="百度一下">
            <input id="" type="text" >
        </div>
    </form>
</body>
</html>

此案例信息提交的地址为https://www.baidu.com/s
在这里插入图片描述
当我们在输入框输入csdn时，页面会跳转到百度搜索的csdn相关页面

案例二

<!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>form</title>
</head>
<body>
    <!-- url: 协议 + 域名/(IP:port) + 路径 ? 参数信息 -->
    <!-- 信息提交 -->
    <!-- form 块标签 -->
    <!-- 资源类的标签基本上都是行块标签 -->
    <!-- action 数据提交的地址 -->
    <form action="http://www.baidu.com" method="post">
        <p>大牡丹婚庆网</p>
        <!-- <div>
            <label for="username">用户名</label>
            <input id="username" type="text">
        </div> -->
        <input name="user_name" type="text" placeholder="请输入用户名">
        <br>
        <input name="pwd" type="password" placeholder="请输入密码">
        <br>
        <p>请选择您的性别</p>
        <p>
            <span>🐘</span>
            <input name="gender" type="radio" value="1">
        </p>
        <p>
            <!-- name 划定作用域，也是关键词
            checked  默认选择 -->
            <span>🦒</span>
            <input checked  value="0" name="gender" type="radio">
        </p>

        <p>您的爱好:</p> 
        <p>
            <span>阅读</span>
            <input value="阅读" name="hobby" type="checkbox">
        </p>
        <p>
            <span>旅行</span>
            <input value="旅行" name="hobby" type="checkbox">
        </p>
        <p>
            <span>冥想</span>
            <input value="冥想" name="hobby" type="checkbox">
        </p>
        <p>
            <span>烹饪</span>
            <input value="烹饪" checked name="hobby" type="checkbox">
        </p>
        <input type="submit">
    </form>
</body>
</html>