使用HTML表单和表格完成静态QQ登陆界面

最新推荐文章于 2023-10-27 20:56:50 发布

⑧讲⑤德

最新推荐文章于 2023-10-27 20:56:50 发布

阅读量2.9k

点赞数 8

本文链接：https://blog.csdn.net/weixin_45993305/article/details/103467862

版权

使用HTML表单和表格完成静态QQ登陆界面

一、创建过程

创建表单
创建表格
创建行
创建单元格
创建表单组建

二、原理
使用表单来显示收集用户信息并用表格来帮助排版

三、主要代码

 1.  <table></table>创建表格
 2.  <tr></tr>创建行
 3.  <td></td>创建单元格
 4. <form></form>创建表单
 5. <input></input>传教表单控件

四、主要属性代码
表格属性代码不再演示
input组件:
type:类型
value:值
name：控件的名称
disabled：禁用控件
text：普通的文本框
password：密码框
email：邮箱框
submit：提交按钮
radio 单选
checkbox 多选
image 图片提交
select控件（下拉列表）
size：显示数量如果不为1的话则变成滚动列表而不是下拉列表
option : selected:
文本域

五、主要代码及注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p align="center"><img src="img/bg.jpg" width="50%" /></p>/*插入图片设置图片宽度并把图片居中*/
		<form action="" method="post">/*设置提交地址并指定传输方式为隐式传输*/
		<table border="0" width="600px" height="480px" cellpadding="6" cellpadding="0" align="center">/*创建表格并设置表格总宽高 设置内边距为6并将表格居中*/
		  <tr>
			 <td width="250" align="right">邮箱账号</td>/*设置单元格宽度并让内容靠右对齐*/
			 <td><input type="text" /> </td>/*设置input组件类型为普通文本框*/
		</tr>
         <tr>
			<td align="right">昵称</td>
			<td><input type="text" /> </td>
		</tr>
		<tr>
		<td align="right">密码 </td>
		<td><input type="password" /></td>/*设置input组件为密码框*/
		</tr>
		<tr >
		<td align="right">确认密码 </td>
		<td><input type="password" /></td>
		</tr>
		<tr>
		<td align="right">性别</td>
		<td><input type="radio" name="sex" />男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" />女 </td>/*设置input组件为单选框并让用户只能选择一个选项*/
		</tr>
		<tr>
		<td align="right">生日</td>
		<td><select name="">
				<option value="">公历</option>/*设置下拉列表并设置文本域*/
				</select>
				<select name="">
				<option value="">年</option>
				</select>
				<select name="">
				<option value="">月</option>
				</select>
				<select name="">
				<option value="">日</option>
				</select>
				</td>
				</tr>
				<tr>
				<td align="right">所在地</td>
				<td>
				<select name="">
				<option value="">中国</option>
				</select>
				<select name="">
				<option value="">湖北</option>
				</select>
				<select name="">
				<option value="">武汉</option>
				</select>
				</td>
				</tr>
				<tr>
				<td align="right">验证码</td>
				<td ><input type="text"/>
				<img src="img/getimage.jpg" height="40" width="60"  align="center" />
				<a href="QQ.html">点击换一张</a></td>/*使用A标签来设置换图片 因为本网页为静态 不做了解*/
				</tr>
		</table>
		<p align="center"><input type="checkbox" id="rad" /><label for="rad">我已阅读并且同意条款</label></p>/*设置input组件为多选框并使用关联文本控件将文字和input组件关联*/
				<p align="center"><input type="image" src="img/btn.jpg" /></p>/*设置input组件为图片提交*/
		</form>
	</body>
</html>

六、效果图
在这里插入图片描述