2020.12.28HTML网站注册案例
作者：互联网
5.网站注册页面:
5.1需求分析:
编写一个HTML页面, 显示效果如图所示
5.2技术分析:
- 表单标签、
<!--
表单标签
action : 直接提交的地址
method :
get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 会将参数封装在请求体中, 没有这样的限制
input :
type: 指定输入项的类型
text : 文本
password : 密码框
radio : 单选按钮
checkbox : 复选框
file : 上传文件
submit : 提交按钮
button : 普通按钮
reset : 重置按钮
hidden : 隐藏域
date : 日期类型
tel : 手机号
number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
select : 下拉列表
option : 选择项
-->
步骤分析:
- logo部分
- 导航栏
- 注册部分
- 页脚图片
- 网站声明信息
5.3代码实现:
<form action="注册入门案例.html">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" placeholder="请再次输入密码"/>
</td>
</tr>
<tr>
<td>email:</td>
<td>
<input type="text" placeholder="请输入邮箱"/>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="请输入真实姓名"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单标签<form
action : 直接提交的地址
method :
get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 会将参数封装在请求体中, 没有这样的限制
input :
type: 指定输入项的类型
text : 文本
password : 密码框
radio : 单选按钮
checkbox : 复选框
file : 上传文件
submit : 提交按钮
button : 普通按钮
reset : 重置按钮
hidden : 隐藏域
date : 日期类型
tel : 手机号
number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
select : 下拉列表
option : 选择项
-->
<form action="../04-网站首页/网站首页.html" method="post" >
<!--隐藏域
主要是用来存放页面上一些ID信息
-->
<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
<!--文本输入框-->
用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
<!--密码框-->
密码: <input type="password" placeholder="请输入密码" /> <br />
确认密码: <input type="password" /> <br />
邮箱: <input type="text" /> <br />
手机号码: <input type="tel" /> <br />
靓照: <input type="file" /> <br />
性别: <input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<input type="radio" name="sex" />妖 <br />
爱好:
<input type="checkbox" />抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头
<input type="checkbox" />撸代码
<input type="checkbox" />大宝剑
<br />
择偶要求:
<textarea cols="40" rows="4"></textarea><br />
籍贯 :
<select>
<option>--请选择--</option>
<option>湖北</option>
<option>内蒙古</option>
<option>火星</option>
</select>
<br />
出生日期:
<input type="datetime-local" /> <br />
验证码: <input type="text" /><br />
<input type="submit" value="注册"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
创建一个5行一列的表格
1. logo部分
2. 导航栏
3. 注册部分
4. 页脚图片
5. 网站声明信息
-->
<table border="1px" width="100%">
<!-- logo部分-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../image/header.jpg" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!---->
<tr bgcolor="black">
<td height="50px">
<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>
<a href="#"><font color="white">香烟酒水</font></a>
</td>
</tr>
<tr>
<td background="../image/regist_bg.jpg" height="500px">
<table border="5px" width="60%" height="80%" bgcolor="white" align="center" >
<tr>
<td>
<form action="注册入门案例.html">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" placeholder="请再次输入密码"/>
</td>
</tr>
<tr>
<td>email:</td>
<td>
<input type="text" placeholder="请输入邮箱"/>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="请输入真实姓名"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../image/footer.jpg" width="100%" />
</td>
</tr>
<!--第八部分: 放一堆超链接-->
<tr>
<td 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>
<br />
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
标签：用户名,密码,验证码,案例,2020.12,注册,出生日期,28HTML,声明 来源： https://blog.csdn.net/qq_40310710/article/details/111876832