HTML（五）

最新推荐文章于 2024-07-26 23:24:05 发布

原创最新推荐文章于 2024-07-26 23:24:05 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #HTML注册页面

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了一个HTML注册页面的设计过程，包括需求分析、技术选型及代码实现。文章深入讲解了表单元素的使用，如text、password、radio、checkbox等，并展示了如何布局页面和设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5.网站注册页面:

5.1需求分析:

编写一个HTML注册页面, 显示效果如图所示

5.2技术分析:

表单标签


            表单标签
                action : 直接提交的地址
                
                method : 
                        get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                        post 方式  会将参数封装在请求体中, 没有这样的限制
                        
            
            input :
             type: 指定输入项的类型
                    text : 文本
                    password :  密码框
                    radio :     单选按钮
                    checkbox :  复选框
                    file     : 上传文件
                    submit   : 提交按钮
                    button   : 普通按钮
                    reset    : 重置按钮
                    hidden  : 隐藏域
                    
                    date    : 日期类型
                    tel     : 手机号
                    number   : 只允许输入数字
                    
               placeholder : 指定默认的提示信息
               name : 在表单提交的时候,当作参数的名称
               id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
            
            textarea : 文本域, 可以输入一段文本
                        cols : 指定宽度
                        rows : 指定的是高度
            
            select  : 下拉列表
                option : 选择项

步骤分析:

logo部分

导航栏

注册部分

页脚图片

网站声明信息

5.3代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
	</head>
	<body>
		<!--
			创建一个一行三列的表格
        	1. logo部分
			2. 导航栏
			3. 注册部分
			4. 页脚图片
			5. 网站声明信息
        -->
        <table  width="100%">
        	<tr>
        		<td>
        			<table  width="100%" >

        				<tr align="center">
        					<td>
        						<img src="../img/logo.jpg" height="44px"/>
        					</td>
        					<td>
        						<img src="../img/header.jpg" />
        					</td>
        					<td>
        						<a href="#">登录</a>
        						<a href="#">注册</a>
        						<a href="#">购物车</a>
        					</td>
        				</tr>
        			</table>
        		</td>
        	</tr>
        	<tr bgcolor="black">
        		<td height="50px">
					<a href="#"><font color="white"><b>首页</b></font></a>
					<a href="#"><font color="white"><b>手机数码</b></font></a>
					<a href="#"><font color="white"><b>鞋靴箱包</b></font></a>
					<a href="#"><font color="white"><b>电脑办公</b></font></a>
					<a href="#"><font color="white"><b>香烟酒水</b></font></a>
				</td>
        	</tr>
        	
        	<tr>
        		<td background="../ProductsImg/regist_bg.jpg" height="500px">
        			<table border="5px" width="60%" height="80%" bgcolor="white" align="center">
        				<tr>
        					<td>
        						<table width="60%" align="center">
        							<tr>
        								<td colspan="2"><font color="blue" size="5"><b>会员注册 USER REGISTER</b></font></td>
        							</tr>
	    							<tr>
	    								<td><font>用户名</font></td>
	    								<td>
	    									<input type="test" placeholder="请输入用户名" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>密 码</font></td>
	    								<td>
	    									<input type="password" placeholder="请输入密码" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>确认密码</font></td>
	    								<td>
	    									<input type="password" placeholder="请确认密码" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>emil</font></td>
	    								<td>
	    									<input type="email" placeholder="请输入邮箱" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>姓名</font></td>
	    								<td>
	    									<input type="test" placeholder="请输入真实姓名" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>性别</font></td>
	    								<td>
	    									<input type="radio" name="sex"/>男
	    									<input type="radio" name="sex"/>女
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font>出生日期</font></td>
	    								<td>
	    									<input type="date" />
	    								</td>
	    							</tr>
	    							<tr>
	    								<td><font></font></td>
	    								<td>
	    									<input type="submit" value="注册" />
	    								</td>
	    							</tr>
        						</table>
        					</td>
        				</tr>
        			</table>
        		</td>
        	</tr>
        	
        	<tr>
				<td>
					<img src="../ProductsImg/footer.jpg"  width="100%"/>
				</td>
			</tr>
			<!--第八部分: 放一堆超链接-->
			<tr>
				<td align="center">
					<a href="#"><font color="blue">关于我们</font></a>
					<a href="#"><font color="blue">联系我们</font></a>
					<a href="#"><font color="blue">招贤纳士</font></a>
					<a href="#"><font color="blue">法律声明</font></a>
					<a href="#"><font color="blue">友情链接</font></a>
					<a href="#"><font color="blue">支付方式</font></a>
					<a href="#"><font color="blue">配送方式</font></a>
					<a href="#"><font color="blue">服务声明</font></a>
					<a href="#"><font color="blue">广告声明</font></a>
					<p><font size="1">Copyright © 2015-2016 网站商城 版权所有</font></p>
				</td>
			</tr>
        </table>
	</body>
</html>