<!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技术使用 <select>下拉框 标签：select 嵌套option，select 是下拉菜单整体， <select name="city"> <option value="1" selected="selected">广州</option> <option value="2">深圳</option> <option value="3">佛山</option> <option value="4">东莞</option> </select> value的数据数提交给服务器，option标签体文本是用于展现给用户看的 <textarea> 多行输入文本框 <textarea name="description" rows="3" cols="50"></textarea> rows="3" 初始化框占3行 cols="50" 初始化一行大小输入50个字符 注意：上面只是初始化大小，可以拖拽改变大小 用户体验提升：label标签 作用：网页中，某个表单项前面的名称(说明文字)。 用label标签绑定文字和表单控件的关系，增大表单控件的点击范围 用法1： <label for="pwd">密码：</label> for属性要绑定对应输入框标签的id <input type="password" name="pwd" placeholder="请输入密码" id="pwd"> 用法2：说明文字和输入框在一个父标签内 <label><input type="radio" name="gender" value="1" checked="checked">男</label> <label><input type="radio" name="gender" value="2">女</label> --> <h1>阿里会员注册</h1> <hr> <form action="#"> <table> <tr> <td><label for="username">账号：</label></td> <td><input type="text" name="username" placeholder="请输入账号" id="username"></td> </tr> <tr> <td><label for="pwd">密码：</label></td> <td><input type="password" name="pwd" placeholder="请输入密码" id="pwd"></td> </tr> <tr> <td>性别：</td> <td> <label><input type="radio" name="gender" value="1" checked="checked">男</label> <label><input type="radio" name="gender" value="2">女</label> </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> <select name="city"> <option value="1" selected="selected">广州</option> <option value="2">深圳</option> <option value="3">佛山</option> <option value="4">东莞</option> </select> </td> </tr> <tr> <td>简介：</td> <td> <textarea name="description" rows="3" cols="50"></textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" value="注册"> <input type="reset"> <input type="button" value="普通按钮"> </td> </tr> </table> </form> </body> </html>
