《网页表单.ppt》由会员分享，可在线阅读，更多相关《网页表单.ppt（48页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、表单、表单美化表单、表单美化表单、表单美化表单、表单美化主要内容主要内容什么是表单什么是表单什么是表单什么是表单表单元素表单元素表单元素表单元素表单美化表单美化表单美化表单美化1 1 1 12 2 2 23 3 3 3表单表单表单表单n n表单的用处很多，网上无处不见表单的用处很多，网上无处不见表单的用处很多，网上无处不见表单的用处很多，网上无处不见n n主要用于登录、注册、留言等给用户提供入口。主要用于登录、注册、留言等给用户提供入口。主要用于登录、注册、留言等给用户提供入口。主要用于登录、注册、留言等给用户提供入口。n n网站怎样与用户进行交互网站怎样与用户进行交互网站怎样与用户进行交互网
2、站怎样与用户进行交互?n n答案答案答案答案:使用使用使用使用HTMLHTMLHTMLHTML表单表单表单表单(form)(form)(form)(form)表单表单表单表单n n表单是可以把浏览者输入的数据传送到服务器端的程序表单是可以把浏览者输入的数据传送到服务器端的程序表单是可以把浏览者输入的数据传送到服务器端的程序表单是可以把浏览者输入的数据传送到服务器端的程序(比如比如比如比如ASPASPASPASP，PHP)PHP)PHP)PHP)的的的的HTMLHTMLHTMLHTML元素元素元素元素n n服务器端程序可以处理表单传过来的数据，从而进行一些动作服务器端程序可以处理表单传过来的数据
3、，从而进行一些动作服务器端程序可以处理表单传过来的数据，从而进行一些动作服务器端程序可以处理表单传过来的数据，从而进行一些动作n n比如，比如，比如，比如，bbsbbsbbsbbs、blogblogblogblog的登陆系统，购物车系统等的登陆系统，购物车系统等的登陆系统，购物车系统等的登陆系统，购物车系统等n n一份表单的基本架构是：一份表单的基本架构是：一份表单的基本架构是：一份表单的基本架构是：n n在在在在 标记的包围下加上一种或以上的表单输入方式及一个或标记的包围下加上一种或以上的表单输入方式及一个或标记的包围下加上一种或以上的表单输入方式及一个或标记的包围下加上一种或以上的表单输入
4、方式及一个或以上的按键。以上的按键。以上的按键。以上的按键。n n是一个成对的标记。是一个成对的标记。是一个成对的标记。是一个成对的标记。n n表单属于一个容器标记，表示其它表单控件需要在它的包围中才有效，表单属于一个容器标记，表示其它表单控件需要在它的包围中才有效，表单属于一个容器标记，表示其它表单控件需要在它的包围中才有效，表单属于一个容器标记，表示其它表单控件需要在它的包围中才有效，它是一个空标记。它是一个空标记。它是一个空标记。它是一个空标记。的参数设定（常用）的参数设定（常用）的参数设定（常用）的参数设定（常用）n nactionactionactionactionn n浏览者输入的
5、数据被传送到的地方，比如一个浏览者输入的数据被传送到的地方，比如一个浏览者输入的数据被传送到的地方，比如一个浏览者输入的数据被传送到的地方，比如一个PHPPHPPHPPHP或或或或ASPASPASPASP页面。页面。页面。页面。n n表单通常是与表单通常是与表单通常是与表单通常是与 CGI CGI CGI CGI 配合使用的，参数配合使用的，参数配合使用的，参数配合使用的，参数 action action action action 便是用以指明该便是用以指明该便是用以指明该便是用以指明该 CGI CGI CGI CGI 程式的位置，这程式的位置，这程式的位置，这程式的位置，这 样此表单所填的
6、资料才能正确传给样此表单所填的资料才能正确传给样此表单所填的资料才能正确传给样此表单所填的资料才能正确传给 CGI CGI CGI CGI 作处理。作处理。作处理。作处理。的参数设定（常用）的参数设定（常用）的参数设定（常用）的参数设定（常用）n n若没有若没有若没有若没有CGICGICGICGI，可设定，可设定，可设定，可设定ACTION=“mailto:”ACTION=“mailto:”ACTION=“mailto:”ACTION=“mailto:”n n那样该表单所填的资料将会发到该邮件地址那样该表单所填的资料将会发到该邮件地址那样该表单所填的资料将会发到该邮件地址那样该表单所填的资料将
7、会发到该邮件地址 的参数设定（常用）的参数设定（常用）的参数设定（常用）的参数设定（常用）n nmethodmethodmethodmethodn n数据传送的方法数据传送的方法数据传送的方法数据传送的方法 n n传送资料给传送资料给传送资料给传送资料给CGICGICGICGI的的方式，可选值为的的方式，可选值为的的方式，可选值为的的方式，可选值为POSTPOSTPOSTPOST、GETGETGETGET。n nPOSTPOSTPOSTPOST容许传送大量资料，但容许传送大量资料，但容许传送大量资料，但容许传送大量资料，但GETGETGETGET则只接受低于则只接受低于则只接受低于则只接受低于
8、1K1K1K1K的资料的资料的资料的资料 表单控件：表单控件：表单控件：表单控件：n nINPUT INPUT INPUT INPUT 的种类：的种类：的种类：的种类：n nText,RadioText,RadioText,RadioText,Radio，Checkbox,Password,Submit/Reset,Image,File,Checkbox,Password,Submit/Reset,Image,File,Checkbox,Password,Submit/Reset,Image,File,Checkbox,Password,Submit/Reset,Image,File,Hidd
9、enHiddenHiddenHidden，ButtonButtonButtonButton。INPUT INPUT INPUT n n单行文本框单行文本框单行文本框单行文本框n n例：例：例：例：input type=Text name=age value=20 size=2 input type=Text name=age value=20 size=2 input type=Text name=age value=20 size=2 maxlength=255maxlength=255maxlength=255 n ntype=Texttype=Texttype=Texttype=Text
10、n n指明类型为单行文本框指明类型为单行文本框指明类型为单行文本框指明类型为单行文本框INPUT INPUT INPUT 参数参数参数参数nname=agename=agename=agename=agen单行文本框名称，这是最重要的一个，方便单行文本框名称，这是最重要的一个，方便单行文本框名称，这是最重要的一个，方便单行文本框名称，这是最重要的一个，方便 CGI CGI CGI CGI 辨认由表单传来的资料辨认由表单传来的资料辨认由表单传来的资料辨认由表单传来的资料INPUT INPUT INPUT 参数参数参数参数n虽说可随便命名，但通常虽说可随便命名，但通常虽说可随便命名，但通常虽说可随
11、便命名，但通常 CGI CGI CGI CGI 程式中都有指定名程式中都有指定名程式中都有指定名程式中都有指定名称，若转用其它名称便需要修改该称，若转用其它名称便需要修改该称，若转用其它名称便需要修改该称，若转用其它名称便需要修改该 CGI CGI CGI CGI 程式了，程式了，程式了，程式了，名称可为没空白没特别符号的英文或数字，有大名称可为没空白没特别符号的英文或数字，有大名称可为没空白没特别符号的英文或数字，有大名称可为没空白没特别符号的英文或数字，有大小写的分别，可以写成小写的分别，可以写成小写的分别，可以写成小写的分别，可以写成 Your_AgeYour_AgeYour_AgeYo
12、ur_Agen若有访客于此表单此文本框填入若有访客于此表单此文本框填入若有访客于此表单此文本框填入若有访客于此表单此文本框填入 40 40 40 40 的话，那么传的话，那么传的话，那么传的话，那么传给给给给 CGI CGI CGI CGI 的字符串便是的字符串便是的字符串便是的字符串便是 Your_Age=40Your_Age=40Your_Age=40Your_Age=40。INPUT INPUT INPUT 参数参数参数参数n nvalue=20 value=20 value=20 value=20 n n文本框默认显示的值。若不填写则文字盒是空白的，等待用户键入文本框默认显示的值。若不
13、填写则文字盒是空白的，等待用户键入文本框默认显示的值。若不填写则文字盒是空白的，等待用户键入文本框默认显示的值。若不填写则文字盒是空白的，等待用户键入n n若若若若 value=“20”value=“20”value=“20”value=“20”的话，的话，的话，的话，20 20 20 20 便会在页面载入后就出现在文字盒中，便会在页面载入后就出现在文字盒中，便会在页面载入后就出现在文字盒中，便会在页面载入后就出现在文字盒中，但用户可以任意更改，主要起提示作用。但用户可以任意更改，主要起提示作用。但用户可以任意更改，主要起提示作用。但用户可以任意更改，主要起提示作用。INPUT INPUT I
14、NPUT 参数参数参数参数n nsize=2“size=2“size=2“size=2“n n文本框显示的长度文本框显示的长度文本框显示的长度文本框显示的长度n nmaxlength=255maxlength=255maxlength=255maxlength=255n n允许输入的文字上限允许输入的文字上限允许输入的文字上限允许输入的文字上限n n单选按钮单选按钮单选按钮单选按钮n n例如：例如：例如：例如：input type=Radio name=gender value=female input type=Radio name=gender value=female input typ
15、e=Radio name=gender value=female checkedcheckedcheckedn ntype=Radio type=Radio type=Radio type=Radio n n输入方式为输入方式为输入方式为输入方式为 Radio Radio Radio Radio，能产生，能产生，能产生，能产生一个单选按钮。一个单选按钮。一个单选按钮。一个单选按钮。参数参数参数参数n nname=gender name=gender name=gender name=gender n n此单选按钮此单选按钮此单选按钮此单选按钮RadioRadioRadioRadio的名称，参考
16、的名称，参考的名称，参考的名称，参考TextTextTextText部分的说明。部分的说明。部分的说明。部分的说明。参数参数参数参数n nvalue=female value=female value=female value=female n n内定值。每一个内定值。每一个内定值。每一个内定值。每一个 radio radio radio radio 必须及仅有一个必须及仅有一个必须及仅有一个必须及仅有一个 valuevaluevaluevaluen n通常有同时采用两个或以上同通常有同时采用两个或以上同通常有同时采用两个或以上同通常有同时采用两个或以上同 name name name nam
17、e 不同不同不同不同 value value value value 的的的的 Radio Radio Radio Radio 输入方式，输入方式，输入方式，输入方式，可让使用使任选其一可让使用使任选其一可让使用使任选其一可让使用使任选其一参数参数参数参数n nchecked checked checked checked n n设该设该设该设该 Radio Radio Radio Radio 为内定被选。同为内定被选。同为内定被选。同为内定被选。同 name name name name 的各个的各个的各个的各个 Radio Radio Radio Radio 中只能有一个使用，中只能有一个
18、使用，中只能有一个使用，中只能有一个使用，或全不使用这或全不使用这或全不使用这或全不使用这 参数。参数。参数。参数。n n复选框复选框复选框复选框n n例：例：例：例：input type=Checkbox name=idol value=Leon input type=Checkbox name=idol value=Leon input type=Checkbox name=idol value=Leon checkedcheckedchecked n ntype=Checkboxtype=Checkboxtype=Checkboxtype=Checkboxn n输入方式为输入方式为输入方
19、式为输入方式为 复选框复选框复选框复选框参数参数参数参数n nname=idol name=idol name=idol name=idol n n此此此此CheckboxCheckboxCheckboxCheckbox名称，参考名称，参考名称，参考名称，参考TextTextTextText部分的说明。部分的说明。部分的说明。部分的说明。n nvalue=Leon value=Leon value=Leon value=Leon n n内定值。每一个内定值。每一个内定值。每一个内定值。每一个CheckboxCheckboxCheckboxCheckbox必须及仅有一个必须及仅有一个必须及仅有一
20、个必须及仅有一个 valuevaluevaluevalue，当被剔选时这值，当被剔选时这值，当被剔选时这值，当被剔选时这值便会传及便会传及便会传及便会传及CGICGICGICGI，例如所传字串，例如所传字串，例如所传字串，例如所传字串 idol=Leon idol=Leon idol=Leon idol=Leon。参数参数参数参数n nchecked checked checked checked n n设该设该设该设该 Checkbox Checkbox Checkbox Checkbox 为内定被选。每个为内定被选。每个为内定被选。每个为内定被选。每个 Checkbox Checkbox
21、Checkbox Checkbox 都是独立的，所以每都是独立的，所以每都是独立的，所以每都是独立的，所以每一个都可使用这一个都可使用这一个都可使用这一个都可使用这 参数，不像参数，不像参数，不像参数，不像 RadioRadioRadioRadio。n n密码框密码框密码框密码框 n n例如：例如：例如：例如：input type=Password name=pw input type=Password name=pw input type=Password name=pw value=ArrayArrayArray size=5 maxlength=Arrayvalue=ArrayArray
22、Array size=5 maxlength=Arrayvalue=ArrayArrayArray size=5 maxlength=Array 参数参数参数参数n nPassword Password Password Password 的其他参数和的其他参数和的其他参数和的其他参数和 Text Text Text Text 是完全相同的，请参考是完全相同的，请参考是完全相同的，请参考是完全相同的，请参考 Text Text Text Text 的介绍。的介绍。的介绍。的介绍。n n两者作用不同，两者作用不同，两者作用不同，两者作用不同，Password Password Password
23、Password 所输入的字元全以所输入的字元全以所输入的字元全以所输入的字元全以*号表示。号表示。号表示。号表示。或或或或或或input type=“input type=“input type=“input type=“input type=“”n nSubmit Submit Submit Submit（提交）及（提交）及（提交）及（提交）及 Reset Reset Reset Reset（重置）（重置）（重置）（重置）n n这是表单上重要的两个按键，两者所附带的参数相同。这是表单上重要的两个按键，两者所附带的参数相同。这是表单上重要的两个按键，两者所附带的参数相同。这是表单上重要的两个
24、按键，两者所附带的参数相同。或或或或或或input type=“input type=“input type=“input type=“input type=“”n n例如：例如：例如：例如：n ninput type=Submit name=other_funtion value=input type=Submit name=other_funtion value=input type=Submit name=other_funtion value=n ninput type=Reset value=input type=Reset value=input type=Reset value=
25、nImage Image Image Image（图片按键）（图片按键）（图片按键）（图片按键）n这通常用以取代这通常用以取代这通常用以取代这通常用以取代 Submit Submit Submit Submit 及及及及 Reset Reset Reset Reset 两个按键，因两个按键，因两个按键，因两个按键，因为由程式产生的按键并不漂亮，这为由程式产生的按键并不漂亮，这为由程式产生的按键并不漂亮，这为由程式产生的按键并不漂亮，这 Image Image Image Image 参参参参 数数数数便容许你采用自已制造的按键。便容许你采用自已制造的按键。便容许你采用自已制造的按键。便容许你采
26、用自已制造的按键。n例如：例如：例如：例如：input type=Image name=submit input type=Image name=submit input type=Image name=submit src=ex_icon.gifsrc=ex_icon.gifsrc=ex_icon.gif ntype=Image type=Image type=Image type=Image n输入方式为输入方式为输入方式为输入方式为 ImageImageImageImage。nname=submit name=submit name=submit name=submit n所要代表的按键
27、，可以是所要代表的按键，可以是所要代表的按键，可以是所要代表的按键，可以是 submit,reset,submit,reset,submit,reset,submit,reset,或其它。或其它。或其它。或其它。nsrc=ex_icon.gif src=ex_icon.gif src=ex_icon.gif src=ex_icon.gif n按键图片来源。按键图片来源。按键图片来源。按键图片来源。n n通常用于上传文件。通常用于上传文件。通常用于上传文件。通常用于上传文件。n n例如：例如：例如：例如：input type=File name=upload size=20 input type
28、=File name=upload size=20 input type=File name=upload size=20 maxlength=100 accept=text/htmlmaxlength=100 accept=text/htmlmaxlength=100 accept=text/html 参数参数参数参数n nname=upload name=upload name=upload name=upload n n这文件传输的名称，用以识别之用。这文件传输的名称，用以识别之用。这文件传输的名称，用以识别之用。这文件传输的名称，用以识别之用。n naccept=text/html a
29、ccept=text/html accept=text/html accept=text/html n n所接受的文件类别，有二十六种选择，但可不设定。所接受的文件类别，有二十六种选择，但可不设定。所接受的文件类别，有二十六种选择，但可不设定。所接受的文件类别，有二十六种选择，但可不设定。n n隐藏信息隐藏信息隐藏信息隐藏信息n n例如：例如：例如：例如：参数参数参数参数n ntype=Hidden type=Hidden type=Hidden type=Hidden n n它不会显示任何内容，而是一个内定值随表单一起它不会显示任何内容，而是一个内定值随表单一起它不会显示任何内容，而是一个内
30、定值随表单一起它不会显示任何内容，而是一个内定值随表单一起 传给传给传给传给 CGICGICGICGI，如由，如由，如由，如由 CGI CGI CGI CGI 产生的会员号码，或传入可更改的参数以调整产生的会员号码，或传入可更改的参数以调整产生的会员号码，或传入可更改的参数以调整产生的会员号码，或传入可更改的参数以调整 CGI CGI CGI CGI 而避免而避免而避免而避免 修改修改修改修改 CGI CGI CGI CGI 程式码。程式码。程式码。程式码。参数参数参数参数n nname=ID name=ID name=ID name=ID n n这文件传输的名称，用以识别之用。这文件传输的名
31、称，用以识别之用。这文件传输的名称，用以识别之用。这文件传输的名称，用以识别之用。n nvalue=6618 value=6618 value=6618 value=6618 n n内定值，会以如内定值，会以如内定值，会以如内定值，会以如 ID=6618 ID=6618 ID=6618 ID=6618 形式传给形式传给形式传给形式传给 CGICGICGICGI。n n按钮。常配合按钮。常配合按钮。常配合按钮。常配合 JavaScript JavaScript JavaScript JavaScript 使用使用使用使用n n例如：例如：例如：例如：n ntype=Buttontype=Butt
32、ontype=Buttontype=Buttonn n指定为按钮指定为按钮指定为按钮指定为按钮 参数参数参数参数n nname=useless name=useless name=useless name=useless n n这文件传输的名称，用处不大。这文件传输的名称，用处不大。这文件传输的名称，用处不大。这文件传输的名称，用处不大。n nvalue=Back value=Back value=Back value=Back n n按键显示名称。按键显示名称。按键显示名称。按键显示名称。n n是下拉是下拉是下拉是下拉/列表项，每一选项皆由列表项，每一选项皆由列表项，每一选项皆由列表项，每一
33、选项皆由 所所所所标示，把它当作包含标记或空标记使用都可以。标示，把它当作包含标记或空标记使用都可以。标示，把它当作包含标记或空标记使用都可以。标示，把它当作包含标记或空标记使用都可以。n n 的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：n n例如：例如：例如：例如：的参数（常用）：的参数（常用）：的参数（常用）：的参数（常用）：n nname=where name=where name=where name=where n n这下拉这下拉这下拉这下拉/列表项的名称，作识别之用，将会传及列表项的名称，作识别之用，将会传及列表项的名称，作识别之用，将会传及列表
34、项的名称，作识别之用，将会传及 CGICGICGICGI。n nsize=6 size=6 size=6 size=6 n n下拉下拉下拉下拉/列表项的列数，即其高度。列表项的列数，即其高度。列表项的列数，即其高度。列表项的列数，即其高度。n nmultiple multiple multiple multiple：允许多选。：允许多选。：允许多选。：允许多选。的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：n n例如：例如：例如：例如：n nvalue=tw value=tw value=tw value=tw n n该选项的值，将会传及该选项的值，将会传及该
35、选项的值，将会传及该选项的值，将会传及 CGICGICGICGI。的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：n nselected selected selected selected n n设该选项为内定被选。一个选项只能有一项或零可内定被选。设该选项为内定被选。一个选项只能有一项或零可内定被选。设该选项为内定被选。一个选项只能有一项或零可内定被选。设该选项为内定被选。一个选项只能有一项或零可内定被选。n n是表单文字区块标记，需要填写大量文本时使用。是表单文字区块标记，需要填写大量文本时使用。是表单文字区块标记，需要填写大量文本时使用。是表单文字区块标
36、记，需要填写大量文本时使用。n n 的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：的参数设定（常用）：n n例如：例如：例如：例如：参数参数参数参数n nname=comments name=comments name=comments name=comments n n这文字区块的名称，作识别之用，将会传及这文字区块的名称，作识别之用，将会传及这文字区块的名称，作识别之用，将会传及这文字区块的名称，作识别之用，将会传及 CGICGICGICGI。n ncols=“40”cols=“40”cols=“40”cols=“40”：文字区块的宽度。：文字区块的宽度。：文字区块的宽度。：
37、文字区块的宽度。n nrows=“4”rows=“4”rows=“4”rows=“4”：文字区块的列数，即高度。：文字区块的列数，即高度。：文字区块的列数，即高度。：文字区块的列数，即高度。n n表单容器，指明其中包含的内容是一个集合。表单容器，指明其中包含的内容是一个集合。表单容器，指明其中包含的内容是一个集合。表单容器，指明其中包含的内容是一个集合。nformform标签的功能是用于申明表单，定义采集数标签的功能是用于申明表单，定义采集数据的范围，里面包含的数据将被提交到服务器据的范围，里面包含的数据将被提交到服务器或者电子邮件里。或者电子邮件里。应用应用应用应用 后的效果后的效果后的效果后的效果后的效果后的效果表单美化表单美化表单美化表单美化n n文本框美化文本框美化文本框美化文本框美化表单美化表单美化表单美化表单美化n n下拉列表框美化下拉列表框美化下拉列表框美化下拉列表框美化表单美化表单美化表单美化表单美化n n制作整洁的登录框制作整洁的登录框制作整洁的登录框制作整洁的登录框表单美化表单美化表单美化表单美化n n制作用户留言页面制作用户留言页面制作用户留言页面制作用户留言页面谢谢！谢谢！谢谢！谢谢！