表单学习
表单学习(实现简易的登陆界面)
初始表单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上-->
<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>
