使用H5中的表单标签制作一个简单的网页登陆页面_怎样用表格标签制作登录界面-优快云博客

本文链接：https://blog.youkuaiyun.com/aibai666/article/details/121562415

简单介绍H5当中的表单标签。<form></form>表示定义一个表单的开始和结束。在form标签中，有主要的三个属性，action表示声明表单中的数据的处理的url地址。method属性表示定义浏览器将表单中的数据提交给服务器端的方式，有get和post两种方式，默认是get。name属性用于设置表单的名称，一般如果存在多个表单的话为了避免混乱而进行设置的。

在form标签中，常用的子标签就是<input > input具备对表单中的数据进行处理分析和存储等属性。它可以通过设置type来执行表单中不同的操作，常见的type属性有text image submit

以下就是我们需要使用表单来制作出来的效果

由图可分析出此页面由六行三列的表格形成，是表单的形式。所以我们先把整体的轮廓给写出来。这里我只写了六行，至于列的话还没有进行设置。然后我们创建完之后，就可以逐行分析当中的内容，根据图片要求去编写代码

<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="" name="login" method="post">
			<table>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				</table>
			</form>
	</body>
</html>

以下就是最终成果的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="" name="login" method="post">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td bgcolor="orange" colspan="3" width="190">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<font color="white"><b>新用户注册</b></font>
					</td>
				</tr>
				<tr>
				<td height="40">
					<input type="text" name="username" placeholder="用户名" >
				</td>
				<td>
					&nbsp;&nbsp;<font color="red">*</font>
				</td>
				</tr>
				<tr>
					<td height="40">
					<input type="password" name="password" placeholder="密码">
					</td>
					<td>
						&nbsp;&nbsp;<font color="red">*</font>
					</td>
				</tr>
				<tr>
					<td height="40" >
						<input type="password" name="repassword" placeholder="确认密码">
					</td>
					<td>
						&nbsp;&nbsp;<font color="red">*</font>
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="yzm" placeholder="验证码">
					</td>
					<td>
						<input type="image" src="img/getimage.jpg" height="40">
					</td>
					<td>
						<font>点击<a href="">换一张</a></font>
					</td>
				</tr>
				<tr>
					<td align="center">
						<input type="image" src="img/btn_img.png">
					</td>
					<td>
						<font><a href="">《网站服务协议》</a></font>
					</td>
				</tr>
				</table>
			</form>
	</body>
</html>

最终的效果展示如下