Web前端开发练习 | 您所在的位置:网站首页 › 网页问卷调查制作方法 › Web前端开发练习 |
以前自己跟着网上捣鼓过两个小的静态网站,这学期正式开始学HTML啦,学校可能教得比较慢,用的也是HTML语言(而不是火热的HTML5),但是毕竟初学者,还是从爬开始比较好,业余时间我也会进一步学习的! 本次练习主要是制作一款问卷调查:主要利用表单的几个标签和属性。 开发平台:Myeclipse 语言:HTML CSS 1. 建立工程文件夹 File - New - Web Project 我建立的是静态网页html,命名为Questionaire.html, 并建立了对应的样式文件Qmaster.css。最终呈现效果: 然后,我们开始写表单里面的具体内容:写内容 3.1 标题html有6个标题款可以选 - , 定义最大的标题。 定义最小的标题。 class是命名属性,咱们给这个标题一个名字以后,就可以统一到css文件中设置样式了,这部分我们最后讲,咱们先把主体写完。 是换行符,顾名思义。 校园涂鸦问卷调查 3.2 内容1 我们把接下来的主体部分放到盒子里面,统一装方便管理,也就是属性。 2 利用表单标签表单内容制作表单。 3 编辑“主体信息栏” 标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式,可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。我们在着部分用到的就是text文本和radio选项属性。 其中,radio表示是单选按钮,但是需要注意的是,要让他起作用必须让两个选项的name一致才可以。 value属性就是指这个项所代表的值,用户看到的是male和female选项,而即后台收到的是nan或nv的值。 表示下拉列表,是下拉列表的选项 姓名: 性别 : male; female 学院: 选择 国际传媒学院 涉外法政学院 国际商学院4 问题部分 问题部分遇到的和上面主体信息栏基本一致,除了第四题中出现了复选框,也就是可以多选啦,那么只要把type的样式设置成checkbox即可。 第4题 有以下涂鸦地点(包括但不限于墙绘)可供选择,你希望画在哪里?(多选) 宿舍楼内; 食堂; 操场; 教学楼; 主马路;5 提交&&修改按钮 也很简单,就是把type改成submit和reset即可。(reset是把表单的值重置为默认值,中文里我写的“修改”貌似意思不太对) 这样整一个问卷调查表的内容部分我们就做好啦,但是没有美化过的调查表是没有人看的,就像下面这样:
我们给它起个名字叫ques,那么我们在css中设置的格式是一个点+名字,花括号里面写样式属性。 color设置字体颜色,font-family设置字体的样式,text-align设置字体放的位置,当然还有其他很多的属性也可以往里加,看需求~ .ques { color: #34699a; font-family: impact; text-align:center; }效果: 参考文献:http://www.w3school.com.cn (这个网站是国内的,正宗的在国外,但是我没有梯子/哭,有条件的同学可以去国外网站看看正宗的。) |
CopyRight 2018-2019 实验室设备网 版权所有 |