表单
概述
表单用于收集用户信息,用户填写表单提交到服务器
- 一般传参方式:
- GET
- POST
- Cookie
- 传参要素
- 传参方式
- GET
- POST
- 参数的名字
- 目标页面
- 内容的数据类型(只有在上传文件的时候)
- 传参方式
提示信息
- 一个表单中通常还包含一些说明性的文字,提示用户填写和操作
表单域
- 相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过表单域定义处理表单数据所提交到的 url 地址,以及数据提交到服务器的方法
- 如果不定义表单域,则数据将无法提交给服务器
表单声明
<form action="" method=""></form>
<form>
表单属性
-
action
代表提交的地址 -
method
代表提交的方式-
get
方法会在 url 中显示提交的内容 -
post
方法不会在 url 中显示提交的内容,而会显示在http中
-
-
target
_blank
新标签页打开提交的表单_self
当前标签页打开
-
enctype
application/x-www-form-urlencoded
默认传参方式multipart/form-data
只有在文件上传时使用
表单控件
- 能与用户进行交互的可视化控件
- 包含了具体的表单功能
- 包括
- 单行文本输入框
- 密码输入框
- 复选框 (点击选择)
- 提交按钮
- 重置按钮等
<input>
输入框
<input>
属性
属性 | 说明 |
---|---|
type | 用来区分文本框的类型。 |
name id | 标签的唯一标识符。 用来表示当前文本框的名字。 要服务器完成完整的交互传参,此属性必不可少。 |
value | 代表表单元素控件的默认值; 如果没有此属性,需要从用户获得。 |
disabled | 代表控件禁用; disabled = “disabled”。 |
type
属性
默认为 type="text"
type属性 | 描述 |
---|---|
text | input 将会接受文本输入 |
password | 可用于一些私密性和隐私性的内容(例如:密码) |
button、submit、reset | 实现一个按钮形式,但用于的内容不同,实质上都是实现一个按钮形式,此时可以为 input 元素设置 value 值为按钮贴上文字 |
radio | 实现单选框(注意:同一组单选框 name 属性需要相同,否则无法实现单选) |
checkbox | 实现复选框 |
time | 时间框 |
week | 星期框 |
month | 年月框 |
date | 日期框 |
datetime_local | 本地日期和时间 |
search | 实现搜索框,从搜索框字可以看出这个值用于搜索方面的 |
color | 实现颜色选择框(例如:ps中的拾色器一样) |
image | 实现图像按钮,将一幅图像作为按钮,点击图像任何位置都会做出响应 |
file | 有时我们需要将文件上传至服务器,使用file值将会实现此功能,但是如果只给type属性设置为file,并不能实现完整的上传操作,除需要给form元素中method属性设置为post外,还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了 |
number | 设置为此属性输入框只能输入数字 |
range | 实现数值滚动条 |
hidden | 将i元素给隐藏 |
email、tel、url | 对邮箱、电话号码、网址等数据进行把关,但是把关方面需要 正则表达式来定义(正则表达式通过pattern属性来定义) |
文本输入框
-
明文显示输入的内容
<form action=""><input type=""> </form>
密码输入框
-
加密显示输入的内容
<form action=""><input type="password"><!-- 密码输入框,输入的内容无法看到 --> </form>
单选框
-
type="radio"
-
注意:同一组单选框
name
属性需要相同,否则无法实现单选通过
value
属性,可以为每个单选框设置不同的标识值,以便在后端处理表单数据时进行识别和处理。<form action="">男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"> </form>
复选框
-
type="checkbox"
-
注意:同一组复选框
name
属性需页要相同通过
value
属性,可以为每个单选框设置不同的标识值,以便在后端处理表单数据时进行识别和处理。<form action="">吃<input type="checkbox" name="love" value="吃">喝<input type="checkbox" name="love" value="喝">拉<input type="checkbox" name="love" value="拉">撒<input type="checkbox" name="love" value="撒"> </form>
普通按钮
<input type="button" value="按钮上显示的文字">
提交按钮
-
type="submit"
<input type="submit">
重置按钮
-
type="reset"
<input type="reset">
上传文件
-
type=file
<form><input type="file" name="photo"> </form>
<textarea>
多行文本框
-
录入多行数据的文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
属性
-
name
定义控件名称,提供给服务器用 -
cols
代表每行中的字符数 -
rows
代表显示的行数
-
<label>
焦点
-
用于通过 id 绑定一个表单元素,被绑定的表单元素就会获得输入焦点
<label for="id">链接名</label>
<select>
下拉菜单
-
使用
<select><option value="">选择1</option><option value="">选择2</option><option value="">选择3</option> </select>
练习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form</title><style>label{cursor: pointer;display: inline-block;padding: 3px 6px;text-align: right;width: 150px;vertical-align: top;} </style></head><body><h1>用户注册</h1><form action="http://4399.com" method="传参方法"><label>用户名:</label><input type="text" name="username"><br><label>密码:</label><input type="password" name="password"><br><label>确认密码:</label><input type="password"><br><label>性别:</label><input type="radio" name="sex">男<input type="radio" name="sex">女<br><label>生日:</label><input type="date"><br><label>籍贯:</label><select name="省份" id=""><option value="">选择省份</option><option value="">America</option><option value="">Japan</option><option value="">Australia</option></select><br><label>用户协议:</label><textarea name="" id="" cols="30" rows="10" >免责声明:概不负责</textarea><br><label for="">头像上传:</label><input type="file"><br><label for="">操作:</label><input type="button" value="普通按钮"><input type="reset" value="重置按钮"><input type="submit" value="提交按钮" ></form></body>
</html>