【初级】html教程：写出简单的注册登录界面

最新推荐文章于 2023-10-27 20:53:31 发布

原创最新推荐文章于 2023-10-27 20:53:31 发布 · 3.2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

diversity 同时被 2 个专栏收录

1 篇文章

订阅专栏

html css etc.

1 篇文章

订阅专栏

这篇教程面向初级HTML学习者，介绍如何利用HTML编写一个基础的注册登录界面。教程提供必要的素材和需求说明，并展示相关代码实现。

首先你要有基本素材，需求见图：

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>人人网注册</title>
	</head>

	<body>
		<h4>免费开通人人网账号</h4>
		<form action="#" method="get">

			<table border="0px" cellspacing="0px" cellpadding="2px">
				<tr>
					<th>注册邮箱：</th>
					<td>
						<input type="text" name="email" />
					</td>
				</tr>
				<tr>
					<th></th>
					<td>
						你还可以使用<a href="#">账号</a>注册或<a href="#">手机号</a>注册
					</td>
				</tr>
				<tr>
					<th>创建密码：</th>
					<td>
						<input type="password" name="pwd" />
					</td>
				</tr>
				<tr>
					<th>真实姓名：</th>
					<td>
						<input type="text" name="name" />
					</td>
				</tr>
				<tr>
					<th>性别：</th>
					<td>
						<input type="radio" name="sex" id="sex" value="male" />男
						<input type="radio" name="sex" id="sex" value="female" />女
					</td>
				</tr>
				<tr>
					<th>生日：</th>
					<td>
						<select name="year">
							<option value="1980">1980</option>
							<option value="1981">1981</option>
							<option value="1982">1982</option>
							<option value="1983">1983</option>
						</select>年
						<select name="month">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
						</select>月
						<select name="day">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
						</select>日
					</td>
				</tr>
				<tr>
					<th>我现在：</th>
					<td>
						<select name="status">
							<option value="student">我在上学</option>
							<option value="worker">我在工作</option>
						</select>
					</td>
				</tr>
				<tr>
					<th></th>
					<td>
						<img src="img/verycode.gif"/>  <a href="#">看不清换一张</a>
					</td>
				</tr>
				<tr>
					<th>验证码：</th>
					<td>
						<input type="text" name="verycode" />
					</td>
				</tr>
				<tr>
					<th></th>
					<td>
						<a href="#"><img src="img/btn_reg.gif"/></a>
					</td>
				</tr>
			</table>
		</form>
	</body>

</html>