1、web程序设计实验二实验二 HTML表单实验学号:* 姓名:崔兆文1.1 实验目的通过实验掌握HTML的table标签使用方法；利用table进行页面布局。掌握html表单的基本制作方法。1.2 实验要求请完成实验并将实验过程写在下面的实验内容部分，每题要求给出题目、源代码（带必要的注释）以及程序运行效果截图。1.3 实验内容题1：利用表格实现如下登陆界面的布局（整体居中），并利用文本框控件制作用户名和密码输入框，利用按钮控件实现登陆按钮：备注：（1）整个网页有灰色背景（2）表格宽度由第二行图片宽度决定，第一和第三行高度35，第二行放置一个蒲公英的图片作为该行背景，行的高度由图片高度决定（3）
2、第三行放置相应的控件实现类似效果即可。源代码： .align-center text-align: center; position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 用户名： 密码： 用户名和密码与作业提交系统一致copyringht * 运行效果截图：题2：制作如下图所示的居中登陆框效果。备注：（1）表格整体宽度300像素，该表格位于一个div标签中，di
3、v有灰色的边框，表格分若干行（自己决定几行，做出类似效果即可）。（2）点击登录按钮后跳转到如下页面。（该页面使用了一个textarea控件），宽度差不多就行）（3）点击“继续”按钮跳转到如下页面，表格宽度和各列宽度自己定，做出类似效果即可。提示：表格边框色可以在table中添加“bordercolor=”属性实现将上面三个页面的源码，分别粘贴在下面，并将你最终的页面运行效果截图粘贴在下面。源代码：第一个页面： .align-center text-align: center; width: 300px; height: 300px; position:absolute; left:50%; t
4、op:50%; transform: translate(-50%,-50%); div border:1px solid grey; 登入 账号 密码 找回密码 注册账户 第二个页面： 欢迎注册一站网运维平台系统，请详细阅读本协议，需同意后方能继续。 我同意： (function()var cb=document.getElementById(yes);cb.onclick=function() if(cb.checked=true) document.getElementById(继续).disabled=false; else document
5、.getElementById(继续).disabled=true; )();第三个页面： 注册页面 用户名： *不能以数字、下划线开头 密码： *数字和字母的组合 确认密码： *重新输入上面的密码 性别： Man Woman *要慎重选择 技术： java html php Python 运维 *可以多选 国籍： -选择国家- China American English Japan *选择自己所在的国家 验证 运行效果截图：图1.登入界面居中图2.未点同意时“继续”按钮为灰色，无法选中图3.选中同意点击继续后的跳转界面1.4 实验总结 本次实验主要复习了HTML的table的各种标签，以及表单的制作方法（控件和属性）。在这次的实验中，我主要学到东西是如何将表格在页面中整体居中。参考的是网上的一种方法：采用绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了（主要代码见第一题）。 还有就是用js方法控制按钮是否为选中。即判断该按钮的先决条件是否达成。（主要代码见第二题的第二个见面）
