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

最新推荐文章于 2023-10-29 10:33:04 发布
最新推荐文章于 2023-10-29 10:33:04 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： 早期编程语言基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647903/article/details/107999767
版权

一、意义：

这部分高级的使用肯定是应该与数据库结合使用，这里只是简单介绍其基本属性，后面会有一篇简易的调查问卷小练习
<!--
    表格；
    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>
尚墨1111
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Creative-Agency-Website:一个简单的静态响应式网站，使用html，css和一些JS进行表单提交
03-26
创意机构网站
纯CSS实现漂亮的提交表单
01-21
很漂亮的CSS提交表单，大家先看看 CSS代码： CSS Code复制内容到剪贴板 body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }       /* tutorial */      input, textarea {      padding: 9px;     border: solid 1px #E5E5E5;     outline: 0;     font: normal 13px/100% Verdana, Ta
CSS教程:网页表单设计技巧
09-27
“输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》　　Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方
HTML学习2（表单、表格、框架）
灰太狼的小秘密
03-17 802
一、表单 1、表单概述 网页中的表单可以用来收集用户填写的信息，如调查问卷、注册会员等。表单是个容器，表单里面的元素有文本框、密码框、单选框和复选框等。表单是一种数据提交的方法。 表单中的子元素又叫做表单控件。表单结构中，同一种表单控件可以添加多个，表单控件有一个name属性，必须赋予不同的名字，用于标识不同的控件。 （1）表单的基本语法 格式：<form></form...
html+css基础：问卷调查页面
qq_45387575的博客
01-17 2629
<!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&gt...
csssr:CSSSR - 问卷
06-10
cssr CSSSR - 测试任务 计划： 安装 咕噜声 ... 利润
07 css案例（学校官网首页、调查问卷）
最新发布
snowy_and_sunny的博客
10-29 99
【代码】07 css案例（学校官网首页、调查问卷）
调查问卷表单
dhdjssjshw的博客
10-23 618
表单元素的运用
【HTML5】调查问卷制作简约版
热门推荐
我的主页
11-25 1万+
本期讲解：date属性、radio属性、checkbox属性、textarea标签、required属性、button标签的用法，以及实现一个简易的调查问卷。
大学生暑假社会实践调查问卷(HTML+CSS)
小滕的Java学习旅途
11-29 4237
效果图显示 HTML+CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>调查问卷</title> <style type="text/css"> #div1{ width: 610px; height: 1050px; background-color: #EC4144; margin: 0 au.
基于jQuery实现的问卷调查样式
06-12
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px; font: 12.0px 'Heiti SC Light'; color: #323333} span.s1 {font-kerning: none} 效果描述： 简单易用的问卷调查插件，支持页面响应式   使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
create-tailwindcss-boilerplate::wind_face:一个简单的 Tailwind CSS 样板
07-24
创建 Tailwind CSS 样板一个简单的 Tailwind CSS 样板。 它创建了一个简单的 HTML + CSS 模板，支持 ，由提供服务，并在生产版本中使用 。入门要求建议使用，但不是必需的。 如果没有找到 Yarn，该项目将使用进行...
表单：调查问卷
hd_wwb的博客
10-29 1787
学有所思，学有所获，学有所得。 在接下来的日子里，我们共同分享学习的点滴，加油！ 知所从来，思所将往，方明所去。
HTML 基础
mzpqq的博客
04-30 752
目录
ESP32 M5 超级问卷星：轻松收集数据
铁熊玩创客
05-29 1084
作者：默不知不觉疫情已持续 3 年了，最近门卫王大爷很苦恼，因为领导要求所有进入单位的人员与车辆按照防疫要求进行登记，登记的内容有来访人员的车牌号、姓名、性别、体温、联系电话、被访人及其进入单位的时间 等。大爷年纪大了，有些时候记性也不太好，登记时经常会卡壳，每次都要向来访人员询问老半天，后面来访的人员看着不知所措的王大爷也有些无奈，毕竟大爷就是你大爷，又不能催促，只能老...
调查表样式设计
weixin_30292843的博客
05-30 298
　　调查表样式设计： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he...
表单和表格
m0_72958052的博客
08-25 210
tr:代表着行 td:设置单元格：th:单元格表头caption:标题cellspacing:设置边框合并cellpadding:设置内容离边框的距离单元格里面内容居中：水平方向：text-align:left/center/right;垂直方向： vertical-align:top/middle/bottomrowspan:合并纵向单元格colspan:合并行向单元格：合并单元格时注意点：合并时多余要删掉；表格的结构标签会改变内容位置；书写位置无关、thead：代表表格前面。...
用vue vantui 写一个问卷调查提交表单
05-28
好的，下面是使用Vue和Vant UI编写问卷调查提交表单的基本流程： 1. 首先，在Vue项目中安装Vant UI并引入相关组件： ``` npm i vant -S ``` ```javascript import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) ``` 2. 创建一个包含问卷调查问题的表单组件，其中可以使用Vant UI的各种表单组件，例如`van-radio-group`、`van-checkbox-group`、`van-field`等等。 ```html <template> <van-form @submit="onSubmit"> <van-radio-group v-model="answer1" label="问题1"> <van-radio :name="1" label="答案1">答案1</van-radio> <van-radio :name="1" label="答案2">答案2</van-radio> <van-radio :name="1" label="答案3">答案3</van-radio> </van-radio-group> <van-checkbox-group v-model="answer2" label="问题2"> <van-checkbox :name="2" label="答案1">答案1</van-checkbox> <van-checkbox :name="2" label="答案2">答案2</van-checkbox> <van-checkbox :name="2" label="答案3">答案3</van-checkbox> </van-checkbox-group> <van-field v-model="answer3" label="问题3"></van-field> <van-button type="primary" native-type="submit">提交</van-button> </van-form> </template> <script> export default { data() { return { answer1: '', answer2: [], answer3: '' } }, methods: { onSubmit() { // 提交问卷调查表单 } } } </script> ``` 3. 在表单组件中添加提交表单的方法，可以通过Ajax或者其他方式将表单数据提交到后端服务器。 ```javascript methods: { onSubmit() { const formData = { answer1: this.answer1, answer2: this.answer2, answer3: this.answer3 } // 发送表单数据到后端服务器 axios.post('/api/submit-form', formData).then(response => { // 处理提交成功的情况 }).catch(error => { // 处理提交失败的情况 }) } } ``` 4. 最后，在Vue项目中使用该表单组件。 ```html <template> <div> <QuestionnaireForm /> </div> </template> <script> import QuestionnaireForm from './QuestionnaireForm.vue' export default { components: { QuestionnaireForm } } </script> ``` 以上就是使用Vue和Vant UI编写问卷调查提交表单的基本流程。如果您有任何问题，可以随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值