表单控件,提交方式,数据接收等内容讲解
树图思维导图提供 表单与WEB页面交互 在线思维导图免费制作,点击“编辑”按钮,可对 表单与WEB页面交互 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:a7738058652e03956ea32aeae30fab9a
表单与WEB页面交互 思维导图模板大纲
介绍:HTML的表单是网页中可以接受用户输入数据并传递给其他页面的一种页面元素对象,其内通常有一些不同类型的表单元素,或称表单控件来接受用户不同形式、不同类型的输入数据。
表单标签及其属性
HTML的表单标签是:“<form></form>”
表单标签的主要属性参数
“method”用来说明数据以何种方式进行发送(或提交),有两个可取值get和post;
“action”用来说明数据发送(或提交)给谁
name:用户自己命名,规定表单的名称
enctype:规定在向服务器发送表单数据之前如何对其进行编码(适用于method=post)
target:规定响应程序在哪打开
_blank表示空白窗口
_self表示当前窗口
_parent表示父窗口
_top表示最上级窗口
accept-charset:根据实际给出合适的charater-set,规定服务器课处理的表单数据字符集
Autocomplete New:值为on,指定form或input字段是应该打开还是关闭自动完成
Novalidate New:值为novalidate,如果使用该属性,则提交表单时不进行验证
表单控件及其属性
input
input标签的控件
文本域:text
用来输入文本字符串,输入字符在框内可见
<input type="text">
密码框:password
用来输入密码字符串,输入的密码不可见
<input type="password">
单选按钮:radio
允许在多个选项中选择其中的一个圆形按钮
<input type="radio">
复选框:checkbox
允许多个选择中选择若干个的方形选项框
<input type="checkbox">
提交按钮:submit
用来提交表单数据至表单的处理程序的按钮
<input type="submit">
重置按钮:reset
取消表单中的已输入的数据
<input type="reset">
隐藏域:hidden
在页面上没有可见的控件,但可接受其他形式值的输入的一种控件
<input type="hidden">
图形域:image
在页面上显示一个图片的控件
<input type="image">
文本域:file
用来实现文件上传的控件
<input type="file">
number
用来输入number类型数据,可以使用一些属性来输入数据进行限制
<input type="number">
range
可用滑块拖动输入一定范围内的某个值的一种数据类型
<input type="range">
date
用来输入date类型数据,在浏览器支持下,会出现一个日期选择器来帮助用户输入日期
<input type="date">
time
用来输入time类型数据,在浏览器支持下,会出现一个时间选择器来帮助用户输入时间(无时区)
<input type="time">
datetime
用来输入datetime类型数据,在浏览器支持下,允许用户选择时间和日期(有时区)
<input type=""datetime>
datetime-local
用来输入datetime-local类型数据,在浏览器支持下,允许用户选择时间和日期(有时区)
<input type="datetime-local">
month
用来输入month类型数据,在浏览器支持下,允许用户选择月份和年份
<input type="month">
week
用来输入week类型数据,在浏览器支持下,允许用户选择周和年
<input type="week">
color
用来输入week类型数据,在浏览器支持下,允许用户在颜色选择器上输入颜色
<input type="color">
search
用来输入搜索文本(搜索文本的表现类似常规文本)
<input type="search">
用于输入电子邮件地址,在浏览器支持下能够在提交时自动对电子邮件地址进行验证
<input type="email">
tel
用于输入电话号码,目前仅Safari8支持
<input type="tel">
url
用于输入URL地址,在浏览器支持下能够在提交时自动验证url地址
<input type="url">
input标签的属性
name
field_name
定义input元素的名字
size
number_of_char
定义输入字段的宽度
src
URL
定义以提交按钮形式显示的图像的URL
value
value
规定input元素的值
readonly
readonly
规定输入字段为只读
maxlength
number
规定输入字段中字符的最大长度
checked
checked
规定 input元素首次加载时应当被选中
disabled
disabled
当input元素加载时禁用此元素
accept
mime_type
规定通过文件上传来提交的文件类型
alt
text
定义图像输入的替代文本
select标签
该标签由首标签<select>和尾标签</select>构成,用来定义一个下拉列表,允许用户在多个选项中选择其中一个或几个选项。在该标签内应该使用选项标签<option></option>定义下拉列表中的各个构成选项。
select属性
name用于给该标签命名
multiple表示允许用户在下拉选项中选择多个选项。
option属性
value用于给选项进行赋值;
selected表示该选项被选中。
textarea标签
该标签是多行文本域标签,由首标签<textarea>和尾标签</textarea>构成,用来定义一个多行文本区域,允许用户输入多行的文字内容。
textarea的属性
name用于给该标签命名;
rows表示该文本区域有多少行;
cols表示该文本区域有多少列。
get
允许送的数据量受URL地址的总长度不超过2048个字符的限制;
发送过程中数据的安全性较差,会把各数据的参数名、参数值附在URL地址的后面;
post
允许送的数据量不受限
发送过程中数据的安全性较好
HTML表单提交的数据是由该表单的action属性指定“URL地址”的PHP程序来接收的;
PHP程序在接收表单提交过来的数据时通常会区别表单提交数据时采用的方法是“get”还是“post”分别采用全局变量“$_GET[]”或“$_POST[]”来接收,也可以不加区别地直接采用“$_REQUEST[]”来接收。
$_GET[]接收表单数据
$变量名=$_GET["表单控件名称"]
单值控件时,“$变量名”所指变量是一个普通变量,可对它直接输出或进行运算
多值控件时,“$变量名”所指变量是一个数组,需借助循环对其中每一个元素进行输出或运算、处理
$_GET[]接受单值控件到 “$变量名”指定变量(为简单变量)后,对它可直接输出或进行所需的运算处理
$_GET[]接受多值控件到 “$变量名”指定变量(为数组变量)后,对它应采用循环逐个处理其中的每一个数组元素
$_POST[]接收表单数据
$变量名=$_POST["表单控件名称"]
单值控件时,“$变量名”所指变量是一个普通变量,可对它直接输出或进行运算
多值控件时,“$变量名”所指变量是一个数组,需借助循环对其中每一个元素进行输出或运算、处理
$_POST[]接受单值控件到 “$变量名”指定变量(为简单变量)后,对它可直接输出或进行所需的运算处理
$_POST[]接受多值控件到 “$变量名”指定变量(为数组变量)后,对它应采用循环逐个处理其中的每一个数组元素
$_REQUEST[]接收表单数据
不管是“get”方式还是“post”方式提交过来的表单数据,在PHP程序中均可以使用全局变量“$_REQUEST[]”来接收
$变量名=$_REQUEST["表单控件名称"]
单值控件时,“$变量名”所指变量是一个普通变量,可对它直接输出或进行运算
多值控件时,“$变量名”所指变量是一个数组,需借助循环对其中每一个元素进行输出或运算、处理
树图思维导图提供 分析传统文化进行创新设计的优秀作品 在线思维导图免费制作,点击“编辑”按钮,可对 分析传统文化进行创新设计的优秀作品 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:b10e0023950f5b8b1cd58ca2e19944cc
树图思维导图提供 航空器与飞行高度层 在线思维导图免费制作,点击“编辑”按钮,可对 航空器与飞行高度层 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:c740bc1ac610d69eb343ec20783d8c1a