用html和js做一个登录/注册界面,不连接数据库,这个案例用到了js的引入,form表单结合表格的布局,以及登录界面常用的密码的隐藏与实现的方法。
进入正题,先看我们的成型案例:如下图
案例大概就是这个样子,讲道理,开始写代码之前得来一波案例分析。
首先,宏观看布局,然后局部看细节。布局来看这个界面的组成也很简单,有六个输入框,一个单选框,一个多选框,以及几个按钮。宏观布局首先抛开功能看界面,分析界面的组成,可以用两种方法实现,css和表格。我们采用表格的方式做布局,然后要将输入框及按钮放入表格中,大概就是这么个样子:
我用了一个15行3列的表格作为容器(其实2列就可以,习惯预留一列做扩充),当然的,表格大小看个人喜好,15行30行什么的你开心就好。
具体代码不写,只给你们写写简单的思路,看懂多少看你们造化了(→_→):
当然我们的主要思路是表单和表格的结合,所以你需要先套一下,像这样
<form>
<table>
</table>
</form>
然后让我们来瞅瞅代码(全部都是开个头,细节需要你们自己完善)
表格的第二行:
<tr>
<td>姓名</td>
<td><input type="text"></td>
</tr>
表格的第三行:
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
表格的第四行:同上
五、六略。
表格的第七行:
<tr>
<td>性别</td>
<td><input type="radio" name="sex">男
<input type="radio" name="sex">女</