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