实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <form action="" method="get"> <p>用户注册</p> <p> <label for="username">账号：</label> <!--autofocus 聚焦--> <input type="text" id="username" name="username" placeholder="不允许大于8个字符" required autofocus> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="6-12个字符" required> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com" required> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" min="6" max="70"> </p> <p> <label for="birthday">生日：</label> <input type="date" name="birthday" id="birthday"> </p> <p> <label for="phone">手机号：</label> <input type="tel" name="phone" id="phone" min="11" max="11" placeholder="请填写手机号码" required> </p> <p> <!--下拉框组成是两组标签。 第一组名称 label标签，第二组 select 与option 标签。--> <!--同时要注意的是option标签跟的是value--> <label for="crab">螃蟹：</label> <select name="crab" id="crab"> <option value="1">2两母蟹</option> <option value="2">2.5两母蟹</option> <option value="3" selected>3两母公蟹</option> <option value="4">4两母公蟹</option> </select> </p> <!--复选框--> <p> <!--复选框还是input学到了新的知识，就是type是checkbox，后面跟的是label for与前面的value对应--> <label for="write">爱好：</label> <input type="checkbox" id="read" name="hobby[]" value="read"> <label for="read">读书</label> <input type="checkbox" id="write" name="hobby[]" value="write"> <label for="write">写字</label> <input type="checkbox" id="game" name="hobby[]" value="game"> <label for="game">打游戏</label> </p> <p> <!--单选框只能选择一个，input后面跟的是 radio --> <label for="secrecy">性别：</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男生</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女生</label> <input type="radio" id="secrecy" name="gender" value="secrecy"> <label for="secrecy">保密</label> </p> <p> <label for="comment">简介：</label> <textarea name="comment" id="comment" cols="30" rows="10"></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单学习总结：
1.表单和label配合使用，label的for跟 表单的input的属性配合使用
2.其中
name 属性用于在提交表单时搜集字段的值；
value 属性为 input 元素规定值。
对于不同类型的 input 元素，value 属性的用法也不同：
对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
对于 "text", "password", "hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。
注释：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
3.label是html5特有的，是定义 input 元素的标注。
4.<label> 标签的 for 属性应当与相关元素的 id 属性相同。
===以上几点在实战中灵活运用要记牢。
