实验二HTML表单实验学号:092715206 姓名:崔兆文1.1 实验目的通过实验掌握HTML的table标签使用方法；利用table进行页面布局。
掌握html表单的基本制作方法。
1.2 实验要求请完成实验并将实验过程写在下面的实验内容部分，每题要求给出题目、源代码（带必要的注释）以及程序运行效果截图。
1.3 实验内容题1：利用表格实现如下登陆界面的布局（整体居中），并利用文本框控件制作用户名和密码输入框，利用按钮控件实现登陆按钮：备注：（1）整个网页有灰色背景（2）表格宽度由第二行图片宽度决定，第一和第三行高度35，第二行放置一个蒲公英的图片作为该行背景，行的高度由图片高度决定（3）第三行放置相应的控件实现类似效果即可。
源代码：<html><head><meta charset="UTF-8"><title></title><style>.align-center{text-align: center;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}</style></head><body bgcolor="#8B8386"><div class="align-center"><form><table border="1" cellspacing="1" cellpadding="1"align="center" ><tr><td height="35" bgcolor="blue"></td></tr><tr><td><img src="img/img1.jpg" height="100%"></td></tr> <tr><td height="35" bgcolor="blue" align="center"> <font color="white" >用户名：<input type="text" size="7"> 密码：<input type="password"size="7"></font> <input type="submit" value="登入"/></td></tr><tr><td bgcolor="dodgerblue" align="center"height="80px"><font color="white" >用户名和密码与作业提交系统一致<br/>copyringht ~***********</font></td></tr></table></form></div></body></html>运行效果截图：题2：制作如下图所示的居中登陆框效果。
备注：（1）表格整体宽度300像素，该表格位于一个div标签中，div有灰色的边框，表格分若干行（自己决定几行，做出类似效果即可）。
（2）点击登录按钮后跳转到如下页面。
（该页面使用了一个textarea控件），宽度差不多就行）（3）点击“继续”按钮跳转到如下页面，表格宽度和各列宽度自己定，做出类似效果即可。
提示：表格边框色可以在table中添加“bordercolor=…”属性实现将上面三个页面的源码，分别粘贴在下面，并将你最终的页面运行效果截图粘贴在下面。
源代码：第一个页面：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.align-center{text-align:center;width:300px;height:300px;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}div{border:1px solid grey;}</style></head><body><div class="align-center"><form><table border="0" cellspacing="0" cellpadding="3"width="300px"><tr><td bgcolor="orange" align="center" height="55px">登入</td></tr><tr><td align="center" height="100px">账号 <input type="text" placeholder="账号/手机/邮箱"></br></br>密码 <inputtype="password" placeholder="请输入密码"></td></tr><tr><td align="center" height="100px"><ahref="pac2.html"><input type="button" value="登入" style="width: 200px; height: 30px;"></a></br></br><input type="button" value="创建新账号" style="width: 200px; height: 30px;"></td></tr><tr><td align="center"><font size="2">找回密码 注册账户</font></td></tr></table></form></div></body></html>第二个页面：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form><textarea cols="30" rows="10" wrap="hard" readonly="yes"readonly="readonly">欢迎注册一站网运维平台系统，请详细阅读本协议，需同意后方能继续。
</textarea></br>我同意：<label><input type="checkbox" id="yes" /></label><a href="pac3.html"><input type="button" id="继续" value="继续" disabled="true"></a><a href="题2.html"><input type="button" value="退出"></a></body><script type="text/javascript">(function(){var cb=document.getElementById("yes");cb.onclick=function(){if(cb.checked==true){document.getElementById("继续").disabled=false;}else{document.getElementById("继续").disabled=true;}}})();</script></html>第三个页面：<html><head><meta charset="UTF-8"><title></title></head><body><form method="post"><table border="1" bordercolor="#0099ff" cellpadding="10px" cellspacing="0"><tr><th colspan="3">注册页面</th></tr><tr><td>用户名：</td><td><input type="text" name="name" value="--请输入用户名--"/> </td><td><font color="#FF0000">*不能以数字、下划线开头</font></td> </tr><tr><td>密码：</td><td><input type="password" name="password" /></td><td><font color="#FF0000">*数字和字母的组合</font></td></tr><tr><td>确认密码：</td><td><input type="password" nam="password" /></td><td><font color="#FF0000">*重新输入上面的密码</font></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="nan"checked="checked"/>Man<input type="radio" name="sex" value="nv" />Woman</td><td><font color="#FF0000">*要慎重选择</font></td></tr><tr><td>技术：</td><td><input type="checkbox" name="technology"value="java"/>java<input type="checkbox" name="technology"value="html"/>html<input type="checkbox" name="technology" value="php"/>php <input type="checkbox" name="technology"value="Python">Python<input type="checkbox" name="technology" value="运维">运维 </td><td><font color="#FF0000">*可以多选</font></td></tr><tr><td>国籍：</td><td><select name="country"/><option value="none">---选择国家---</option><option value="cn">China</option><option value="usa">American</option><option value="en">English</option><option value="jp">Japan</option></td><td><font color="#FF0000">*选择自己所在的国家</font></td></tr><tr><th colspan="3"><input type="button" name="submit" value="提交" /></a> <input type="reset" name="reset" value="重置" /><button>验证</button></th></tr></table></form></body></html>运行效果截图：图1.登入界面居中图2.未点同意时“继续”按钮为灰色，无法选中图3.选中同意点击继续后的跳转界面1.4 实验总结本次实验主要复习了HTML的table的各种标签，以及表单的制作方法（控件和属性）。