第6章-表格与表单-补充案例(1)

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训1第六章补充案例案例6-6简单的用户登陆界面一、案例描述1、考核知识点input控件2、练习目标熟悉表单的构成掌握form标记的用法理解form标记相关属性掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性3、需求分析在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。4、案例分析1)最终实现效果，如图6-11所示。图6-1登陆界面2）分析效果图，具体实现步骤如下：a)定义表单域。b)定义用于输入用户名的单行文本输入框。c)定义密码输入框。d)定义用于输入验证码的单行文本输入框。e)定义登陆按钮。第1章Java开发入门2二、案例实现图6-2简单的登陆界面案例6-7简单的交规考试答卷一、案例描述1、考核知识点input控件2、练习目标熟悉表单的构成掌握form标记的用法掌握input控件属性中单选框和复选框属性熟悉label标记的使用方法3、需求分析浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。4、案例分析1)最终实现效果，如图6-13所示。传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训3图6-3交规考试答卷效果2）分析效果图，具体实现步骤如下：a)定义一个名为“交通考试选择题”的h3标题。b)定义表单域c)使用p标记定义单选题的题干。d)使用input标记的单选按钮属性定义选项。e)使用p标记定义多选题的题干。f)使用input标记的复选框属性定义选项。二、案例实现案例6-8制作字符批量替换工具界面一、案例描述1、考核知识点textarea控件2、练习目标掌握textarea控件的使用方法掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性3、需求分析当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的textarea/textarea控件，来创建多行文本输入框。为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的案例做具体演示。4、案例分析1)最终实现效果，如图6-15所示。第1章Java开发入门4图6-4字符批量替换工具界面效果2）分析效果图，具体实现步骤如下：a)定义表单域。b)通过p标记定义标注文本“查找”。c)通过textarea控件定义多行文本框。d)通过p标记定义标注文本“替换为”。e)通过textarea控件定义第二个多行文本框。f)使用input标记的复选框属性定义三个复选框。g)定义提交按钮、重置按钮和普通按钮。二、案例实现新建HTML页面，代码如下：案例6-9制作简单的游戏选区界面一、案例描述1、考核知识点select控件2、练习目标掌握select控件的使用方法掌握下拉菜单分组选项的制作方法掌握input控件属性中的按钮属性3、需求分析在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的案例，对下拉菜单的用法做具体演示。传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训54、案例分析1)最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。图6-5游戏选区界面效果图6-6点击下拉菜单图6-7点击下拉菜单2）分析效果图，具体实现步骤如下：a)定义表单域b)定义用于游戏选区的下拉菜单c)定义用于选择线路的下拉菜单d)使用input标记的按钮属性定义确定和取消按钮二、案例实现新建HTML页面，代码如下：案例6-10CSS美化表单一、案例描述1、考核知识点CSS控制表单样式2、练习目标熟悉表格布局的基本原理掌握input控件的常用属性熟悉fieldset标记的用法复习CSS基本样式属性3、需求分析制作网页时，为了让页面更加美观、便于维护，经常会使用CSS对表单样式进行控制。为了便于初学者的理解和掌握，接下来，通过一个案例演示CSS美化表单的具体方法。4、案例分析1)最终实现效果，如图6-21所示。图6-8简单的邮箱选区界面2）分析效果图，具体实现步骤如下：第1章Java开发入门6A.定义表单域，并填充大的背景图片。B.定义表单内容分组，并确定分组名称为“个人注册”。C.定义一个3行2列的表格换份表单结构。D.在第一行第一列和第二行第一列输入提示信息。E.在第一行第二列和第二行第二列各定义一个单行文本，用于输入用户信息。F.在第三行第二列设置按钮，并填充背景图片。二、案例实现1、制作页面结构新建HTML页面，代码如下：2、定义CSS样式使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：图6-9CSS美化表单在本案例中，通过filedset/filedset标记可以将表单内容分组，并且使用其配套标记legend/legend为各个表单组定义名称。