问卷调查页面的设计与实现

问卷调查页面的设计与实现

功能要求：
1.用户可以根据调查问题进行单选、多选以及在结尾处填写姓名、职位和联系电话等信息。
2. 每个输入栏目的文本框均需要显示提示信息。
3. 用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。
实现效果图：

一、界面设计
1.使用<div>划分区域
2.使用CSS外部样式表定义样式
1）questionnaire.css
2）关键属性：box-shadow: 10px 10px 15px black;
二、表单设计
1.使用<form>形成表单区域
2. 使用有序列表标签<ol>设计问题样式
3. 使用<input>标签设计问题选项
1）type=radio：单选题
2）type=checkbox：多选题

4.使用<input>标签设计个人信息填写栏目
1）type=text：姓名、职位
2）type=tel：联系电话

5.使用<button>标签设计问卷提交按钮
1)type=submit
三、验证功能的实现
1.使用标签的required属性实现单选框的非空验证

<li>您的教育程度是？</li>
<label><input type="radio" name="q1" value="q1_1" required />高中 </label>

2.使用标签的required属性实现个人信息栏的非空验证

<label>您的姓名<input type="text"  name="name" required /></label>

3.使用JavaScript自定义函数实现多选框的非空验证
1）questionnaire.js
2）自定义函数checkbox(name)

//获取指定name名称的同组所有复选框元素
 var checkbox = document.getElementsByName(name);
 //遍历选项组中的所有选项
 for(var i=0; i<checkbox.length;i++){
  //判当前断是否有选中的选项
  if(checkbox[i].checked){
    ……

//调用checkBox(name)函数判断第4题的情况
 var q4 = checkBox("q4");  
 if(q4==false){
  alert("第4题起码要选择一个选项。");
  return false;
 } 

3）监听提交表单的动作

<form method="post" action="URL" onsubmit="return check()">
    ……（内容省略）
</form>

四、部分代码

<li>您的教育程度是？</li>
                    <label>
                        <input type="radio" name="q1" value="q1_1" required />
                        高中 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_2" required />
                        大专 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_3" required />
                        本科 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_4" required />
                        硕士研究生 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_5" required />
                        博士及以上 </label>

备注：完整代码请下载附件
https://download.csdn.net/download/YQEMMMM/12999087