表单
1.简介
表单是一个包含若干个表单元素的区域,用于获取不同类型的用记信息。
表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉列表、按钮等
2.表单结构
2.1表单的语法
<form action="" method="">
多个表单元素
</form>
2.2form标签
用来定义表单,可以包含多个表单元素
常用属性:
-
action提交数据给谁处理,处理数据的程序,默认为当前这个页面,并且以查询字符串的形式来表现
-
method提交数据的方式,取值:get(默认)、post
get和post的区别:
get以查询字符串形式提交,在地址栏中能够看到,长度有限制,不安全
post以表单数据组形式提交,在地址栏中看不到,长度无限制,安全
-
enctype:提交数据的编码,取值:application/x-www-form-urlencoded(默认)multipart/form-data(文件上传)
3.表单元素
大多数表单元素都是使用<input>
标签来定义,通过type属性来定义不同的表单元素
<imput type="表单元素的类型" name="名称" value="默认值" size="宽度">
表单元素的类型 | 含义 | 说明 |
---|---|---|
text | 单行文本框 | 省略时默认就是text |
password | 密码框 | 输入时以点号显示,安全 |
radio | 单选按钮 | 只能选中其中一个 |
checkbox | 复选框 | 可以同时选择多个 |
submit | 提交按钮 | 提交表单数据 |
reset | 重置按钮 | 重置表单元素的初始值 |
image | 图像按钮 | 可以使用图片作为按钮,也具有提交功能 |
button | 普通按钮 | 默认情况下无功能 |
file | 文件选择器 | 选择要上传的文件 |
hidden | 隐藏域 | 在页面上不显示 但会提交,可以用来存储数据 |
3.1单行文本框
常用属性:
-
name属性:名称,很重要,如果没有指定name,则该表单的数据无法提交
-
value属性:当用户没有输入数据时,文本框中的默认值
-
size:文本框的显示宽度
-
maxlength:最大字符数,默认没有限制
-
readonly只读 readonly=“readonly”,可以简写readonly,即只写属性名
-
disabled不可用,禁用 disabled="disabled"可以简写,即只写disabled
disabled和readonly区别:readonly的数据会提交,而disabled的数据不会提交
3.2单选按钮
常用属性:
- name名称:多个radio的name属性值必须相同,才可以实现互斥(单选)
- value值
- checked是否被选择,两种状态:选中/未选中
<checked="checked">
简写<checked>
3.3复选框
常用属性与radio类似
3.4文件选择器
常用属性:
-
name属性:名称
-
accept设置可以选择的文件类型,用来限制文件上传的类型
使用MIME格式字符串对资源的类型进行限制
常用MIME类型:
- 纯文本:text/plan text/xml
- 图像:image/png image/gif image/jpeg
4.特殊表单元素
表单元素 | 含义 | 说明 |
---|---|---|
select | 下拉列表 | |
option | 列表选项 | |
optgroup | 选项组 | 用来对option进行分组 |
textarea | 文本域 | 多行文本框 |
4.1下拉列表
select常用属性:
- name属性
- size:下拉列表所显示的行数,同时显示多个选项
- multiple允许同时选择多个
option常用属性:
- value选项值
- selected设置默认选中的项
optgroup常用属性:
- label分组的标题
4.2文本域
常用属性:
- neme名称
- rows行数
- cols列数
5.其他表单元素
5.1label
为表单元素提供标签,当选中label标签中的文本时会自动将焦点切换到与之相关联的表单元素中
常用属性:
-
for必须将该属性值设置为与之相关联的表单元素的id属性值相同
注意:几乎所有的HTML标签都有id属性,且id属性值必须唯一
5.2button标签
也表示按钮,与input按钮类似
用法:
<button type="按钮类型">按钮文本或图像</button>
常用属性:
- type按钮的类型:取值submit(默认)、reset、button
5.3fieldset和legend标签
fieldset标签:对表单元素进行分组
legend标签:对分组添加标题