web前端开发技术实验报告-实验五

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

web前端开发技术实验报告-实验五

长春大学

20 15 —2016学年第二学期Web前端开发技术课程

实验报告

学院：计算机科学技术专业：软件工程

班级：软件14402

学号：041440210

姓名：王悦

任课教师：车娜

实验五 HTML表单

一、实验目的

1.理解表单的构成，可以快速创建表单。

2.掌握表单相关标记，能够创建具有相应功能的表单控件。

3.掌握表单样式的控制，能够美化表单界面。

二、内容及要求

使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图6-1所示，满足以下要求：

1.学员档案上面的标题和下面的表单两部分构成。

2.标题部分通过标题标记定义。

3.表单部分通过相关的表单控件进行定义

图6-1 “学员档案”CSS样式效果

三、实验原理

表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。

创建表单：

标记被用于创建一个表单，action、method、name为表单标记

的常用属性。action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。post方式的保密性好，并且无数据量的限制，使用method="post"可以大量的提交数据。

input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。

select控件：可以定义下拉菜单效果。其中，标记用于在表单中添加一个下拉菜单，标记嵌套在标记中，用于定义下拉菜单中的具体选项，每对中至少应包含一对。

textarea控件：定义的多行文本输入框。cols和rows为标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。</p><p>CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。</p><p>四、实验步骤</p><p>1、结构分析</p><p>“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子<div>进行整体控制，然后通过<form>标记定义表单，并在其中嵌套相应的表单控件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过<p>标记嵌套表单控件使其独占一行。</p><p>2、样式分析</p><p>(1) 通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背景图片等。</p><p>(2) 通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。</p><p>(3) 定义表单标题的样式，主要控制其文本样式及内外边距。</p><p>(4) 定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边距等。</p><p>3、制作页面结构</p><p>根据上面的分析，可以使用相应的HTML标记来搭建网页结构。使用background属性设置背景图片和设置颜色了。使用<hn>设置标题。用了<div>标签设置了一个盒子，同时根据width、height设置盒子的大小。还应用了<from>标签，来定义表单。</p><p>4、定义CSS样式</p><p>(1) 定义基础样式，应用body等标签全局控制。</p><p>(2) 整体控制页面，定义<div>的样式，以及添加背景图片。</p><p>(3) 整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制。</p><p>(4) 控制表单标题，应用h2标题来定义</p><p>(5) 控制姓名、年龄文本框</p><p>(6) 控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。</p><p>五、实验代码及网页效果图</p><p>1．搭建基本结构</p><p>关键代码如下：</p><p><body></p><p><div class="all"></p><p><form class="list" action="#" method="post"></p><p><h2>传智播客学员档案</h2></p><p><p></p><p><input type="text" value="本人真实姓名" class="txt" /></p><p></p></p><p><p></p><p><input type="text" value="请填写实际年龄" class="age" /></p><p></p></p><p><p class="choose"></p><p><label><input type="radio" name="sex" />男</label></p><p><label><input type="radio" name="sex" />女</label></p><p></p></p><p><p class="choose"></p><p><label><input type="checkbox" />传智老学员</label></p><p><label><input type="checkbox" />朋友推荐</label></p><p><label><input type="checkbox" />视频教程</label></p><p><label><input type="checkbox" />CSDN讨论</label></p><p></p></p><p><p></p><p><select class="course"></p><p><option>JAVA就业班</option></p><p><option selected="selected">网页平面UI设计就业班</option></p><p><option>IOS就业班</option></p> </div> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/054033855.html" target="_blank">web前端开发技术实验报告实验三</a></li> <li><a href="/doc/0a7799062.html" target="_blank">web前端设计与开发-实验目的及要求 (2)</a></li> <li><a href="/doc/113291215.html" target="_blank">最新Web前端技术课程实训报告</a></li> <li><a href="/doc/2d13013912.html" target="_blank">web前端技术课程实训报告 ()</a></li> <li><a href="/doc/3b6415549.html" target="_blank">Web前端技术课程实训报告</a></li> <li><a href="/doc/3611332452.html" target="_blank">WEB前端开发技术实验报告实验九</a></li> <li><a href="/doc/3815765182.html" target="_blank">《Web前端综合实战》实训-课程标准</a></li> <li><a href="/doc/4e4256201.html" target="_blank">Web前端技术课程实训报告</a></li> <li><a href="/doc/475140365.html" target="_blank">web前端开发技术实验报告实验</a></li> <li><a href="/doc/4b7886459.html" target="_blank">WEB前端技术课程实训报告</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/071000073.html" target="_blank">饭店包间名字大全</a></li> <li><a href="/doc/0d10001030.html" target="_blank">word无法创建工作文件,请检查临时环境变量</a></li> <li><a href="/doc/0d10001458.html" target="_blank">自行车健身比赛开幕式讲话词</a></li> <li><a href="/doc/0510001469.html" target="_blank">2018乡村医生个人工作总结</a></li> <li><a href="/doc/0e10002558.html" target="_blank">MySQL测试题 SQL</a></li> <li><a href="/doc/0310002568.html" target="_blank">合勤NXC5200</a></li> <li><a href="/doc/0210004833.html" target="_blank">铁路集中箱空箱调度优化建模案例(案例2)</a></li> <li><a href="/doc/021000530.html" target="_blank">微分几何教学大纲-复旦大学数学科学学院</a></li> <li><a href="/doc/031000596.html" target="_blank">人教版九年级数学上册导学案：24.1.1_圆【精品】</a></li> <li><a href="/doc/0c10006773.html" target="_blank">(整容后办护照用)医院整容证明</a></li> <li><a href="/doc/0e10006860.html" target="_blank">危险废物管理台账</a></li> <li><a href="/doc/0310008420.html" target="_blank">2017年终大会会场物料设计方案</a></li> </ul> </div> </div> <script> var did = "616127984"; var ext = 'doc'; var docId = '1cszqdoxaqxstqo8kgjige2zwqvmfjtg'; var totalPage = 8; const pageNum = '8'; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script>foot()</script> </div> </body> </html>