专栏首页算法与编程之美前端|如何制作调查问卷

前端|如何制作调查问卷

问题描述

随之时代的进步,电子文档逐渐代替了纸质文档。电子文档不仅方便提交反馈而且便于存放。现在很多的公司、学校都会做许多调查(市场调查,学习调查等),为了便于收集,大多数都采用网页调查问卷。那么如何通过网页制作一张调查问卷呢?

解决方案

调查问卷简而言之就是一张表单,所以要制作一张调查问卷就需要掌握表单的一些标签。例如单选按钮、复选框、文本框以及提交按钮这些基本标签。再根据整个页面的排版来设置标签的属性,让问卷美观。

涉及网页的一些基本标签在这就不一一描述,下面主要介绍表单的标签

(1)单选按钮

<form>表单标签

<input type="radio"> 标签定义了表单单选框选项

name:规定识别表单的名称

value:表示该单选框的真实值(一般真实值和数据库对应,显示值给用户参考的)

<br>换行

表1

<form> <input type="radio" name="text" value="公募运作管理规范……">公募运作管理规范……<br> <input type="radio" name="text" value="公募基金有比较强……">公募基金有比较强……<br> <input type="radio" name="text" value="公募基金投资门槛……">公募基金投资门槛……</form>

图1

(2)复选框

<input type="checkbox"> 定义复选框. 用户需要从若干给定的选择中选取一个或若干选项。

表2

<form> <input type="checkbox" name="text" value="产品设计理念">产品设计理念<br> <input type="checkbox" name="text" value="投资思路">投资思路<br> <input type="checkbox" name="text" value="基金经理介绍">基金经理介绍<br> <input type="checkbox" name="text" value="购买渠道">购买渠道<br> <input type="checkbox" name="text" value="购买费单">购买费单</form>

图2

(3)文本框

<input type="text">定义文本框

font-size:15pt 定义文本框字的大小

<textarea rows="5" cols="30"> 定义窗体中加入多少列的文字。

表3

<form> <p> 姓名: <input style="width:110px;height:28px;font-size:15pt;"type="text" name="姓名"> </p> <p> 手机: <input style="width:180px;height:28px;font-size:15pt;" type="text" name="手机"> </p> <p> 地址: <input style="width:250px;height:28px;font-size:15pt;"type="text" name="地址"> </p> 建议: <textarea rows="5" cols="30" style="font-size:15pt"></textarea></form>

图3

(4)提交按钮

<input type="submit"> 定义了提交按钮.

action="" 定义输入数据传送到的地址

空格占位

表4

<form action="" > <input type="button" value="提交"> <input type="button" value="重置"></form>

图4

结语

调查问卷的制作需要掌握很多的表单标签,在设置文本框的时候要合适的调整框的大小和容纳量。在写代码的时候一定要注意缩进,每个部分要区分开来,确保其可读性和美观性。这样也是为了后续的检查。

END

主 编 | 王文星

责 编 | 江汪霖

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java|写一个用迭代法解方程的Java程序

    迭代法也称辗转法,是一种逐次逼近方法,在使用迭代法解方程组时,其系数矩阵在计算过程中始终不变。它利用计算机运算速度快、适合做重复性操作的特点,让计算机对一组指令...

    算法与编程之美
  • Python基础 | 快速实现命令行参数解析

    Python由于语法非常简洁,第三方库支持较多,因此大量的应用于编写脚本程序批处理解决一些任务。而编写的Python程序通常情况下在命令行中运行,并且会加上参数...

    算法与编程之美
  • Python|defaultdict与dict的差异

    在collections模块中的defauldict使用时与dict有何不同,为何我们用dict中的key值不存在时会报错,而defaudict不会报错,下面做...

    算法与编程之美
  • HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-/...

    二十三年蝉
  • flex布局 div盒子居中

    kirin
  • php 页面传递数组元素

    <form action="a.php"> <input type="text" name="books[]"/> <input type="tex...

    WindWant
  • log4net记录日志到数据库自定义字段

    public string Mobiles { get; set; }

    guokun
  • 用Eclipse开发Struts实例-G

    package com.meixin.beans; public class Guestbook { private int id; priva...

    py3study
  • HTML5表单及其验证

    将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对...

    HUC思梦
  • CSS实现表单

    skylark

扫码关注云+社区

领取腾讯云代金券