网页表格表单的设计2.docVIP

网页设计上机实验报告 学院名称 管理学院 专 业 （班 级） 姓 名 （学 号） 指 导 教 师 倪丽萍 实验一 1.实验要求：设计一张表格，并在表格当中填充文本，要求样式如下图所示： 第1个单元格 第2个单元格 第3个单元格 第4个单元格 第5个单元格 第6个单元格 实验二 实验要求：设计一个会员注册表单，如下图所示： 实验思路：一开始设计的时候，仅仅只是一行一行的设计下来，这样会导致“用户名”、“密码”这些文本，没有如上图所示的对齐，一开始设计的思路是在这些文本前面加nbsp，空格标记来使这些文本对齐，但是不方便，而且不美观，因此后来采用表格的设计思路，设计一个8行2列的表格，然后将需要填充的文本或者输入域放置到单元格中，再在单元格中设计对齐方式，这样的可以很方便的设计对齐方式。 设计步骤：在body中添加一个form/form表单标记，目的是将表单中的内容看做一个整体。然后设置一下背景颜色，我加了一条长度为800的水平分割线，用hr标记。再添加一个表格标记，设置表格的总体属性width=680 height=302 border=1 cellspacing=0 align=center 。接下来就在单元格中添加需要的文本，或者输入域即可，本实验中需要的输入域有文本域，文本框，密码域，单选域，复选框，以及提交与确认按钮。设置第一列1~6行为右对齐，即可得到上图的效果。在第二列中添加输入域，添加输入域的方法，可以在插入-表单选项中选择相应的输入域，或者直接输入代码。设置输入域的属性，比如输入域的名字，值，以及初始的值。 附实验二代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title我的网页/title /head bodybody bgcolor=lavender h1 align=center填写注册信息/h1 hr/font align=left form action=:8080/jsp method=post table align=center width=800 border=0 cellpadding=3 cellspacing=0 trtd align=right用户名：/tdtd*input type=text name=user用户名由字母开头，后跟字母，数字或者下划线/td/tr trtd align=right密码：/tdtd*input type=password name=password 设置登陆密码，最少六位！/td/tr trtd align=right确认密码：/tdtd*input type=password name=password 请再输入你的密码/td/tr trtd align=right性别：/tdtd*input type=radio name=sex value=Male 男 input type=radio name=sex value=female 女 请选择你的性别/td/tr trtd align=right邮箱地址：/tdtd*input type= text name= mailaddress MAXLENGTH = 20请输入你的常用邮箱，可以用此用邮箱找回密码!/td/tr trtd align=right valign=top 基本情况:/tdtdtextarea name = 个人说明 rows = 8 COLS = 50 [READONLY] /textarea/td/tr trtd/tdtd align=left input type=submit value=提交 align=middle input type=reset value=重置 /td/tr trtd/tdtdinput type=checkbox name=box1 value=[check]我已仔细阅读并同意接受用户使用协议/td/tr /table /form /body /html 实验结果截图： 实验三 1.实验