网页设计 | 表单前台设计 - 简单的注册页面
实验目的
表单的前台设计，用CSS控制表单的外观（具体样式自己设计）
实验内容
制作表单并能通过CSS样式控制其外观
实验程序（代码清单）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{ background:url(car2.jpg); }
p { color:#FC6;}
span { color:#9C3; text-decoration:underline;}
#textarea { background-color:antiquewhite; }
.input{background-color: #EDCC8B;}
form{text-align: center}
h1{color:beige; text-align: center; }
</style>
</head>
<body >
<h1>注册页面</h3>
<form action="" method="get" style="margin: auto">
<p>
<label for="textfield">我的邮箱：</label>
<input type="text" name="textfield" id="textfield" class="input">
</p>
<p>
<label for="textfield2">创建密码：</label>
<input type="password" name="textfield2" id="textfield2" class="input">
</p>
<p>
<label for="textfield3">验证密码：</label>
<input type="password" name="textfield3" id="textfield3" class="input">
</p>
<p>
<label for="textfield4">昵称：</label>
<input type="text" name="textfield4" id="textfield4" class="input">
</p>
<p>
<label>性别：
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" class="input">
男</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" class="input">
女</label>
</p>
<p>所在地：
<label for="select"></label>
<select name="select" id="select">
<option>内蒙古</option>
<option>黑龙江</option>
<option>河北</option>
<option>新疆</option>
<option>北京</option>
<option>天津</option>
<option>吉林</option>
<option>辽宁</option>
</select>
</p>
<p>自我介绍：</p>
<span>写一个有个性的自我介绍吧~</span>
<p>
<label for="textarea"></label>
<textarea name="textarea" cols="50" rows="15" id="textarea"></textarea>
</p>
<p>兴趣爱好：</p>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
运动</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_1">
看书</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_2">
看电影</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_3">
听音乐</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_4">
画画</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_5">
电子游戏</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_6">
逛街</label>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_7">
上网</label>
</p>
<p>
<input type="submit" name="button" id="button" value="注册">
<input type="reset" name="button2" id="button2" value="重置">
<br>
<br>
</p>
</form>
</body>
</html>
