今天我们来写一个注册页面
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联盟
版权声明：文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除或授权事宜