<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世纪佳缘网</title>
<style>
body {
height: 500px;
}
tr>td .value,
textarea {
color: gainsboro;
}
</style>
</head>
<body>
<form action="xx.php" method="POST" name="shijijiayuan">
<table border="0" width="500" align="center">
<caption>
<h3>青春不常在,抓经谈恋爱</h3>
</caption>
<tr>
<td>性别</td>
<td>
<input type="radio" checked="checked" name="sex" id="nan"> <label for="nan"><img
src="../案例/images/man.jpg" alt=""> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="../案例/images/women.jpg" alt="">
女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>--2020--</option>
<option>--2021--</option>
</select>
<select>
<option>--请选择月--</option>
<option>--6--</option>
<option>--7--</option>
</select>
<select>
<option>--请选择日--</option>
<option>--7--</option>
<option>--8--</option>
</select>
</td>
</tr>
<tr>
<td>
所在地区
</td>
<td>
<input type="text" placeholder="武汉班子" name="whereFrom">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked" id="marryNo"> <label for="marryNo">未婚</label>
<input type="radio" name="marry" id="marryYes"> <label for="marryYes">已婚</label>
<input type="radio" name="marry" id="marryEd"> <label for="marryEd">离婚</label>
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<input type="text" placeholder="南山幼儿园" name="education">
</td>
</tr>
<tr>
<td>
月薪
</td>
<td>
<input type="text" placeholder="你猜呗" name="monthlySalary">
</td>
</tr>
<tr>
<td>
手机号码
</td>
<td>
<input type="text" placeholder="1767xxxxx" name="whereFrom">
</td>
</tr>
<tr>
<td>
昵称
</td>
<td>
<input type="text" placeholder="" name="userName">
</td>
</tr>
<tr>
<td>喜欢女孩的类型</td>
<td>
<input type="checkbox" name="girlType" checked="checked"> 老二次元
<input type="checkbox" name="girlType"> 嘴臭女孩
<input type="checkbox" name="girlType"> 都不喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="introduceOneself" id="">自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="../案例/images/btn.png">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" id="agreeOne" checked="checked"><label
for="agreeOne">我同意注册条款和会员加入标准</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登陆</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18,单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻找另一般</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
案例总结:
1.先分析确定结构
2.先写form
3.再写table tr td
4.table 后面加个caption 标题居中
并且只能在table表格种
5.tr 行 td是行内格
在td 里面加< input type=“text和其他的” name="" id="" checked="checked’>
<label for="id名称">名字或者照片</lable>
6.文字类可以用placeholder代替value 因为可以自动灰色字体,而且不会出现实体文字.
7.input image src 是照片按钮
只要外面加了form域 那么就是右提交效果的
