HTML5（2）
表单语法**
<form method="post" action="result.html"></form>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陆注册</title> 6 </head> 7 <body> 8 <h1>注册</h1> 9 10 <!--表单form 11 action：表单提交的位置，可以是网站，也可以是要给请求处理地址 12 method：post，get 提交方式 13 get方式提交：我们可以在url中看到我们要提交的信息，不安全，高效 14 post方式提交：安全，不会暴露密码，可以传输大文件 15 --> 16 17 <form action="1.我的第一个网页.html" method="get"> 18 <!--文本输入框：--> 19 <p>名字：<input type="text" name="username"></p> 20 <!--密码框：type="password--> 21 <p>密码：<input type="password" name="pwd"></p> 22 <p> 23 <input type="submit"> 24 <input type="reset"> 25 </p> 26 27 </form> 28 29 </body> 30 </html>
post比较安全，但是也是可以抓到的。
网页里边右键--->审查元素（检查）
---->Network
---->点击抓到的文件，点击Headers
翻到最底下
1. 表单元素格式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陆注册</title> 6 </head> 7 <body> 8 <h1>注册</h1> 9 10 <!--表单form 11 action：表单提交的位置，可以是网站，也可以是要给请求处理地址 12 method：post，get 提交方式 13 get方式提交：我们可以在url中看到我们要提交的信息，不安全，高效 14 post方式提交：安全，不会暴露密码，可以传输大文件 15 --> 16 17 <form action="1.我的第一个网页.html" method="get"> 18 <!--文本输入框： 19 value是默认值 20 --> 21 <p>名字：<input type="text" name="username" value="请输入用户名" maxlength="8" size="30"></p> 22 <!--密码框：type="password--> 23 <p>密码：<input type="password" name="pwd"></p> 24 25 <!--单选框标签 26 input type="radio" 27 value：单选框的值 28 name：表示组（不能同时选择） 29 --> 30 <p>性别： 31 <input type="radio" value="boy" name="sex" checked>男 32 <input type="radio" value="boy" name="sex">女 33 </p> 34 <p> 35 <input type="submit"> 36 <input type="reset"> 37 </p> 38 39 </form> 40 41 </body> 42 </html>
2. 按钮与多选框：
1 <p>爱好： 2 <input type="checkbox" value="sleep" name="hobby">睡觉 3 <input type="checkbox" value="code" name="hobby" checked>敲代码 4 <input type="checkbox" value="chat" name="hobby">聊天 5 <input type="checkbox" value="game" name="hobby">游戏 6 </p> 7 <!--按钮 8 input type="button" 普通按钮 9 input type="image" 图像按钮 10 input type="submit" 提交按钮 11 input type="reset" 重置 12 --> 13 <p>按钮： 14 <input type="button" name="btn1" value="点击选老婆"> 15 <input type="image" src="../resources/image/violet1.png" height="300" width="300"> 16 </p>
3. 下拉框和文本域：
所有的 input 标签、所有的表单元素都需要name属性
1 <!--下拉框--> 2 <p>下拉框： 3 <select name="列表名称" > 4 <option value="China">中国</option> 5 <option value="Japan">日本</option> 6 <option value="Switzerland" selected>瑞士</option> 7 </select> 8 </p> 9 10 <!--文本域--> 11 <p>反馈： 12 <textarea name="textarea" cols="30" rows="10">文本内容</textarea> 13 </p> 14 <!--文件域--> 15 <p> 16 <input type="file" name="files"> 17 <input type="button" value="上传文件" name="upload"> 18 </p>
4. 搜索框和简单验证：
1 <!--邮件验证--> 2 <p>邮箱： 3 <input type="email" name="email"> 4 </p> 5 <!--URL--> 6 <p> 7 <input type="url" name="url"> 8 </p> 9 <!--数字--> 10 <p>商品数量： 11 <input type="number" name="num" max="100" min="0" step="1"> 12 </p> 13 <!--滑块--> 14 <p>音量： 15 <input type="range" name="voice" max="100" min="0" step="2"> 16 </p> 17 <!--搜索框--> 18 <p>搜索： 19 <input type="search" name="search"> 20 </p>
5. 只读readonly、禁用disabled、隐藏hidden：
1 <p>名字：<input type="text" name="username" value="admin" readonly></p><p>密码：<input type="password" name="pwd" hidden></p> 2 <p>性别： 3 <input type="radio" value="boy" name="sex" checked disabled>男 <input type="radio" value="boy" name="sex">女 4 </p>
6. label标签：
可以指向一个位置，增强鼠标可用性，就比如你点一个地方，它跳到一个文本框里
1 <!--增强鼠标可用性 2 for指向一个id--> 3 <p> 4 <label for="mark">你点我试试</label> 5 <input type="text" id="mark"> 6 </p>
7. 表单初级验证：
常用方式：placeholder （提示信息） required（非空判断） pattern（正则表达式）
1 <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
2 <p>自定义邮箱：
3 <input type="text" name="diymail" pattern="/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
4 </p>
https://tool.oschina.net/uploads/apidocs/jquery/regexp.html 查找正则表达式