表单学习(实现简易的登陆界面)
初始表单post和get提交(form)
| 表单常用关键词 | 含义及表述 |
| action： | 表单提交的位置，可以是网站，也可以是一个请求处理地址 |
| method： | post，get 提交方式 |
| get方式提交： | 外面可以在url中看到外面提交的信息，不安全，高效 |
| post方式提交: | 比较安全，可以传输大文件 |
<form action="1.我的第一个网页.html" method="get"> <p>用户： <input type="text" name="username" value=""> </p> <p>密码： <input type="password" name="passwd" value=""> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form>
表格元素属性格式
| 属性 | 说明 |
| type (搭配在 input 中使用) | 指定元素的类型。text、password、checkbox(多选)、radio(单选)、submit、reset、file、hidden、image、button，默认text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素(px)为单位。 |
| maxlength | type为 text 或 password，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
单选框(radio)
单选框不允许选项同时选上
- 组的概念
- 单选框的 name起到了分组的作用，使在同一组的选项只能选中其中一个
<p>性别： <input type="radio" name="sex">男 <input type="radio" name="sex">女 </p>
多选框(checkbox)
<p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">编程 <input type="checkbox" value="read" name="hobby">阅读 </p>
按钮(button)
- 按钮可以使经典按钮形式
- 也可以以图片做按钮链接
<p>按钮: <input type="button" name="btn1"value="点击变长"> <input type="image" src="../resources/images/1.jpg"> </p>
列表框文本域和文件域
- 列表框文本域 textarea 标签
- 文件域 file 标签
列表框文本域 (textarea)
<p>反馈： <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea> </p>
文件域 (input-file)
<p>附件上传： <input type="file" name="sources"> <input type="button" name="btn2" value="点击上传"> </p>
- 归类为 input
| 表单元素 | 应用 |
| 传入邮件 |
| url | 传入网址，链接地址 |
| number | 数字输入框，只允许输入数字 |
| range | 音量等滑动滑块 有0-100 的比例值 |
| search | 搜索框 |
- 代码呈现
<!--邮件验证--> <p>邮件： <input type="email" name="email"> </p> <!--URL--> <p>URL： <input type="url" name="url"> </p> <!--数字--> <p>数字： <input type="number" name="num" max="100" min="0" size="10"> </p> <!--滑块--> <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p>搜索： <input type="search" name="search"> </p>
表单的应用
表单的应用
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
增强鼠标可用性，点击label，光标自动到text上
<!--增强鼠标可用性，点击label，光标自动到text上--> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p>
- label标签 for 后关键词对应 要跳转索引的 id
表单初级验证
- 常用方式
- placeholder：提示信息
- required：非空判断
- pattern：正则表达式
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p> <!--常用的正则：https://www.jb51.net/tools/regexsc.htm--> <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
正则表达式
- 搜索网址
https://www.jb51.net/tools/regexsc.htm
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p> <!--常用的正则：https://www.jb51.net/tools/regexsc.htm--> <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
完整登陆表单演示代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单学习</title> </head> <body> <h3>用户注册</h3> <form action="1.我的第一个网页.html" method="get"> <p>用户： <input type="text" name="username" value="" placeholder="请输入用户名"> </p> <p>密码： <input type="password" name="passwd" value="" required> </p> <p>性别： <input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女 </p> <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">编程 <input type="checkbox" value="read" name="hobby">阅读 </p> <p> <input type="image" src="../resources/images/1.jpg " width="300" > <br> <hr> <input type="button" value="点击变更长" name="but" > </p> <p>反馈： <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea> </p> <p>附件上传： <input type="file" name="sources"> <input type="button" name="btn2" value="点击上传"> </p> <!--邮件验证--> <p>邮件： <input type="email" name="email"> </p> <!--URL--> <p>URL： <input type="url" name="url"> </p> <!--数字--> <p>数字： <input type="number" name="num" max="100" min="0" size="10"> </p> <!--滑块--> <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p> <!--搜索框--> <p>搜索： <input type="search" name="search" id="wb"> </p> <!--增强鼠标可用性，点击label，光标自动到text上--> <p> <label for="wb">你点我试试</label> <input type="text" id=""> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
