<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3-2：实战用表格布局来实现用户注册表单</title> </head> <body> <form accept="" method="post"> <table border="0" cellspacing="0" cellpadding=" 8 " width="400 " bgcolor="powderblue" align="center" > <caption><h2>用户注册</h2></caption> <tr><td colspan="2 "><hr></td></tr> <tr align="center"> <!-- label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 --> <td align="right" width="60"><label for="email ">邮箱：</label></td> <td align="left" width="300"><input type="text " id="email " name="email " placeholder="example@php.cn " size="30 "></td> </tr> <tr align="center"> <!--lable标签中 for值必须和input标签中的ID一致 --> <td align="right" width="60"><label for="password ">密码：</label></td> <td align="left" width="300"><input type="password " id="password " name="password " placeholder="字母+数字不少于8位 " size="30 "></td> </tr> <tr align="center"> <td align="right" width="60">性别：</td> <td align="left" width="300"> <input type="radio" name="sex " value="male ">男 <input type="radio" name="sex " value="female ">女 <input type="radio" name="sex " value="secret " checked=" ">保密 </td> </tr> <tr align="center"> <td align="right" width="60">兴趣：</td> <td align="left" width="300"> <input type="checkbox" name="hobby[] " value="php ">php <input type="checkbox" name="hobby[] " value="css ">css <input type="checkbox" name="hobby[] " value="js " checked=" ">js <input type="checkbox" name="hobby[] " value="html " >html </td> </tr> <tr align="center"> <td align="right" width="60">级别：</td> <td align="left" width="300"> <select name="level"> <option value="0 ">我是零基础</option> <option value="1 " selected=" ">已入门</option> <option value="2 ">做过项目</option> <option value="3 ">大神</option> </select> </td> </tr> <tr align="center"> <!-- 头像不需要点击文字直接获取焦点，否则就直接打开文件夹让选择图片了，体验不好 --> <td align="right" width="60">头像：</td> <td align="left" width="300"> <img src="../images/1.jpg " alt=" " width="30 "> <input type="file" name="photo " accept="image/* "> </td> </tr> <tr align="center"> <!--lable标签中 for值必须和input标签中的ID一致 --> <td align="right" width="60"><label for="comment ">个人简介：</label></td> <td align="left" width="300"> <textarea rows="5 " cols="40 " id="comment " name="comment " placeholder="文明上网，理性发言 "> </textarea> </tr> <tr align="center"> <td colspan="2" align="center"> <hr> <input type="submit" name="submit " value="提交 "> <input type="reset" name="reset " value="重置 "> </td> </tr> </table> </form> </body> </html>
效果图：
手抄内容:(
