HTML作业-程序创新大会报名表制作

HTML作业-程序创新大会报名表制作


1. 描述

我们即将要举办第一届的程序创新大会,为了让更多的小伙伴参与进来,现在要制作一个大会的宣传网站以供用户自行注册报名。要求报名表中的选项越详细越好哦(例如来自的院校、专业、联系电话、邮箱等等),方便后续的资质审核。 那么现在开始学习 HTML,完成报名表的制作吧!

完成报名表的制作,掌握 HTML 中的常用标签

使用frame完成以及表单项表等完成报名表的制作 使用 iframe 引入大会流程的说明页面

2. 代码结构和资源

在这里插入图片描述

3. 代码

Index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>程序创新大会</title>
	</head>
	<body>
		<h1>程序创新大会</h1>
		<hr />
		<p>欢迎各位参加程序创新大会,</p>
		<p>扒拉扒拉。。。。已经卷成这样了,爱咋咋滴</p>
		<hr>
		<img src="img/x2.jpg"/>
		<ul>
			<li>
				<a target="flow">大会流程说明,爱看不看,不看拉倒:</a><br />
				<iframe name="flow" src="flow.html" width="100%" height="200"></iframe>
			</li>
			<li>
				<a href="apply.html">点击填写报名表,爱填不填,不填拉倒</a>
			</li>
		</ul>
	</body>
</html>

flow.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>程序创新大会流程说明</title>
	</head>
	<body>
		<h2>程序创新大会流程说明</h2>
		<p>扒拉扒拉。。。</p>
		<p>没有说明,自由发挥</p>
	</body>
</html>

apply.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>程序创新大会报名</title>
	</head>
	<body>
		<h2>程序创新大会报名</h1>
		<form action="dest.html" method="get" enctype="multipart/form-data">
			<!-- 姓名、来自的院校、专业、联系电话、邮箱 、看到本活动的位置-->
			<input type="hidden" name="userId" value="1001"/><br />
			<label for="userName">姓名:</label>
			<input type="text" id="userName" name="userName"/><br />
			性别:<input type="radio" id="sex" name="sex" value=""/>
			<input type="radio" id="sex" name="sex" value=""/><br />
			<label for="number">联系电话:</label>
			<input type="tel" id="number" name="number"/><br />
			<label for="email">邮箱:</label>
			<input type="email" id="email" name="email"/><br />
			院校:<select name="college"/>
				<option value="1">计院</option>
				<option value="2">管院</option>
				<option value="3">外院</option>
				<option value="4">生化</option>
				<option value="5">环材</option>
				<option value="6">土木</option>
				<option value="7">法院</option>
				</select><br />
			专业:<input type="text" id="major" name="major"/><br />
			看到本活动的位置:<select name="pos">
				<option value="1">食堂</option>
				<option value="2">教学楼</option>
				<option value="3">宿舍</option>
				<option value="4">小树林</option>
			</select><br />
			宣传照片:<input type="file" name="personImage"/><br />
			<input type="submit" value="注册"/>
			<input type="reset" value="重置(不要乱点)"/>
		</form>
	</body>
</html>

dest.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>程序创新大会报名成功</h2>
		<p>恭喜你获得一次抽奖资格,大转盘抽奖,滋~</p>
		<img src="img/x3.jpg"/>
	</body>
</html>

4. 效果展示

在这里插入图片描述

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昵称系统有问题

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值