制作一个注册表单页面

制作一个表单注册页面

在Dreamweaver中创建一个.html文件，添加一个11行2列的表格，左侧的内容是手动输入（第一行也手动输入），右侧的内容是用代码来写的（最后一行也是用代码来写）（用代码写的原因是，不会用Dreamweaver操作）

表单页面的处理

（1）制作注册表单代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册页面</title>
<style type="text/css">
<!--
body {font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;background: #42413C;margin: 0;padding: 0;color: #000;
}/* ~~ 元素/标签选择器 ~~ */
ul, ol, dl { /* 由于浏览器之间的差异，最佳做法是在列表中将填充和边距都设置为零。为了保持一致，您可以在此处指定需要的数值，也可以在列表所包含的列表项（LI、DT 和 DD）中指定需要的数值。请注意，除非编写一个更为具体的选择器，否则您在此处进行的设置将会层叠到 .nav 列表。 */padding: 0;margin: 0;
}
h1, h2, h3, h4, h5, h6, p {margin-top: 0;	 /* 删除上边距可以解决边距会超出其包含的 div 的问题。剩余的下边距可以使 div 与后面的任何元素保持一定距离。 */padding-right: 15px;padding-left: 15px; /* 向 div 内的元素侧边（而不是 div 自身）添加填充可避免使用任何方框模型数学。此外，也可将具有侧边填充的嵌套 div 用作替代方法。 */
}
a img { /* 此选择器将删除某些浏览器中显示在图像周围的默认蓝色边框（当该图像包含在链接中时） */border: none;
}
/* ~~ 站点链接的样式必须保持此顺序，包括用于创建悬停效果的选择器组在内。 ~~ */
a:link {color: #42413C;text-decoration: underline; /* 除非将链接设置成极为独特的外观样式，否则最好提供下划线，以便可从视觉上快速识别 */
}
a:visited {color: #6E6C64;text-decoration: underline;
}
a:hover, a:active, a:focus { /* 此组选择器将为键盘导航者提供与鼠标使用者相同的悬停体验。 */text-decoration: none;
}/* ~~ 此固定宽度容器包含其它 div ~~ */
.container {width: 960px;background: #FFF;margin: 0 auto; /* 侧边的自动值与宽度结合使用，可以将布局居中对齐 */
}/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符，该占位符应替换为您自己的链接徽标 ~~ */
.header {background: #ADB96E;
}/* ~~ 这是布局信息。 ~~ 1) 填充只会放置于 div 的顶部和/或底部。此 div 中的元素侧边会有填充。这样，您可以避免使用任何“方框模型数学”。请注意，如果向 div 自身添加任何侧边填充或边框，这些侧边填充或边框将与您定义的宽度相加，得出 *总计* 宽度。您也可以选择删除 div 中的元素的填充，并在该元素中另外放置一个没有任何宽度但具有设计所需填充的 div。*/.content {padding: 10px 0;
}/* ~~ 脚注 ~~ */
.footer {padding: 10px 0;background: #CCC49F;
}/* ~~ 其它浮动/清除类 ~~ */
.fltrt {  /* 此类可用于在页面中使元素向右浮动。浮动元素必须位于其在页面上的相邻元素之前。 */float: right;margin-left: 8px;
}
.fltlft { /* 此类可用于在页面中使元素向左浮动。浮动元素必须位于其在页面上的相邻元素之前。 */float: left;margin-right: 8px;
}
.clearfloat { /* 如果从 #container 中删除或移出了 #footer，则可以将此类放置在 <br /> 或空 div 中，作为 #container 内最后一个浮动 div 之后的最终元素 */clear:both;height:0;font-size: 1px;line-height: 0px;
}
.container .content table tr td {text-align: center;
}
-->
</style></head><body><div class="container"><div class="header"><a href="#"><img src="../-4d42e892d4bfcb98.jpg" alt="在此处插入徽标" name="Insert_logo" width="150" height="150" id="Insert_logo" style="background: #C6D580; display:block;" /></a> <!-- end .header --></div><div class="content"><!-- end .content --><form action="userRegister_process.php" method="post" name = "form1" id = "form1"><table width="900" border="5"><tr><td colspan="2">用户注册</td></tr><tr><td width="187">用户名</td><td width="689"><input name = "user" type = "text" value="Amy" size = "12"/></td></tr><tr><td>密&nbsp;&nbsp;码</td><td><input name = "password" type = "password" value="123456" size = "12"/></td></tr><tr><td>性&nbsp;&nbsp;别</td><td><input name = "sex" type = "radio" value="male" />男<input name = "sex" type = "radio" value="female" checked = "checked"/>女</td></tr><tr><td>出生年月日</td><td> <input name = "birthday" type = "text" value="2004-05-21"size = "25" />(例如2004-05-21)</td></tr><tr><td>兴趣爱好</td><td><input name = "hobby[]" type = "checkbox" value="看书" checked />看书<input name = "hobby[]" type = "checkbox" value="听音乐" checked />听音乐<input name = "hobby[]" type = "checkbox" value="运动" checked />运动<input name = "hobby[]" type = "checkbox" value="看电影" checked />看电影<input name = "hobby[]" type = "checkbox" value="购物" checked />购物</td></tr><tr><td>专&nbsp;&nbsp;业</td><td><select name = "major" id = "major"><option value = "信息管理与信息系统" >信息管理与信息系统</option><option value = "会计" >会计 </option><option value = "英语"selected >英语 </option><option value = "商务英语" >商务英语 </option></select></td></tr><tr><td>喜欢的课程</td><td><select name = "course[]" id = "course[]"size = "4" multiple><option value = "社会心理学" >社会心理学</option><option value = "市场营销" >市场营销 </option><option value = "英语笔译" >英语笔译 </option><option value = "英语口译" >英语口译 </option></select></td></tr><tr><td>个人照片</td><td><input name = "zhaopian" type = "file" id = "zhaopian" size = "18"/></td></tr><tr><td>个人简介</td><td><textarea name = "jianjie" cols = "20" rows = "4" id = "jianjie" wrap = "hard">我这个人很懒，什么都不想写！！！</textarea></td></tr><tr><td colspan="2" align="center"><input name = "userid" type = "hiden" value = "001" />&nbsp;<input name = "tj_btn" type = "submit" id = "tj_btn" value = "提交" />&nbsp;<input name = "cz_btn" type = "reset" id= "tj_btn" value = "重置" />&nbsp;<input name = "pt_btn" type = "button"  id = "pt_btn" value = "按钮" />&nbsp;<input type = "image" src = "search2.jpg" name = "button3" id = "button3" />&nbsp;</td></tr></table></form></div><div class="footer"><p><strong>感谢您的到来！！</strong></p><!-- end .footer --></div><!-- end .container --></div>
</body>
</html>

（2）表单页面处理的代码

  <?phpecho"您的用户名是：".$_POST["user"]."<br>";echo"您的密码是：".$_POST["password"]."<br>";echo"您的性别是：".$_POST["sex"]."<br>";echo"您的出生年月是：".$_POST["birthday"]."<br>";echo"您的兴趣是：";for($i = 0;$i < count($_POST[hobby]);$i++){echo $_POST[hobby][$i]."&nbsp;&nbsp;";}echo"<br>您的专业是：".$_POST["major"]."<br>";echo"您喜欢的课程是：";for($i = 0;$i < count($_POST[course]);$i++){echo $_POST[course][$i]."&nbsp;&nbsp;";}echo"<br>您的照片：".$_POST["zhaopian"]."<br>";echo"您的简介：".$_POST["jianjie"]."<br>";echo"您的编号是：".$_POST["userid"]."<br>";?>

刚开始“喜欢的课程”那里表单元素的名字course有几个地方写错成cuorse，表单处理页面“您喜欢的课程：”后面没有内容出现。找了好久的错误······o(╥﹏╥)o