其他分享
首页 > 其他分享> > 2020.12.28HTML网站注册案例

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 : 选择项
		-->

步骤分析:

  1. logo部分
  2. 导航栏
  3. 注册部分
  4. 页脚图片
  5. 网站声明信息

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