代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>day02/06-表单-登录页面.html</title> </head> <body> <!-- 表单项：就是放在form里面的元素，具体表单项有输入框、按钮等 <input>系列：各种各样的输入框 单行文本输入框：<input type="text" name="给表单元素起名字"> 给表单元素起名字目的是给采集到的数据命名，服务器根据名字区分和接收不同的数据 placeholder="请输入账号" 提示用户输入信息，如果用户输入提示信息隐藏 密码框：<input type="password"> ，输入的数据是不可见的 提交按钮：<input type="submit"> ，点击提交触发让表单中所有采集的数据（表单项）提交给action指定的服务器地址 单选输入框：<input type="radio" name="gender" value="1" checked="checked">男 value是提交给服务器的数据，男是页面展现给用户看的 checked="checked" 设置默认选中 注意：name一样，为一组单选框，一组单选框只能选择一个 多选输入框：<input type="checkbox" name="hobby" value="1" checked="checked">篮球 注意：name要一样，这样后端服务器才可以接收多个值 文件域输入框： <input type="file" name="pic"> 选择客户端文件用于上传给服务器 日期或时间输入框：<input type="date" name="birthday"> 日期框 <input type="datetime-local" name="birthdayTime"> 日期时间框 数字框：<input type="number" name="age" min="1" max="200"> min设置最小数字，max最大数字 电子邮箱框：<input type="email" name="email" placeholder="请输入邮箱"> 提交表单会校验邮箱的格式必须含有@ 重置按钮：<input type="reset"> 重置所有输入数据 普通按钮：<input type="button" value="普通按钮"> 默认没有功能，需要结合javascript技术使用 --> <h1>阿里会员注册</h1> <hr> <form action="#"> <table> <tr> <td>账号：</td> <td><input type="text" name="username" placeholder="请输入账号"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd" placeholder="请输入密码"></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="1" checked="checked">男 <input type="radio" name="gender" value="2">女 </td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="hobby" value="1" checked="checked">篮球 <input type="checkbox" name="hobby" value="2">游戏 <input type="checkbox" name="hobby" value="3">敲代码 </td> </tr> <tr> <td>头像：</td> <td> <input type="file" name="pic"> </td> </tr> <tr> <td>出生：</td> <td> <input type="date" name="birthday"> </td> </tr> <tr> <td>时间：</td> <td> <input type="datetime-local" name="birthdayTime"> </td> </tr> <tr> <td>年龄：</td> <td> <input type="number" name="age" min="1" max="200" placeholder="请输入年龄" style="width: 164.6px;"> </td> </tr> <tr> <td>邮箱：</td> <td> <input type="email" name="email" placeholder="请输入邮箱"> </td> </tr> <tr> <td></td> <td> <input type="submit" value="注册"> <input type="reset"> <input type="button" value="普通按钮"> </td> </tr> </table> </form> </body> </html>
