TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网产品结构表单与WEB页面交互思维导图

表单与WEB页面交互思维导图

  收藏
  分享
免费下载
免费使用文件
浏览量:42024-04-25 21:16:55
已被使用0次
查看详情表单与WEB页面交互思维导图

表单控件,提交方式,数据接收等内容讲解

树图思维导图提供 表单与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">

email

用于输入电子邮件地址,在浏览器支持下能够在提交时自动对电子邮件地址进行验证

<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

允许送的数据量不受限

发送过程中数据的安全性较好

PHP对表单数据的接收

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