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

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

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

<!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>

上一篇:H5页面调用移动端相机拍照


下一篇:入职 6 个月,被裁员。。