设计一个用户登录表单-学通PHP http://www.xn--ttss6e.net
  • 生活导航网杭州第一网奎屯门户
  • 本例用Dreamweaver开发工具设计一个用户登录界面,运行结果如图

    具体步骤如下:

    (1)设计用户登录,效果如图所示

    设计一个用户登录表单
    设计一个用户登录表单

    (2)创建一个表单,在表单中添加两个元素,既用户名(name)和密码(pwd),以及两个图像域,既“登录”和“取消”,代码如下:

    <form id="form1" name="form1" method="post" action="">

    <table id="__01" width="452" height="255" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td colspan="7"><img src="images/dl_01.gif" width="452" height="81" alt="" /></td>

    </tr>

    <tr>

    <td rowspan="3"><img src="images/dl_02.gif" width="59" height="173" alt="" /></td>

    <td height="107" colspan="4" align="center" bgcolor="#FEF5CC"><table width="285" height="43">

    <tr>

    <td width="96">用户名:</td>

    <td width="177"><label>

    <input type="text" name="name" />

    </label></td>

    </tr>

    <tr>

    <td>密码:</td>

    <td><label>

    <input type="password" name="pwd" />

    </label></td>

    </tr>

    </table></td>

    <td colspan="2" rowspan="2"><img src="images/dl_04.gif" width="58" height="141" alt="" /></td>

    </tr>

    <tr>

    <td><img src="images/dl_05.gif" width="92" height="34" alt="" /></td>

    <td width="78" height="34"><input type="image" name="imageField" src="images/dl_06.gif" /></td>

    <td width="83" height="34"><input type="image" name="imageField2" src="images/dl_07.gif" /></td>

    <td><img src="images/dl_08.gif" width="82" height="34" alt="" /></td>

    </tr>

    <tr>

    <td colspan="5"><img src="images/dl_09.gif" width="358" height="32" alt="" /></td>

    <td><img src="images/dl_10.gif" width="35" height="32" alt="" /></td>

    </tr>

    <tr>

    <td><img src="images/分隔符.gif" width="59" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="92" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="78" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="83" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="82" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="23" height="1" alt="" /></td>

    <td><img src="images/分隔符.gif" width="35" height="1" alt="" /></td>

    </tr>

    </table>

    </form>

    http://www.xn--ttss6e.net http://www.xn--ttss6e.net
  • 用户登录表单用户登录表单素材