第5课 登录和注册页面的Html实现(一)
第5课登录页面的Html实现
本课实训目标：
学习在MyEclipse中的Html静态页面制作技术，利用表单及其控件标签实现学生在线论坛的登录的Html页面。
本课实训内容：
教授初学者初次了解在MyEclipse开发环境中编写Html静态网页内容的步骤和方法，复习并回复Html的标记语法内容，本次练习内容为在在线论坛项目中实现登录和注册页面。
练习步骤一：登录页面 Login.html实现
首先打开在线论坛项目目录，在WebRoot目录的user子目录中找到Login.html，并点击打开该文件进行编辑，如图1，图2.
图1 在线论坛项目结构
网页设计
窗体网页编辑工
具栏
图2 MyEclipse中的网页编辑模式
步骤二：为编辑登录对话框添加表单
登录页面的作用是接收用户输入并且提交给程序进行处理，而只有form表单能够将用户输入内容提交给应用程序或者下一个网页。编写form表单如图3，图4。
图3 在Login.html中创建表单（一）
图4 在Login.html创建表单（二）
步骤三：在表单域中添加4行2列的
图5 在表单中添加表格结构（一）
图6在表单中添加表格结构（二）
步骤三：在表格中添加标签文本
方法是直接在网页设计窗体中点击表格单元，编辑内容即可，如图7
图7 编辑登录页面的信息标签
步骤四：添加用户名输入的文本框控件
首先点击网页设计窗体中要放置文本框控件的位置，然后打开右边网页工具栏（Palette）的
图8 添加用户名输入的文本框控件（一）
选择
图9 添加文本控件标签
步骤五：添加密码框标签
同步骤四，在表格的第二行，第二列位置添加一个密码框标签，该密码框标签为
图10 添加密码框控件标签
图11 拥有用户名和密码输入框的登录页面
步骤五：添加“确定”、“重置”表单按钮和“我要注册”的超链接在网页工具栏中选择
的用户输入提交给表单action事件所指定的网页或者是应用程序，如图12，图13。
图12 添加“确定”按钮（一）
图13 添加“确定”按钮（二）
在网页工具栏中再次选择
用户输入清空或者设置为默认内容状态，如图14，图15。
图14 添加表单内容“重置”按钮（一）
图15 添加表单内容“重置”按钮（二）
设置“我要注册”超文本链接，首先如图15输入“我要注册”的文本，并且使
之处于选中状态，而后选择网页工具栏中的“Hyperlink”标记，在打开的对话框中输入要链接到网页的URL为“AddUser.html”，Title标题可以不设，其作用为用户鼠标在网页中划过该超链接时显示的提示内容，另外Target内容不选，使用默认方式，如图16，图17，图18。
图16 设置“我要注册”的超文本链接（一）
图17 设置“我要注册”的超文本链接（二）
图19 设置“我要注册”的超文本链接（三）
当然同学们也可以选择Visual Stdio2010或者Dreawaver编写出此登录网页再拷贝到项目的捷径方法，不过就缺少了学习MyEclipse工具的机会。
另外，本人建议学习者更加尝试着直接在网页代码编辑框中直接利用Html 标记来编写以上网页程序，这样能更加强化对网页编程的理解和掌握，内容如下：
步骤六：运行网页
将MyForum项目加载到Tomcat6.x的服务器中，如图20。然后启动服务器，打开浏览器并在地址栏中输入http://localhost:8080/MyForum/user/Login.html，我们将看到登录页面的显示，如图21。
图20添加MyForum项目到Web服务器中
图21 运行的MyForum项目中的登录页面