web前端作业:表单练习-相识相知,就在真爱页面
我是表单里面嵌套表格,因为表单元素需要设置css样式使其中的控件进行对齐,表格的话就不用这么麻烦,算是偷懒吧。写的一般,只供借鉴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
table{
margin: 0 auto;
}
textarea{
resize: none;
}
</style>
<title>表单练习</title>
</head>
<body>
<form action="#" method="GET">
<table width="600" border="0" cellpadding="10">
<thead>
<tr>
<th colspan="2"><h3>相识相知,就在真爱</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td width="80">性别</td>
<td width="450"><input type="radio" name="gender" value="male"><input type="image" src="img/man.jpg">男<input type="radio" name="gender" value="fmale"><input type="image" src="img/women.jpg">女</td>
</tr>
<tr>
<td>生日</td>
<td><select>
<option value="请选择年">请选择年</option>
<option>1998</option>
</select>
<select>
<option value="请选择月">请选择月</option>
<option >10</option>
</select>
<select>
<option value="请选择日">请选择日</option>
<option >22</option>
</select>
</td>
</tr>
<tr>
<td><label for="sch">所在校区</label></td>
<td><input type="text" name="school" id="sch"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="wei">未婚<input type="radio" name="wei">离婚<input type="radio" name="wei">丧偶</td>
</tr>
<tr>
<td><label for="xue">学历</label></td>
<td><input type="text" name="xl" id="xue"></td>
</tr>
<tr>
<td><label for="ic">月薪</label></td>
<td><input type="text" name="income" id="ic"></td>
</tr>
<tr>
<td><label for="phone">手机号</label></td>
<td><input type="number" name="phone" id="phone"></td>
</tr>
<tr>
<td><label for="nc">昵称</label></td>
<td><input type="text" name="nc" id="nc"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="habit" value="妩媚">妩媚
<input type="checkbox" name="habit" value="柔美">柔美
<input type="checkbox" name="habit" value="可爱">可爱
<input type="checkbox" name="habit" value="小鲜肉">小鲜肉
<input type="checkbox" name="habit" value="型男">型男
<input type="checkbox" name="habit" value="气质">气质
</td>
</tr>
<tr>
<td><label for="ziwo">自我介绍</label></td>
<td><textarea rows="25" cols="31" id="ziwo" name="ziwojieshao"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="image" src="img/btn.png"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox">我同意注册条款和会员标准</td>
</tr>
<tr>
<td></td>
<td colspan="2"><a href="登录.html">我是会员?立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<dl>
<dt><h3>我承诺</h3></dt>
<dd><li>年满18岁,单身</li></dd>
<dd><li>抱着严肃的态度</li></dd>
<dd><li>真诚寻找另一半</li></dd>
</dl>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
运行结果: