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>