利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面
form表单
先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:
页面结构大体就是这样子的~
表单标签:
<form action="#" method="">
所有需要提交到服务器端的表单项必须使用<form></form>包起来~
form标签的属性:
action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码)
method:表单的提交方式(get/post)
文本输入框:
<input type="text"/ >
密码输入框:
<input type="password" />
单选按钮:
<input type="radio" />
多选按钮:
<input type="checkbox"/>
主意:在这边需要用name属性给按钮分一下组~
下拉列表:
<select name="province">
<option>--请选择--</option>
<option>选项</option>
</select>
文本输入域:
<textarea></textarea>
提交按钮:
<input type="submit" value="注册" />
重置按钮:
<input type="reset" value="重置" />
普通按钮:
<input type="button" value="普通按钮" />
上面的注册页面不是那么好看,下面我们用上次学过的表格标签(<table>)来修饰一下这个页面~
下面是修改后的页面的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form action="#" method="post">
<table border="0px" width="600px" height="400px" align="center" cellpadding="0px" cellspacing="0px">
<tr height="40px" >
<td colspan="2">
<font size="4" ><b>用户注册 USER REGISTER</b></font>
</td>
</tr>
<tr>
<td align="center"><b>用户名</b></td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td align="center"><b>密码</b></td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td align="center"><b>确认密码</b></td>
<td><input type="password" name="rpassword"/></td>
</tr>
<tr>
<td align="center"><b>Email</b></td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td align="center"><b>姓名</b></td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td align="center"><b>性别</b></td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="center" ><b>出生日期</b></td>
<td> <input type="text" name="birthday" size="30px"/></td>
</tr>
<tr>
<td align="center"><b>验证码</b></td>
<td> <input type="text" name="yzm" />
<img src="../img/yzm.png" width="60" height="30"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</form>
</table>
</body>
</html>
注意哦~这边会有一道面试题的
Get 与 Post 提交方式的区别?
Get(默认)提交方式,
所有的内容显示的地址栏,不安全,长度有限制.
Post提交方式,
所有的内容不会显示在地址栏,比较安全,长度没有限制.
我是萌新娜娜
立志做一个不翻车的老司机
学习Java的路上请多多指教
扩展阅读
来源:Java联盟
版权声明:文章来源网络,版权归作者本人所有,如侵犯到原作者权益,请与我们联系删除或授权事宜