pink老师前端课程——注册页面
pink老师前端课程——注册页面
大框架如下，设置了一个容器container后，左边放置的是一张图片，右边是表格，表格中包含一个form。使用的html内容包括。
-
表格
-
列表
-
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>宠物爱好者联盟</title>
<link rel="stylesheet" type="text/css" href="css/mengchong.css">
</head>
<body>
<div id="container">
<img src="images/1-1031.jpg" width="720px">
<table align="right" width="600px" height="500px" cellpadding="2" cellspacing="0">
<form>
</form>
</table>
</div>
</body>
</html>
form中的内容如下。table一共有十二行，对应不同的标签，主要是表单。
逐行解析
1.第一行：input标签，类型为text
value="输入用户名" 预设文字
maxlength="6" 限制长度
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" value="输入用户名" maxlength="6"> </td>
</tr>
2.第二行：input标签，类型为password
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
3.第三行：input标签，类型为file
<tr>
<td>头像：</td>
<td><input type="file"></td>
</tr>
4.第四行：input标签，类型为radio，单选框
结合label标签，鼠标点击文字即可选中
--label--for
--input--id
checked="checked"设置默认选中对象
<tr>
<td>喜欢的大宝贝儿：</td>
<td>
<input type="radio" name="chongwu" id="gou"> <label for="gou">dogs</label>
<input type="radio" name="chongwu" id="mao" checked="checked"> <label for="mao">cats</label>
</td>
</tr>
5.第五行：select标签，下拉框
<tr>
<td>品种：</td>
<td>
<select name="dogs">
<option>柯基</option>
<option>柴犬</option>
<option>二哈</option>
<option>边牧</option>
<option>拉布拉多</option>
<option>泰迪</option>
</select>
<select name="cats">
<option>狸花猫</option>
<option>大橘</option>
<option>波斯猫</option>
<option>布偶猫</option>
<option>折耳猫</option>
<option>暹罗猫</option>
</select>
</td>
</tr>
6.第六行：input标签，类型为checkbox，多选框
<tr>
<td>你愿意吗：</td>
<td><input type="checkbox" name="do" id="bath"> <label for="bath">给他们洗澡</label>
<input type="checkbox" name="do" id="shit" checked="checked"> <label for="shit">给他们铲屎</label>
<input type="checkbox" name="do" id="doctor"> <label for="doctor">带他们看医生</label>
<input type="checkbox" name="do" id="both"> <label for="both">all</label>
</td>
</tr>
7.第七行：textarea标签，文本域，可设置行数，列数（每行字数）
<tr>
<td>随便写点什么吧：</td>
<td>
<textarea rows="5" cols="30">为什么喜欢宠物？为什么喜欢这个品种？你和他们之间有过哪些故事？</textarea>
</td>
</tr>
8.第八行：input标签，类型为submit，提交按钮
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
9.第九行：a标签，超链接
<tr>
<td></td>
<td><a href="#">会员请直接登陆</a></td>
</tr>
10.第十行：input标签，类型为reset，重置按钮
<tr>
<td></td>
<td><input type="reset" value="重新填写"></td>
</tr>
11.第十一行：列表，无序列表ul，li
<tr>
<td></td>
<td>
<h4>是你吗？</h4>
<ul>
<li>不伤害小动物</li>
<li>能每周参加小动物拍拍活动</li>
<li>有经验的优先</li>
</ul>
</td>
</tr>
12.第十二行：input标签，类型为button，按钮
此处添加了一个超链接，点击按钮跳转。
<tr>
<td></td>
<td>
<a href="http://www.bing.com" target="_blank"><input type="button" value="点击查看更多介绍叭！"></a>
</td>
</tr>
