Web前端开发练习-问卷调查
以前自己跟着网上捣鼓过两个小的静态网站,这学期正式开始学HTML啦,学校可能教得比较慢,用的也是HTML语言(而不是火热的HTML5),但是毕竟初学者,还是从爬开始比较好,业余时间我也会进一步学习的!
本次练习主要是制作一款问卷调查:主要利用<form>
表单的几个标签和属性。
开发平台:Myeclipse
语言:HTML CSS
1. 建立工程文件夹
File - New - Web Project 我建立的是静态网页html,命名为Questionaire.html, 并建立了对应的样式文件Qmaster.css。
2. 构建整体的布局
最终呈现效果:对应在MyEclipse中的代码部分截图:
3. 开始码代码
首先将Qmaster.css连接到html文件中,方便统一对网页样式进行调整, <link>
标签顾名思义就是用来链接各种文档的啦, ref
属性代表当前文档与被链接文档之间的关系,比如我们现在用的 stylesheet
就表示文档的外部样式表,它还有其他的属性,具体可以参见:
http://www.w3school.com.cn/tags/att_link_rel.asp。
而 href
就是指链接文档的具体位置,我们现在的文件就在同一目录下,所以只要写文件名(即相对路径)即可,你也可以写成绝对路径,但是并不建议,因为整个项目移动以后绝对路径会变化,修改很麻烦。
<link rel="stylesheet" href="Qmaster.css">
然后,我们开始写表单里面的具体内容:<body>写内容</body>
3.1 标题
html有6个标题款可以选<h1> - <h6>
,<h1>
定义最大的标题。<h6>
定义最小的标题。
class是命名属性,咱们给这个标题一个名字以后,就可以统一到css文件中设置样式了,这部分我们最后讲,咱们先把主体写完。
<br>
是换行符,顾名思义。
<H1 class="ques">校园涂鸦问卷调查</H1> <br>
3.2 内容
1 我们把接下来的主体部分放到盒子里面,统一装方便管理,也就是<div></div>
属性。
2 利用表单标签<form>表单内容</form>
制作表单。
3 编辑“主体信息栏”
<input>
标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式,可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。我们在着部分用到的就是text
文本和radio
选项属性。
其中,radio
表示是单选按钮,但是需要注意的是,要让他起作用必须让两个选项的name
一致才可以。
value
属性就是指这个项所代表的值,用户看到的是male
和female
选项,而即后台收到的是nan
或nv
的值。
<select></select>
表示下拉列表,<option></option>
是下拉列表的选项
姓名:<input class="opstyle" type="text"><br>性别 :<input type="radio" name="sex" value="nan"> male <input type="radio" name="sex" value="nv"> female<br>学院:<select class="opstyle"><option class="kongop" value="0">选择</option><option value="1">国际传媒学院</option><option value="2">涉外法政学院</option><option value="2">国际商学院</option></select>
4 问题部分
问题部分遇到的和上面主体信息栏基本一致,除了第四题中出现了复选框,也就是可以多选啦,那么只要把type的样式设置成checkbox
即可。
第4题 有以下涂鸦地点(包括但不限于墙绘)可供选择,你希望画在哪里?(多选)<br><input type="checkbox" value="1" > 宿舍楼内 <br><input type="checkbox" value="2" > 食堂 <br><input type="checkbox" value="3"> 操场 <br><input type="checkbox" value="4" > 教学楼 <br><input type="checkbox" value="5" > 主马路 <br><br>
5 提交&&修改按钮
也很简单,就是把type改成submit和reset即可。(reset是把表单的值重置为默认值,中文里我写的“修改”貌似意思不太对)
<input class="tijiao"type="submit" value="提交"><input class="tijiao" type="reset" value="修改"><br>
这样整一个问卷调查表的内容部分我们就做好啦,但是没有美化过的调查表是没有人看的,就像下面这样:
全部粘在左边,字体也很小,现在我们去Qmaster.css文件里面修改样式
3.3 样式
class 属性的用法是,在html标签中命名以后,到css样式文件中设置相应的属性,且只要名字class名字相同,它设置的样式就会是一样的。 比如,标题:
<H1 class="ques">校园涂鸦问卷调查</H1> <br>
我们给它起个名字叫ques,那么我们在css中设置的格式是一个点+名字,花括号里面写样式属性。
color
设置字体颜色,font-family
设置字体的样式,text-align
设置字体放的位置,当然还有其他很多的属性也可以往里加,看需求~
.ques
{color: #34699a; font-family: impact;text-align:center;
}
效果:
其他的也是如此,就赘述啦~
至此,我们就把整个调查问卷的壳写完啦,但是我们我们还不能用,因为就算我们填完了点提交,她会提交到哪里呢?这还需要我们进一步的设置,这一点过几天更新呀~
参考文献:http://www.w3school.com.cn
(这个网站是国内的,正宗的在国外,但是我没有梯子/哭,有条件的同学可以去国外网站看看正宗的。)
Web前端开发练习-问卷调查相关推荐
- 【web前端开发】什么是前端?
文章目录 浅谈前端 初识 造物 浅谈前端 初识 前端是什么?⽆论是带团队还是教学⽣时,都有很多的⼈问过我这个问题. 如果你要问的是 JavaScript 是什么,CSS是什么,HTML是什么,我可能会 ...
- HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
web前端开发技术期末大作业 网页规划与制造,做得不深 但是还是满足期末大作业的 分享一下 题目: 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定 ...
- 读书笔记:编写高质量代码--web前端开发修炼之道(二:5章)
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 参加web前端开发培训具体要学什么内容
学习web前端技术不是一天两天就能学会的,想要成为一名合格的web前端工程师,一定要进行系统的培训学习,那么下面小编就为大家详细的介绍一下参加web前端开发培训具体要学什么内容? 参加web前端开发培 ...
- 零基础如何掌握web前端开发技能
很多零基础学员想要进入到互联网行业都会选择web前端做首选技术语言来学习,但是学习web前端不是那么容易的,想要成为一名合格的web前端工程师,所要掌握的技能一定要会,下面小编就为大家详细的介绍一下零 ...
- 学习web前端开发要注意什么
web前端的发展前景有目共睹,越来越多的人都对web前端这门编程语言非常感兴趣,想要学习web前端技术,那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧. ...
- 学好web前端开发要注意哪些问题
web前端学起来是比较困难的,当然想要学好web前端技术,那么有一些注意事项一定是要看的,下面小编就为大家详细的介绍一下学好web前端开发要注意哪些问题? 学好web前端开发要注意哪些问题? 基础 ...
- web前端开发培训有哪些学习阶段
web前端技术主要针对于移动互联网是比较多的,对于零基础的同学来说前期主要学习基本的静态布局,HTML + CSS,下面是web前端开发培训有哪些学习阶段的具体内容. web前端开发培训有哪些 ...
最新文章
- 发现一个很奇怪的现象,MyBaits 的 insert方法一直返回-2147482646
- 微信小程序开发2——数据绑定、控制属性
- UA MATH575B 数值分析下 统计物理的随机模拟方法5
- 中间人攻击之DNS欺骗
- idea中删除java类并提交_IDEA 删除java类的3种提示
- 为什么Linux登录后显示“-bash-3.2#”-转
- Lesson5 How to open a new window from a pushbutton
- Laravel 不权威导航
- matlab 颜色代码 大全_空客 | 红、绿、蓝、白,各类颜色代码的含义
- VC++6.0下编译xvidcore1.1.0
- 《Python金融大数据风控建模实战》 第15章 神经网络模型
- 如何将学堂在线(安卓)APP视频保存到本地并重命名
- python文件或目录损坏且无法读取,data\sogoupy\verify.ini已损坏且无法读取,啥意思?谢谢?...
- 推荐一款HTML在线编辑器
- [codeforces 760B]Frodo and pillows
- Appium架构介绍与环境安装
- “秒懂”索引下推!原来索引下推这么简单!
- mono for andriod 自动提示输入控件AutoCompleteTextView
- C++中static_cast, dynamic_cast, const_cast用法/使用情况及区别解析
- AFNetworking的基本使用