练习一
先看一下最终效果
代码如下
<!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">
<title>Document</title>
</head>
<body>
<table border="1" align="center" width="500" height="400" cellspacing="0">
<tr align="center">
<td colspan="4">教员搜索</td>
</tr>
<tr>
<td>搜索类型</td>
<td>
<select>
<option>请输入教员信息</option>
<option value="java">java</option>
<option value="web">web</option>
<option value="python">python</option>
</select>
</td>
<td>教员身份</td>
<td>
<select>
<option>不限</option>
<option value="java">java</option>
<option value="web">web</option>
<option value="python">python</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<select>
<option>不限</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
</td>
<td>性别</td>
<td>
<form>
<input type="radio" name="sex" id="1">男
<br>
<input type="radio" name="sex" id="0">女
</form>
</td>
</tr>
<tr>
<td>学习科目</td>
<td colspan="3">
<select>
<option>请在以下列表中选择</option>
<option value="java">java</option>
<option value="web">web</option>
<option value="python">python</option>
</select>
</td>
</tr>
<tr>
<td>学习</td>
<td colspan="3">
<form>
<input type="text" placeholder="请输入要学习的内容" required>
</form>
</td>
</tr>
<tr>
<td>专业</td>
<td colspan="3">
<form>
<input type="search" placeholder="请输入专业">
<input type="submit" value="搜索" required>
</form>
</td>
</tr>
</table>
</body>
</html>练习二
先看一下最终效果
代码如下
<!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">
<title>Document</title>
</head>
<body>
<table align="center">
<tr>
<td align="center" colspan="2">个人信息填写</td>
</tr>
<tr>
<td align="right">
<label>姓名:</label>
</td>
<td>
<form>
<input type="text">
</form>
</td>
</tr>
<tr>
<td align="right">
<label>密码:</label>
</td>
<td>
<form>
<input type="password">
</form>
</td>
</tr>
<tr>
<td align="right">
<label>确认密码:</label>
</td>
<td>
<form>
<input type="password">
</form>
</td>
</tr>
<tr>
<td>
<label>密码提示问题:</label>
</td>
<td>
<select>
<option>请选择一个问题</option>
<option>我的名字</option>
<option>我的父亲名字</option>
<option>我的母亲名字</option>
</select>
</td>
</tr>
<tr align="right">
<td>
<label>性别:</label>
</td>
<td align="left">
<form>
<input type="radio" name="sex" id="1">男
<br>
<input type="radio" name="sex" id="0">女
</form>
</td>
</tr>
<tr>
<td align="right">
<label>年龄:</label>
</td>
<td>
<form>
<input type="number" name="" id="" min="1" max="150">
</form>
</td>
</tr>
<tr align="right">
<td>
<label>籍贯:</label>
</td>
<td>
<select>
<option>请选择</option>
</select>
<label>省/直辖市</label>
<select>
<option>请选择</option>
<option>陕西省</option>
<option>山西省</option>
<option>湖北省</option>
</select>
<label< /label>
</td>
</tr>
<tr>
<td align="right">
<label>爱好:</label>
</td>
<td>
<form>
<input type="checkbox" name="hobby" id="1">上网
<input type="checkbox" name="hobby" id="2">看电影
<input type="checkbox" name="hobby" id="3">学习
</form>
</td>
</tr>
<tr>
<td align="right">
<label>个人介绍:</label>
</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">
<label>上传头像:</label>
</td>
<td>
<form>
<input type="file">
</form>
</td>
</tr>
<tr align="right">
<td></td>
<td align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</body>
</html>
