CSS一篇文章搞懂系列9：提交表单，做个简单的调查问卷

最新推荐文章于 2024-09-30 12:30:34 发布

尚墨1111

最新推荐文章于 2024-09-30 12:30:34 发布

阅读量1.7k

点赞数 1

分类专栏：早期编程语言基础

本文链接：https://blog.csdn.net/qq_42647903/article/details/107999767

版权

早期编程语言基础专栏收录该内容

80 篇文章

订阅专栏

本文介绍了HTML和CSS中表格和表单的基本用法，包括表格的创建、格式设置以及表单元素如文本框、下拉菜单、单选和多选按钮的设计。并通过一个大学生运动情况调查问卷实例，展示了如何将这些知识应用于实际项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、意义：

这部分高级的使用肯定是应该与数据库结合使用，这里只是简单介绍其基本属性，后面会有一篇简易的调查问卷小练习

<!--
    表格；
    1. html 里面可以设置格式
      1.1 行列分
        |--table:整个表格整体部分
           可以设置基本的格式：<table border="1" width=20% align="center">
        |--tr:表示表格的一行内容
        |--td：表示表格一行中的一列
           |---rowspan="n"：往下纵向合并n单元格,如果里面原来有元素就会被挤过去
           |---colspan="n"：往右横向合并n单元格

      1.2 按内容分
        |--thead：表示表头部分
           th表示表头标题
        |--tbody：表示身体部分
        |--tfoot：表示表底部分

    2. CSS中设置表格样式
        |--table{} 设置整个表格的样式
           |-- border-collapse: collapse，设置边框合并
           |--background-color: lawngreen，设置分行的高亮显示
           |--vertical-align：通过基线设置垂直方向的居中格式
        |--td{} 设置具体内容的样式


    3. 表单，提交数据给服务器的方式
       |--form 设置提交的服务器地址
          |--input设置各种表单的格式：
            submit、passwrad、radio、checkbox、select+option、reset、button
            |--几个属性：name、value
          |--button。设置无基本样式的按钮。



-->


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        table{
            width: 50%;
            border:1px solid red;
            /*设置边框合并*/
            border-collapse: collapse;

        }

        /*设置分行的高亮显示*/
        tbody > tr:nth-child(odd){
            background-color: lawngreen;
        }

        td{
            text-align: center;
            vertical-align: bottom;
            height: 100px;

        }
    </style>
</head>

<body>

    <table border="1" width=20% align="center">

        <thead>
            <tr>
                <th>时间</th>
                <th>精力</th>
                <th>生命</th>
            </tr>

        </thead>

        <tbody>
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td></td>
                <td>总计</td>
                <td>100000</td>
            </tr>
        </tfoot>
    </table>

    <form action="text.html">
        文本框：<input type="text" name = "User"><br>
        密码：<input type="password" name = "pass"><br>
        单选：<input type="radio" value="A" name = "choose">
        <input type="radio" value="B" name = "choose"><!--名字相同关联起来表示同一个题目的选项-->
        <input type="radio" value="C" name = "choose"><br>
        多选：<input type="checkbox" value = "A" name = "choose">
        <input type="checkbox" value = "B" name = "choose">
        <input type="checkbox" value = "C" name = "choose">
        <input type="checkbox" value = "D" name = "choose"><br>
        

        下拉选项：
        <select name = "mychoose">
            <option value="A">江西</option>
            <option value="B">湖北</option>
            <option value="C">福建</option>

        </select>

        <input type="submit" name="注册" id="">
        <button type="submit">完成</button>


        
    </form>

  


</body>

</html>

三、制作简易的大学生运动情况调查问卷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .survey{
        width:800px;
        height: 800px;
        margin:0px auto;
        padding-left: 50px;
        background-color:rgba(207, 200, 200, 0.3);

    }
    .title h1{
        padding-left: 150px;
        padding-top: 20px;
        margin-bottom: 50px;
        
    }

    .survey-list{
        line-height: 30px;
    }

</style>
</head>
<body>
    <div class="survey">
        <div class="title">
            <h1>大学生运动情况调查表</h1>
        </div>

        <div class="survey-list">
            <form action="../text.html">
                您的年级是：
                <select name="mychoose" id="">
                    <option value="大一">大一</option>
                    <option value="大二">大二</option>
                    <option value="大三">大三</option>
                    <option value="大四">大四</option>
                    <option value="研一">研一</option>
                    <option value="研二">研二</option>
                    <option value="研三">研三</option>
                    <option value="博士">博士</option>
                </select>

                您的性别：
                <select name="mysex" id="">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>

                <br>
                <br>

                姓名：<input type="text" name="name">
                学号：<input type="text" name="id">
                密码：<input type="password" name="passwrad">

                <br>
                <br>

                1.您运动的频率是（）<br>
                <input type="radio" value="每周一次" name = "frequency">每周一次
                <input type="radio" value="每周2-3次" name = "frequency">每周2-3次
                <input type="radio" value="每周4次" name = "frequency">每周4次
                <input type="radio" value="每周5次" name = "frequency">每周5次
            
                <br>
                <br>
                2.您的常运动时间段是（）<br>
                <input type="radio" value="早上" name = "time">早上
                <input type="radio" value="中午" name = "time">中午
                <input type="radio" value="晚上" name = "time">晚上
                
                <br>
                <br>
                3.你喜欢哪些运动项目（）<br>
                <input type="checkbox" value="跑步" name="like">跑步
                <input type="checkbox" value="骑行" name="like">骑行
                <input type="checkbox" value="游泳" name="like">游泳
                <input type="checkbox" value="瑜伽" name="like">瑜伽
                <input type="checkbox" value="健身房" name="like">健身房
                <input type="checkbox" value="球类" name="like">球类

                <br>
                <br>

                4.您与朋友一起运动吗（）<br>
                <input type="radio" value="独自一人" name = "friend">独自一人
                <input type="radio" value="与好友一起" name = "friend">好友一起
                <input type="radio" value="参与团队" name = "friend">参与团队
                
                <br>
                <br>

                5.你每次运动时长为（）<br>
                <input type="checkbox" value="30分钟" name="last">30分钟
                <input type="checkbox" value="1小时" name="last">1小时
                <input type="checkbox" value="10分钟" name="last">10分钟
                <input type="checkbox" value="2小时" name="last">2小时
                <input type="checkbox" value="0" name="last">0
                <input type="checkbox" value="2小时以上" name="last">2小时以上
                <br>
                <br>

                
                <p>非常感谢您的参与！</p>

                <input type="submit" name="提交" >

                <input type="reset" name = "重置">
            </form>
        </div>
    </div>
    
</body>
</html>