- 石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
- 石家庄邮电职业技术学院社区
学号后四位：0222
在日常生活中，我们经常会做一些调查问卷。当我们学习了Web前端开发技术与应用，我们也可以尝试做一个调查问卷。
比如下图，就是我做的。
知识点
- 首先利用form标签创造表格
- li 中的 value 里面的内容是你所写的内容
- 记住：性别的id需要一样，否则就成了多选，一个人不可能又是男，又是女
- 我们可以把type的类型设置成number，这样的话可以设置最小值和最高值，防止有人随意乱填
- checkbox为复选框，可以多选，可以让人多次选择
- cursor:pointer属性是指在计算机中将鼠标放上或点击时呈现为小手样式
项目名称及描述
项目名称：调查问卷
描述：利用html文件模拟制作调查问卷
项目代码
html文件如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>调查问卷</title><link href="调查问卷.css" rel="stylesheet" type="text/css"/></head><body><form action="#"><ul><li><!--text单行文本输入框--><label>姓名：</label><input class="right" type="text" value="汪一博" maxlength="6"/></li><li><!--日期输入框--><label>出生日期：</label><input class="right" type="date"/></li><li><!--单选框--><label>性别：</label><div class="right"><input type="radio" name="sex" id="sex"/><label>男</label><input type="radio" name="sex" id="sex"/><label>女</label></div></li><li><!--number数值输入域--><label for="">体重：</label><div class="right"><input type="number" min="10" max="100"/>kg</div></li><li><!--checkbox复选框--><label for="">兴趣：</label><div class="right"><input type="checkbox"/>唱歌<input type="checkbox"/>读书<input type="checkbox"/>跳舞<input type="checkbox"/>游泳</div></li><li><label for="">喜欢的颜色：</label><input class="right" type="color" value="#FF0000"/></li><li><!--文件域--><label>上传头像：</label><input class="right" type="file"/></li><li class="advise"><!--您的建议：--><label>您的建议：</label><textarea name="opinion" cols="30" rows="10"></textarea></li><li class="footer"><!--submit提交按钮--><input type="submit"/></li></ul></form></body>
</html>
css文件如下：
form{width: 343px;margin: 0 auto;padding: 30px;border: 1px solid rgba(0,0,0,0.2);border-radius: 5px;background: #EEE;
}ul,li{padding: 0;margin: 0;list-style: none;
}ul li{height: 50px;
}.right{float: right;width: 180px;
}/*当该input元素获得焦点时,设置背景颜色*/
input:focus{background-color: rgba(0,0,0,0.2);overflow: hidden;
}form.footer{text-align: center;
}/*设置当鼠标移动到type=submit按钮上时,鼠标指针变为一只小手形状*/
input[type=submit]{width: 100px;height: 30px;margin-top: 10px;cursor: pointer;
}.advise{height: 150px;
}textarea{width: 100%;height: 100px;
}
