第三章综合案例 表格与表单

于 2024-10-04 19:32:11 发布
阅读量408 收藏
点赞数 8
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82347006/article/details/142706113
版权

案例1——达维工作室“联系我们”子页

代码如下：

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>达维工作室——联系我们</title>
 		<style type="text/css">
 			.chu {
 				font-weight: bold;
 			}

 			.zi1 {
 				font-family: "微软雅黑";
 				font-size: 20px;
 				font-weight: bold;
 				color: #ED630A;
 			}

 			.zi2 {
 				font-family: "微软雅黑";
 				font-weight: bold;
 				color: #f60;
 				text-decoration: underline;
 			}

 			.zibai {
 				font-family: "微软雅黑";
 				color: #FFF;
 			}

 			body {
 				background-image: url(img/bj.jpg);
 			}
 		</style>
 		<head>
 		<body>
 			<table width="1190" border="0" cellpadding="0" cellspacing="0">
 				<tr>
 					<td>
 						<table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
 							<tr>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
 									<img src="img/logo.jpg" alt="" width="100" height="63" />
 								</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关做品</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
 								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
 							</tr>
 						</table>
 					</td>
 				</tr>
 				<tr>
 					<td>
 						<table width="100%" border="0" cellspacing="20" cellpadding="0">
 							<tr>
 								<td height="318">&nbsp;</td>

 								<td width="280" valign="top">
 									<table width="100%" border="0" cellspacing="0" cellpadding="20">
 										<tr>
 											<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
 										</tr>
 										<tr>
 											<td height="196" bgcolor="#FFAF03">
 												<p class="zibai">地址：广东省江门市XXXXXXXXX<br />
 													电话：0750-XXXXXX<br />
 													传真：0750-XXXXXX<br />
 													QQ：12345678<br />
 													电子邮箱：<br />
 													123@163.com<br />
 													工作室网站<br />
 													www.XXXX.com</p>
 											</td>
 										</tr>
 									</table>
 								</td>

 								<td width="280" valign="top">
 									<table width="100%" border="0" cellspacing="0" cellpadding="20">
 										<tr>
 											<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
 										</tr>
 										<tr>
 											<td height="278" valign="top" bgcolor="#FC880D">
 												<p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br />
 													专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br />
 													达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……</p>
 												<p class="zibai">&nbsp;</p>
 												<p class="zibai chu"><a href="#">更多&gt;&gt;</a></p>
 											</td>
 										</tr>
 									</table>
 								</td>

 								<td width="280">
 									<table width="100%" border="0" cellspacing="0" cellpadding="20">
 										<tr>
 											<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
 										</tr>
 										<tr>
 											<td height="332" valign="top" bgcolor="#66A00E">
 												<p class="zi2">我们的团队:</p>
 												<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最合适的设计放案。</p>
 												<p class="zi2">我们的承若：</p>
 												<p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板。根据每个公司的特点，设计出属于客户……</p>
 												<p class="zibai">&nbsp;</p>
 												<p class="zibai chu"><a href="#">更多&gt;&gt;</a></p>
 											</td>
 										</tr>
 									</table>
 								</td>
 							</tr>
 						</table>
 					</td>
 				</tr>
 			</table>
 		</body>
 </html>

运行结果如下：

 案例2——用户注册信息

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户注册信息</title>
		<style type="text/css">
			fieldset {
				width: 700px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
			<fieldset>
				<legend>用户注册信息</legend>
				<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td width="200" align="right">用户名：</td>
						<td><input type="text" name="textfield" id="textfield" /></td>
					</tr>
					<tr>
						<td width="200" align="right">密码：</td>
						<td><input type="password" name="textfield2" id="textfield2"/></td>
					</tr>	
					<tr>
						<td width="200" align="right">确认密码：</td>
						<td><input type="password" name="textfield3" id="textfield3"/></td>
					</tr>	
					<tr>
						<td width="200" align="right">性别：</td>
						<td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
							男<img src="img/Male.gif" width="22" height="21" align="absmiddle" />
							<input type="radio" name="radio" id="radio2" value="radio2" />
							女<img src="img/Female.gif" width="23" height="21" align="absmiddle" />
						</td>	
					</tr>	
					
					<tr>
						<td width="200" align="right">出生年月：</td>
						<td><input name="textfield4" type="text" id="textfield4" size="12" />年
							<select name="select" id="select">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
								<option>7</option>
								<option>8</option>
								<option>9</option>
								<option>10</option>
								<option>11</option>
								<option>12</option>
							</select>
							月
						</td>
					</tr>
					<tr>
						<td width="200" align="right">业余爱好：</td>
						<td>
							<input type="checkbox" name="checkbox" id="checkbox" />看书
							<input type="checkbox" name="checkbox2" id="checkbox2" />上网
							<input type="checkbox" name="checkbox3" id="checkbox3" />打球
						</td>
					</tr>
					<tr>
						<td width="200" align="right">相片：</td>
						<td height="25"><input type="file" name="filefield" id="filefield" /></td>
					</tr>
					<tr>
						<td width="200" align="right">意见或建议：</td>
						<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" name="button" id="button" value="提交" />
							<input type="reset" name="button2" id="button2" value="重置" />
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>

运行结果如下：

遗憾何来
关注
表单元素的综合案例
weixin_45784564的博客
05-21 3159
目录任务描述相关知识编程要求测试说明源码 任务描述 本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： 用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male；
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1405
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
表格的综合案例
m0_51863774的博客
10-30 2108
/按照最细的划分，八行五列，再带入colspan和rowspan两个参数，然后修改，这里注意，表格属性设置的时候，彼此间隔只是一个空格，不能多打，然后一定是竖着写的，不能横着写。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下是很明显的。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性。这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性。
利用嵌套和表单制作简单网页
最新发布
2301_80756005的博客
09-27 268
采用嵌套表格和表单制作书写简单代码，实现基本网页设计。
第5关：表格的综合案例
weixin_51426308的博客
11-28 690
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格综合</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} captio
表格+表单+列表综合案例
weixin_47183545的博客
09-30 247
1、表格+表单+列表综合案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>青春</title> </head> <body> <table width="600" align="center"> <caption><h3>青春不常在</h3></caption&
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2400
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
【融职培训】Web前端学习 第2章 网页重构3 表单与表格元素
学习猿地
06-12 347
一、表格元素 在网页中，我们通常用表格来显示数据，例如下面的学生列表。 姓名 年龄 小红 3岁 小明 2岁 本节我们介绍如何在网页中制作表格，先来看一下表格元素涉及到的标签有哪些，示例代码如下所示： 1 <table> 2 <thead> 3 <tr> 4 <th>姓名</th> 5 <th>年龄</th>
HTML之表格与表单
weixin_49087505的博客
06-10 798
文章目录表格一.表格的格式二.html的表格标签 表格 一.表格的格式 <table> //定义表格 <tr> //行标签，必须放在<table></table>标签中 <th></th> //单元格标签，表示列标题，文字自动加粗并居中，必须放在<tr></tr>标签中 <td></td> //<td></td>：单元格标签，必须放在<tr>
vue 动态表单开发方法案例详解
12-13
本文实例讲述了vue 动态表单开发方法。分享给大家供大家参考，具体如下： ...组件的开发在第三篇有介绍。 我们定义的组件和后台配置的权限相关。 我们每个组件都定义了： permission： 权限对象 permi
html表单form元素+各种input元素+常用元素综合案例.
05-26
html表单form元素+各种input元素+常用元素综合案例.
HTML——表单元素的综合案例
爱笑的博客
03-25 4063
表单元素的综合案例 效果图; 下拉框 编程规定 每个表单元素都用< div > < /div> 标签包裹； 表单元素里的文本都用< span>< /span>标签包裹，对于有< label>标签包裹文本的，就不用< span>标签了； input元素需要改变宽和高的添加类.com。 代码： <!DOCTYPE html> <html> <head> <meta charset
第5关：表单元素的综合案例
m0_73143451的博客
03-01 396
【代码】第5关：表单元素的综合案例。
HTML表单类的标签——第11关：表单元素的综合案例（Web）
惟愿一生无悔也无憾
04-02 2557
用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male； 女：<label>标签的for属性的值为female； 保密：<label>标签的for属性的值为other； 教育程度：添加类.common，默认选中本科； 选项有：高中，中专，大专，本科，硕士，博士，其他； 婚姻状况：name属性的值为state，默认选中未婚； 未婚：<label>标签的for属性的值为single； 已婚：<l
表单的综合案例
爱吃橙子蜂蜜酱的熊
07-23 666
&lt;form action=""&gt; &lt;fieldset&gt; &lt;legend&gt;学生档案&lt;/legend&gt; &lt;lable&gt;姓 名：&lt;input type="text" placeholder="请输入学生名字"/&gt;&lt;/lable&am
07 html 表单form元素 各种input元素 常用元素综合案例
weixin_30861797的博客
05-15 334
Html的表单元素,主要用途：用户输入数据，并提交给服务器 基本语法是： <formaction=”url”（是指把表单提交给谁）method=”提交的方法（get/post）,默认是get”> 各种输入元素【输入框，下拉列表，文本域，密码框】 </form> 案例：登陆界面 login.html <html> <head> ...
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2633
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML通俗易懂—表单标签+表单元素（input输入表单元素+select下拉列表+textarea文本域元素）+相应案例
weixin_45586870的博客
09-29 1339
现实中的表单： 1、表单的组成 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。 （1）表单域 表单域是一个包含表单元素的区域。 在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器。 <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form> 基础
HTML/CSS/JS 实战教程：综合案例与网站开发流程
例如，第23章的"HTML综合案例"部分，介绍了从设计流程到实际操作的全过程。设计流程通常包括以下步骤： 1. **设计效果图**：在开始编写HTML代码前，首先需要规划网页的视觉效果，这通常涉及到需求分析和美工设计，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值