注册页面显示
注册（表单）页面显示
需求:
设计一个表单页面,用来收集用户的数据
技术分析:
表单标签
表单标签★★★（重点）
<form></form>
作用:
用来从浏览器端收集用户的信息.
表单代码（标签、属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
姓名：<input name="username" /><br>
密码：<input type="password" name="password" /><br>
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女
<br>
爱好：<input type="checkbox" name="hobby"/>吃
<input type="checkbox" name="hobby"/>喝
<input type="checkbox" name="hobby" checked="checked"/>睡
<br>
头像：<input type="file" name="photo"/><br>
籍贯：<select name="pro">
<option value="01" selected="selected">云南</option>
<option value="02">广东</option>
<option value="03">陕西</option>
<option value="04">北京</option>
<option value="05">四川</option>
</select>
<select name="city">
<option >--请选择--</option>
<option value="0101">春城昆明</option>
<option value="0301">古城西安</option>
<option value="0102">边城腾冲</option>
<option value="0501">浪漫成都</option>
<option value="0401">首都北京</option>
</select>
<br>
自我介绍：<textarea name="intr" cols="100">请填写</textarea><br>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body>
</html>
<!--
作者：YGD
时间：2018-09-22
描述：
表单
常用属性：
action:信息提交的路径，默认是当前页面
method：表单的提交方式
只需要掌握两种
get（默认）和post
get和post的区别：
1.get请求会把素所有参数追加到地址栏上，post请求不会
2.get请求参数大小有限制，post请求参数大小没有限制
3.post相对于get安全点
常用标签：
input
select：下拉选
textarea：文本域
input标签
常用属性：
type：
text：文本框默认
password：密码框
radio：单选框
checkbox：多选框
file：文本框
submit：提交
reset：重置
button：普通按钮
hidden：隐藏域 在页面上不显示 提交的时候可以提交过去
image：图片提交 替代submit
name:
可以将几个单选框（复选框）设置成一组
要想将信息保存到服务器，必须有name属性
readonly:
readonly = "readonly" 只读
disabled：
disabled = "disabled" 禁用
select:下拉选
格式：
<select name="pro">
<option>彩云之南</option>
</select>
textarea：文本域
常用属性：
cols： 列
rows： 行
提交到服务器上的内容的格式：
key = value&
对于文本框密码框文本域 手写的内容传递过去了
对于单选框和多选框来说去没有把值传过去，要想传过去，必须设置value属性
对于下拉选要想把选中的内容传递过去，必须设置value属性
默认值：
文本框、密码框：只需要添加value属性
单选框、多选框：需要添加checked = ”checked“;
下拉选：添加 selected = “selected”
当我们输入值，提交时发现地址栏变化
-->
步骤分析:
- 在页面中间添加一个表格
- 10行3列表格
- 在表格中添加表单表单子标签
注册页面代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="100%" height="100px">
<!--八行一列-->
<!--
logo一行三列表格
-->
<tr>
<td>
<table width="100%">
<td>
<img src="../img/商城.jpg"/>
</td>
<td align="center">
<img src="../img/header.jpg"
</td>
<td align="right">
<a href="#">登录 </a>
<a href="#">注册 </a>
<a href="#">购物车 </a>
</td>
</table>
</td>
</tr>
<!--菜单-->
<tr>
<td bgcolor="black" height="40px">
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">其他商品</font></a>
</td>
</tr>
<!--
作者：offline
时间：2018-09-23
描述：表单页面
-->
<tr>
<td background="../img/regist_bg.jpg">
<form action="#" method="get">
<table border="1" width="50%" align="center" height="600px" bgcolor="aliceblue">
<tr>
<td>用户名</td>
<td colspan="2"><input name="username"></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><input name="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td colspan="2"><input name="password"></td>
</tr>
<tr>
<td>邮箱</td>
<td colspan="2"><input type="email" name="email"></td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2"><input name="name"></td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td colspan="2"><input type="date" name="date"></td>
</tr>
<tr>
<td>验证码</td>
<td colspan="2"><input name ="identifying code"></td>
</tr>
</table>
</form>
</td>
</tr>
<!--一张图片-->
<tr width="100%">
<td >
<img src ="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--版权root
两个段落
-->
<tr width="100%">
<td>
<p align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
</p>
<p align="center">
Copyright © 2017-2018 幸运商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>