表格+表单+列表综合案例

最新推荐文章于 2024-09-27 09:21:53 发布
最新推荐文章于 2024-09-27 09:21:53 发布
阅读量275 收藏 1
点赞数
文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47183545/article/details/120569143
版权

1、表格+表单+列表综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青春</title>
	</head>
	<body>
		<table width="600" align="center">
			<caption><h3>青春不常在</h3></caption>
			<tr>
				<td>性别</td>
				<td><input type="radio" name="sex" /> <img src="img/nansheng.png" width="30" />男<input type="radio" name="sex" /><img src="img/nvsheng.png" width="30" />女</td>
			</tr>
			<tr>
				<td>生日</td>
				<td>
					<select>
						<option>--请选择年--</option>
						<option>1995</option>
						<option>1996</option>
						<option>1997</option>
						<option>1998</option>
						<option>1999</option>
					</select>
					<select>
						<option>--请选择月--</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
					<select>
						<option>--请选择日--</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>9</option>
						<option>30</option>
					</select>
				</td>
				<!-- <td><input type="date"></td> -->
			</tr>
			<tr>
				<td>所在地区</td>
				<td><input type="text" value="北京" /></td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td>
					<input type="radio" name="xueli" />未婚
					<input type="radio" name="xueli" />离婚
					<input type="radio" name="xueli" />丧偶
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td><input type="text" value="小学" /></td>
			</tr>
			<tr>
				<td>月薪</td>
				<td><input type="text" value="5000-10000" /></td>
			</tr>
			<tr>
				<td>手机号</td>
				<td><input type="tel" maxlength="11" /></td>
			</tr>
			<tr>
				<td>昵称</td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td><input type="checkbox" name="hobby" />妩媚<input type="checkbox" name="hobby" />柔美<input type="checkbox" name="hobby" />可爱<input type="checkbox" name="hobby" />小鲜肉<input type="checkbox" name="hobby" />型男<input type="checkbox" name="hobby" />气质</td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea cols="50" rows="6"></textarea></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="image" src="img/zhuce.png" /></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="checkbox" />我同意注册条款和会员加入标准</td>
			</tr>
			<tr>
				<td></td>
				<td><a href="#" target="_blank">我是会员，立即登录</a></td>
			</tr>
			<tr>
				<td></td>
				<td><h3>我承诺</h3></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<ul>
						<li>年满18岁、单身</li>
						<li>抱着严肃的态度</li>
						<li>真诚寻找另一半</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>

2、表格+表单案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base target="_blank" />
	</head>
	<body>
		<table align="center">
			<caption><h2>会员登录</h2></caption>
			<tr>
				<td>登录账号</td>
				<td><input type="text" placeholder="邮箱/ID/手机号" /></td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" placeholder="密码"/>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="checkbox" checked="checked" />两周内自动登录
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="image" src="img/denglu.png" />
					<a href="#" >忘记密码</a>
				</td>
			</tr>
			<tr>
				<td>其他账号登录</td>
				<td>
					<img src="img/qq.png" width="30" />
					<a href="https://im.qq.com/index" >QQ账号</a>
					<img src="img/weibo.png" width="30" />
					<a href="https://www.sina.com.cn/" />新浪微博</a>
					<img src="img/baidu.png" width="30"/>
					<a href="https://www.baidu.com" />百度账号</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a href="#">还不是会员？立即登录</a></td>
			</tr>
		</table>
	</body>
</html>
昕晴～～
关注
Vue3+element-plus+axios 综合小案例
09-26
在这个综合小案例中，我们将探讨如何结合Element Plus UI库和axios HTTP客户端来构建一个功能丰富的前端应用。 首先，Vue3 引入了Composition API，这是一种全新的组织组件逻辑的方式，它允许我们在组件中按需导入...
html表单form元素+各种input元素+常用元素综合案例.
05-26
html表单form元素+各种input元素+常用元素综合案例.
表格的综合案例
weixin_45784564的博客
05-21 4338
任务描述 本关任务：按照以下要求，完成一个复杂的表格创建任务。 创建表格的要求如下： 边框为2px； 宽为100%； cellspacing为0； cellpadding为6； 标题内容为本周财政计划； 在 其它内容和效果图展示的一样。 注意：表格属性的顺序按照创建表格的要求的顺序来写。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之
表单的综合案例
爱吃橙子蜂蜜酱的熊
07-23 681
&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
html5，表单的综合案例
weixin_34088598的博客
10-06 212
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单综合练习</title> <style type="text/css"> form{width: 400px;background: #f7f7f7...
html表格表单
哇塞
06-12 2359
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <table border="1" width="500" height="200" cellspacing="...
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1494
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
HTML系列之表格、表单综合案例
StayAlive1887的博客
07-01 1682
要求：用HTML实现下面的效果。要求：用HTML实现下面的效果。
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 4390
HTML over
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2509
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
第5关：表格的综合案例
weixin_51426308的博客
11-28 734
<!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
23 表单标签综合案例
hello_sunny123的博客
06-30 558
做一个表单如图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
表单综合案例
little_spice的博客
04-02 2258
html学了有一段时间了，感觉内容很简单但是很杂很多，需要记忆，学完表单结合那几个东西随便写了个案例复习一下。 <!doctype html> <html> <head> <title>表单综合案例</title> </head> <body> <form action='#' ...
利用嵌套和表单制作简单网页
最新发布
2301_80756005的博客
09-27 294
采用嵌套表格和表单制作书写简单代码，实现基本网页设计。
新闻列表综合案例
leechoy
06-10 790
所需素材： arr.jpg line.jpg <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .news { width: 290px; height: 190px; paddi
HTML表单类的标签——第11关：表单元素的综合案例（Web）
惟愿一生无悔也无憾
04-02 3140
用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male； 女：<label>标签的for属性的值为female； 保密：<label>标签的for属性的值为other； 教育程度：添加类.common，默认选中本科； 选项有：高中，中专，大专，本科，硕士，博士，其他； 婚姻状况：name属性的值为state，默认选中未婚； 未婚：<label>标签的for属性的值为single； 已婚：<l
表单学习回顾复习（综合案例）
qq_66198247的博客
01-18 313
用所学的表单标签写一个简单表单
pink老师指导下的HTML+CSS综合案例练习
通过学习pink老师的案例，个人练习者可以掌握HTML的基本标签使用，例如头部标签、主体标签、链接标签、图片标签、列表标签、、、表格标签、、等，以及表单标签、、、等。在案例中，个人练习者会进一步了解如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值