模块6 制作网站的会员注册页面-实训指导书

模块6制作网站的会员注册页面实训任务指导书【实训目的】.掌握创建表单的方法；.理解get和post两种提交方式的区别；.掌握常用输入组件的使用方法；.掌握表单元素的使用方法；.掌握表单元素的常用属性。.熟练使用CSS样式美化表单外观，设置不同的表单效果。【实训内容】实训任务1：制作班级网站中调查问卷【任务描述】制作班级网站中“大学生对食堂要求的问卷调查”，并设置问卷中各元素不同样式。问卷中包含单选按钮、复选框、文本输入框和提交按钮等，页面效果如图教材220页。【实训任务指导】.使用有序列表＜。1＞定义问卷中4个问题。.应用表单中单选按钮、复选框、文本输入框和按钮等元素制作表单。.使用＜li＞的border-bottom设置4个问题的分隔线，掌握表单中各种按钮的制作。实训任务2：制作班级网站中邮箱注册页面【任务描述】制作班级网站中邮箱注册页面，熟练创建表单元素，并设置表单元素样式，灵活应用表格技术设置页面结构，页面效果如图教材224页6-22所示。【实训任务指导】.整体使用DIV+CSS布局页面的左右结构，左侧使用表格＜table＞创建11行2列的表单布局结构，右侧使用背景图技术显示图像。.通过跨行合并rowspan属性，跨列合并colspan属性，调整表格行列结构。.使用CSS为文本输入框、密码框、复选框、按钮等表单元素设置各自样式。实训任务3：制作电子邮箱中发送邮件页面【任务描述】制作电子邮箱中发送邮件的页面效果如图教材226页6-23所示，用户发送邮件时，在“收件人”输入框中输入收件人地址，在“主题”输入框中输入邮件主题，单击“添加附件”的“选择文件”按钮，可以选择本地文件作为附件上传，邮件编辑框暂且模拟邮件正文效果，然后在页面顶端的四个按钮中选择操作功能，并单击相应按钮。【实训任务指导】.整体页面分成上中下结构，自上而下铺出画面结构，然后逐步细化。.对“免费邮箱”标题头的制作，综合应用各种标记及细腻的样式设置。.对“发送”、“预览”等四个按钮的制作，此处使用＜span＞标记，是实际开发中制作按钮的常见技术应用。.邮件题头处，“收件人”、“主题”使用〈input,标记的单行文本输入类型制作，“添加附件”使用文件上传域类型制作。实训任务4：制作班级网站的用户注册页面【任务描述】本实训任务制作班级网站的用户注册页面，在页面中对表单元素的类型、属性充分实践应用。初始状态时，页面效果如图教材229页6-24(a)所示；当用户将光标定位到邮箱、密码输入框时，即输入框获得焦点时，输入框动态加长，如果输入的内容不符合验证要求，即输入无效时，输入框的边框颜色变为红色，提示图标变为warning警告图标如图教材229页6-24(b)所示；如果必填项目输入的内容符合验证要求，即必填项目输入有效时，输入框边框变为绿色，提示图标变为right正确图标如图教材229页6-24(c)所示；当鼠标悬浮在提交按钮上时,按钮背景色、前景色发生相应变化如图教材229页6-24(d)所示。【实训任务指导】.用户注册表单使用U1无序列表布局，将邮箱输入框和密码输入框的required属性设置为必填项。.对邮箱输入框、密码输入框做相同的样式设置，可以通过标签属性过滤选择，也可以通过id集合选择，还可以定义为同类，通过类选择器选择，然后进行统一定义。.对于按钮初始状态和鼠标悬浮状态的样式变化，通过对按钮的初始状态设置样式和伪类hover设置样式。.对邮箱输入框、密码输入框获得焦点时设置样式，通过伪类focus设置样式。.对输入框设置类选择器的:focus:invalid,即在同类的基础上，选取focus状态下的无效