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