ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

H5创建一个简单的qq注册页面

2021-11-28 12:35:04  阅读:169  来源: 互联网

标签:qq 创建 表单 密码 nbsp 改图 H5 com 页面


 该图就是最终要完成的效果,简单分析一下改图的整体结构,以及需要用到的标签及属性。这里我是直接创建一个表单,然后在表单中创建一个十行一列的表格。以下为最终效果的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/bg.jpg">
		<form action="" method="get">
			<table border="0" cellspacing="0">
				<tr>
					<td height="30">
					邮箱账号:&nbsp;&nbsp;<input type="text" name="邮箱账号">
					
					<!--创建邮箱下拉选框-->
						<select>
							<option>QQ.com</option>
							<option>163.com</option>
							<option>jd.com</option>
							<option>126.com</option>
						</select>
					</td>
				</tr>
				<tr>
					<td height="30">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					昵称:&nbsp;&nbsp;<input type="text" name="昵称" placeholder="请输入昵称">
					</td>
				</tr>
				<tr>
					<td height="30">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					密码:&nbsp;&nbsp;<input type="password" name="password" placeholder="请输入密码">
					</td>
				</tr>
				<tr>
					<td height="30">
					确认密码:&nbsp;&nbsp;<input type="password" name="repassword" placeholder="确认密码">
					</td>
				</tr>
				<tr>
					<td  height="30">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					性别:&nbsp;&nbsp;<input type="radio" name="sex" value="man">男
						<input type="radio" name="sex" value="woman">女
					</td>
				</tr>
				<tr>
					<td height="30">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						生日&nbsp;&nbsp;
						
						<!--创建年历下拉选框-->
						<select>
							<option value="1">公历</option>
							<option value="2">农历</option>
						</select>
						
						<!--创建年份下拉选框-->
						<select name="year">
							<option value="1">2001</option>
							<option value="2">2002</option>
							<option value="3" selected="selected">2003</option>
							<option value="4">2004</option>
						</select>
							
						<!--创建月份下拉选框-->
						<select name="month">
							<option value="1">一月</option>
							<option value="2">二月</option>
							<option value="3">三月</option>
							<option value="4">四月</option>
							<option value="5" selected="selceted">五月</option>
						</select>
							
						<!--创建具体天数下拉选框-->
						<select name="day">
							<option value="1">一日</option>
							<option value="2">二日</option>
							<option value="3">三日</option>
							<option value="4">四日</option>
							<option value="5" selected="selected">五日</option>
						</select>
						
						<!--通过定义option标签中selected的值为selected即可使得该项为默认展示的项-->
					</td>
				</tr>
				<tr>
					<td height="30">
						&nbsp;&nbsp;&nbsp;&nbsp;
						所在地&nbsp;
						
						<!--创建国籍下拉选框-->
						<select name="国籍">
							<option value="1">中国</option>
							<option value="2">美国</option>
							<option value="3">俄罗斯</option>
						</select>
						
						<!--创建省份下拉选框-->
						<select>
							<option value="1">北京</option>
							<option value="2" selected="selected">湖南</option>
							<option value="3">湖北</option>
							<option value="4">江苏</option>
						</select>
						
						<!--创建市级下拉选框-->
						<select>
							<option value="1" selected="selected">长沙</option>
							<option value="2">东城区</option>
							<option value="3">武汉</option>
							<option value="4">南京</option>
							</select>
					</td>
				</tr>
				<tr>
					<td height="30">
					&nbsp;&nbsp;&nbsp;&nbsp;
					验证码 &nbsp;<input type="text" name="验证码" placeholder="请输入验证码">
					<input type="image" src="img/getimage.jpg" height="30">
					</td>
				</tr>
				<tr>
					<td height="50">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="checkbox" name="选择框" value="re">
						<font>我已阅读并同意各项<a href="">服务条款</a></font>
					</td>
				</tr>
				<tr>
					<td align="center">
					<input type="image" src="img/btn.jpg" height="40">
					</td>
				</tr>
				</table>
			</form>
	</body>
</html>

标签:qq,创建,表单,密码,nbsp,改图,H5,com,页面
来源: https://blog.csdn.net/aibai666/article/details/121588719

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有