练习一
先看一下最终效果
代码如下
<!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>
