html与css：表格与表单

表格和表单元素

表格元素

表格主要用来展示数据
表格元素的 容器使用table标签，属性：border（用于设计分隔线）

其他表格元素的标签：

thead（表头）：
th(表头单元格内容)
tbody（表体），这两个都不是必须的：
tr（表体一行），
td（tr中每列单元格内容）属性：rowspan，纵向合并单元格；属性：colspan，横向 合并单元格

相关代码实现效果

<!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>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <!-- <th></th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th> -->
            <th colspan="4">学生信息管理系统</th>
    
        </thead>

        <tbody>
            <!-- <tr>
                <td colspan="4">学生信息管理系统</td>
            </tr> -->
            <tr>
                <td></td>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td rowspan="3">序号</td>
                <td>1</td>
                <td>小红</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小刚</td>
                <td>4</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小明</td>
                <td>5</td>
            </tr>

    </table>
    
    </tbody>
</body>
</html>

实现效果：

image-20220304170855262

表单元素

表单元素容器使用form标签
常用的标签包括有：

input:type=‘text’,action 属性：向后台提交数据,placeholder属性用于输入框提示符文本提示
input:type=‘password’
input:type=‘radio’，单选框，如果要做单选绑定，中间用name属性
input:type=‘checkout’，复选框，
input:type=‘button’，仅是个按钮
input:type=‘submit’提交按钮，里面的value属性是该按钮名称文本，可以将表单提交给后台

label ：image-20220304165149418名称标签，可用id属性与input内同绑定，与input标签平行
select：image-20220304170149808折叠选择标签，与option标签连同使用设置选择内容
option：位于select标签之内

本节代码：

<!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>Document</title>
</head>
<body>
    <!-- <table>
        <thead>
            <th>问卷调查系统</th>
        </thead>
    </table> -->
    <h1>问卷调查系统</h1>
    <form action="">
        <!-- action是联系后台的，暂时用不上 -->
        <label for="username">用户名</label>
        <input id='username' type="text" placeholder="用户名">
        <!-- id 与 for 相联系，让label标签和id绑定，再点击label标签后可快速fcous到input -->
        
    </form>
    <form action="">
        <label for="password">密码</label>
        <input id= 'password' type="password"placeholder='密码'>
        
    </form>
    <form action="">
        <label for="">性别</label>
        <label for="">男</label>
        <input type="radio" name="sex" id="">
        <label for="">女</label>
        <input type="radio" name="sex" id="">
        <!-- sex之间相互绑定 -->
    </form>
    
    <form action="">
        <label for="">最喜欢的运动</label>
        <select name="" id="">
            <option value="">足球</option>
            <option value="">篮球</option>
            <option value="">乒乓球</option>
            <option value="">排球</option>
        </select>
    </form>
    <form action="">
        <input type="submit" value="提交">
    </form>
    
</body>
</html>

实现效果

image-20220304175033593

posted @ 2022-03-04 17:54  karlsorpan  阅读(68)  评论(0)    收藏  举报