Web前端（二）HTMLHTML&css（上）table+form 创建表单

最新推荐文章于 2024-07-31 18:14:15 发布

馬冬梅啊

最新推荐文章于 2024-07-31 18:14:15 发布

阅读量1.1k

点赞数 6

分类专栏： Web前端 Web前端文章标签： html css Web前端

本文链接：https://blog.csdn.net/weixin_39782583/article/details/83932505

版权

Web前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Web前端

22 篇文章 0 订阅

订阅专栏

Day2：HTML&CSS 2018/11/10

在这里插入图片描述
html 网站注册页面_表单标签属性 table
效果图：

在这里插入图片描述

源代码：

注意点：

每个标签后面都要加name=" " 或者value="",方便后台获取数据；
placeholder、checked、selected 都是可以预先帮用户选取信息的属性，具体看源代码；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<form action="#" method="get">
			姓名&nbsp;<input type="text" name="username" size="3" maxlength="5"  placeholder="请输入姓名"/><br />
			性别&nbsp;<input type="radio"  name="sex" value="man" checked="checked"/>man
					 <input type="radio" name="sex" value="woman"/>woman<br />
					 
		    密码<input type="password" name="密码" placeholder="请输入密码" required="required"/><br/>
			年龄&nbsp;<input type="text" name="年龄"  placeholder="请输入年龄"/><br />
			头像 <input type="file" name="头像" />
			<br/>
			<br/>
		
			自我介绍： <textarea name="自我介绍" >
				</textarea>
			<br />
			住址&nbsp;<select name="province" ><br  />
				<option >--请输入--</option>
				<option value="北京" >北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳" selected="selected">深圳</option>	
			</select><br/>
			
			爱好&nbsp;<br/>
			<input type="checkbox" name="hobby" value="划船"/ > 划船
				<input type="checkbox" name="hobby" value="打球"/> 打球
				<input type="checkbox" name="hobby" value="看电影" checked="checked"/> 看电影
				<input type="checkbox" name="hobby" value="吃饭"/> 吃饭
				
				
			<br />提交按钮<input  type="submit" value="提交"/>
			<br />普通按钮<input  type="button" value="普通按钮"/>
			<br />重置按钮<input  type="reset" value="重置"/>
			
		</form>
		
	</body>
</html>

最后结合前面的，table+form ，制作一个注册网页
注：最好是先分行，然后在各行里面再内嵌table，效果图如下：
在这里插入图片描述

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table+form</title>
	</head>
	<body>
		<table border="1px" width="1300px"  cellpadding="0px" cellspacing="opx" align="center">
			<!-- 第一行广告 -->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>				
			</tr>

			<!-- 第二行超链接 -->
			<tr bgcolor="black">
				<td colspan="7"> 
				<a href="#" ><font size="5" color="red">首页</font></a>  &nbsp; &nbsp; &nbsp;
				<a href="#"><font color="red">手机数码</font></a> 
				<a href="#">电脑办公</a> <a href="#">鞋靴箱包</a> 
				<a href="#">家用电器</a></td>
			</tr>
			<!-- 嵌套一个十行二列的注册表单 -->
			<tr >
				<td  height="600px"    background="../img/111.jpg" >
					<form action="#" method="get" name="regForm">
					<table border="1px"  width="750px" height="400px"  cellpadding="0px" cellspacing="0px" align="center">
						<tr>
							<td colspan="2">
								<font size="4">会员注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;USER REGISTER/font>
							</td>
							
						</tr>
						
						<tr>
							<td>
								<font>用户名 </font>
							</td>
							<td>
								<input type="text" name="用户名" placeholder="请输入用户名"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>密码</font>
							</td>
							<td>
								<input type="text" name="password" placeholder="请输入密码" required="required"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>确认密码</font>
							</td>
							<td>
								<input type="password" name="newpassword" required="required" placeholder="请确认密码"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>Emaile</font>
							</td>
							<td>
								<input type="text" name="email" placeholder="请输入email"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>姓名</font>
							</td>
							<td>
								<input type="text" name="name" placeholder="请输入姓名"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>性别</font>
							</td>
							<td>
								<input  type="radio" name="man" value="man"/>man
								<input  type="radio" name="woman" value="woman"/>man
							</td>
						</tr>
						
						<tr>
							<td>
								<font>出生日期</font>
							</td>
							<td>
								<input type="text" name="出生日期" placeholder="请输入出生日期"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>验证码</font>
							</td>
							<td>
								<input type="text" name="验证码" placeholder="请输入验证码"/>
								<img src="../img/yanzhengma.png" />
							</td>
						</tr>
						
						<tr>
							<td>
								<font>注册</font>
							</td>
							<td>
								<input type="submit" name="提交按钮" />
							</td>
						</tr>
						
				
						
					</table>
					</form>
				</td>
			</tr>
			
			<!-- 第四行广告 -->
			<tr>
				<td colspan="7"><img src="../img/footer.jpg"  width="100%"/></td>
			</tr>
			<!-- 超链接 -->
			<tr>
				<td colspan="7" align="center">
				<a href="#" >关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#" >配送方式</a> <a href="#" >服务声明</a> <a href="#" >广告声明</a> 
				<p> 南京邮电大学 版权所有</p>
				</td>
			</tr>
			
			
		</table>
	</body>
</html>