表单的介绍
表单是在页面中可以让用户填写信息,用来收集用户信息,上传服务器,达到与用户交互的行为。
在一个页面可以出现多个form表单,但不允许在一个form表单里面出现另一个form表单
在哪里用的到表单
在网页中常用到表单的地方有登录,注册,用户信息收集,验证码等
表单的组成
表单由表单标签 ,表单域,表单按钮组成
表单标签:from
表单域:from表单中用来收集用户信息的
表单按钮:用来提交<form>表单中的所有信息到服务器
表单标签
from表单,表单标签由from表单定义,只有用from标签包裹的内容才会被提交到服务器
from表单的属性
from标签有以下属性:
action:用来设置目标服务器的URL地址
method:控制form表单的提交方式,该属性可以省略,若省略,默认的提交方式是get
target:指定服务器返回结果显示的目标窗口或目标帧
title:当鼠标在表单上的任意位置停留时,显示的文本
enctype:指定浏览器使用哪种编码方法将表单数据传送给www服务器
name:设置表单的名字
<from
name =""
method = ""
action = ""
target = ""
title = ""
enctype = ""
></from>
表单域
每一项用来收集用户信息的输入框或选项,常用的表单域 有 输入框,复选框,单选框,文字域,下拉列表等
input
input标签是表单中最常用的标签之一,通过改变它的type属性来完成不同的需求
type属性
type属性值 | 内容 |
<input type = "text"/> | 文本模式,默认20个字符 |
<input type = "password"/> | 密码模式,输入的内容将会被字符掩饰 |
<input type = "submit"/> | 提交按钮,把表单的内容上传到服务器 |
<input type = "button"/> | 普通按钮用来触发 JS函数,不具有提交功能 |
<input type = "file"/> | 上传文件按钮, |
<input type = "radio"/> | 单选按钮 |
<input type = "checkbox"/> | 多选按钮 |
<input type = "hidden"/> | 隐藏输入框 |
<input type = "image"/> | 提交按钮,图片模式 |
<input type = "reset"/> | 重置按钮 |
<input type = "email"/> | Email模式,限制用户只能 输入 Email类型 |
<input type = "url"/> | url模式,限制用户只能 输入url类型 |
<input type = "date"/> | 日期模式,限制用户只能 输入 日期类型 |
<input type = "time"/> | 时间模式,限制用户只能 输入 时间类型 |
<input type = "month"/> | 月模式,限制用户只能 输入 月类型 |
<input type = "week"/> | 周模式,限制用户只能 输入 周类型 |
<input type = "number"/> | 数字模式,限制用户只能 输入 数字类型 |
<input type = "tel"/> | 手机号码 |
<input type = "search"/> | 搜索框 |
<input type = "color"/> | 生成一个颜色选项表 |
name属性
用来定义定义控件名称
<input name = "给标签设置的名字"/>
value属性
设置定义控件初始值
<input value = "控件初始值"/>
checked属性
设置控件初始状态是否被选中,一定要相同的name属性达到单选的效果
<input name = "xxx" checked/>
文件上传
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。
默认地,表单数据会编码为 "application/x-www-form-urlencoded",不能用于文件上传
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file1"/>
</from>
图片按钮
name:定义控件名称
src:指定图像地址
<input type="image" src="图片路径"/>
文字域
textarea用来创建一个可以输入多行文本的文本框,有cols属性和 rows属性,设置文本框的行数和列数,以字符为单位。
<textarea name="" id="" cols="30" rows="10"></textarea>
下拉菜单
select用于创建下拉列表或可以多选的列表框,<option></option>用来设置列表中的项目
select属性:
name:此列表框的名字
multiple:设置是否可多选,该属性不需要赋值,如果加入该属性,在进行多项选择时,需要按住Ctrl键选择。
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性:
selected :用来指定默认的选项
value: 用来给<option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的
<select name="" id="">
<optgroup label="山西">
<option value="1">太原</option>
<option value="2">晋中</option>
<option value="3">晋城</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">保定</option>
<option value="6">沧州</option>
</optgroup>
</select>
label标签
label是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”。该标签有如下属性:
1、for:指定快捷键将作用于的表单字段元素,设置值必须与某个表单字段元素的id值相吻合。
2、accesskey:指定作用于for属性所对应的表单字段元素的快捷键,如果要使用这个快捷键,必须同时按下Alt键和这个快捷键。
<label>标签一般和radio、checkbox类型一起使用。
<fieldset>元素集
fieldset 元素可将表单内的相关元素分组,通常和legend标签一起用,legend标签定义了fieldset的提示信息,fieldset是块级元素
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
表单按钮
<button>触发form表单提交按钮</button>
<input type="submit"> 触发form表单提交按钮
<input type="button"> 并不会触发form表单提交
发送数据的要求
如果想要被提交到服务器,必须满足以下两个条件,缺一不可:
1. 标签必须具有name属性值,没有name属性值的标签就无法组装键值对,它的值不会被提交。
2. 必须是input、select、textarea标签,其他标签的数据不会提交到服务器。
触发表单的方法
1. 点击了表单中的提交按钮(数据会刷新)
2. 用Ajax进行提交(异步提交,局部刷新)