文档介绍：长春大学 2015—2016 学年第二学期 W eb 前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件 14402 学号: 041440210 姓名: 王悦任课教师: 车娜 2 实验五 HTML 表单一、实验目的 ,可以快速创建表单。 ,能够创建具有相应功能的表单控件。 ,能够美化表单界面。二、内容及要求使用表单控件,并通过 CSS 控制表单样式制作一个学员档案,其效果如图 6-1 所示,满足以下要求: 。。 6-1 “学员档案” CSS 样式效果三、实验原理表单:是网页上用于输入信息的区域,它的主要功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。创建表单:<form></form> 标记被用于创建一个表单,action 、method 、nam e 为表单标记<form> 的常用属性。 action 属性用于指定接收并处理表单数据的服务器程序的 url 地址。method 属性用于设置表单数据的提交方式,其取值为 get 3 或post 。其中,get 为默认值, 这种方式提交的数据将显示在浏览器的地址栏中, 保密性差,且有数据量的限制。 post 方式的保密性好,并且无数据量的限制, 使用 method="post" 可以大量的提交数据。 input 控件:定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。 select 控件:可以定义下拉菜单效果。其中, <select></select> 标记用于在表单中添加一个下拉菜单, <option></option> 标记嵌套在<select></select> 标记中,用于定义下拉菜单中的具体选项,每对<select></select> 中至少应包含一对<option></option> 。 textarea 控件:定义的多行文本输入框。 cols 和rows 为<textarea> 标记的必须属性,其中 cols 用来定义多行文本输入框每行中的字符数,rows 用来定义多行文本输入框显示的行数,它们的取值均为正整数。 CSS 控制表单样式:使用 CSS 可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。四、实验步骤 1、结构分析“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子<div> 进行整体控制,然后通过<form> 标记定义表单,并在其中嵌套相应的表单控件。另外,由于表单控件属于内块元素,不会单独占据一行,可以通过<p> 标记嵌套表单控件使其独占一行。 2、样式分析(1) 通过最外层的 div 对页面进行整体控制,需要对其设置宽度和高度以及背景图片等。(2) 通过 form 对表单进行整体控制,需要对其设置宽度和内外边距样式。(3) 定义表单标题的样式,主要控制其文本样式及内外边距。(4) 定义各个表单控件的样式,主要控制他们的宽度、高度、文本、背景及边距等。 3、制作页面结构根据上面的分析,可以使用相应的 HTML 标记来搭建网页结构。使用 background 属性设置