Html语言——表单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
button
– 普通按钮 用来调用脚本语言处理表单数据 普通按钮,用来调用脚本语言处理表单数据 – 格式 例如 格式:(例如 例如)
网页设计教程
Html语言 语言——表单 语言 表单
表单的作用 建立表单
2011-3-21
School of Applied Technology
Soochow University
2
表单的作用
表单（ 表单（Form）可以让网页的浏览者输入数 ） 然后将数据返回Web服务器，以备登 服务器， 据，然后将数据返回 服务器 录或查询之用 表单可以提供输入的界面， 表单可以提供输入的界面，让浏览者输入 数据，常见的应用有： 数据，常见的应用有：
允许浏览者从一组选取单一或多个 您喜欢下列哪些 选项，比方说，要票选最喜爱的男 活动（可复选）？ 歌手，于是以复选框设计一组包含 5个歌手的选项，然后浏览者可以 水上运动 旅行 从5个歌手中做复选。
续上表 表单字段 范 例 说 明
选择钮 性别： 男 下拉式 菜单 按钮 密码 字段
提交
女
允许浏览者从一组选项中选取单一选 项，比方说，要知道浏览者的性别， 于是以选择设计一组包含男和女的选 项，然后浏览者只能从中选择男或选 择女。 允许浏览者从下拉式菜单所列出的清 单中做选择 当浏览者的表单输入完成之后，可以 点取按钮将数据传送回Web服务器； 或者，当浏览器想放弃刚才输入的数 据，亦可点取按钮重新输入。 密码字段其实就像单行文本框一样， 只是无论浏览者输入什么数据，密码 字段都会以星号（*）表示。
2011-3-21 School of Applied Technology Soochow University 7
<form>标记属性说明 标记属性说明(1) 标记属性说明
action
– 使用 可指定处理表单的应用程序，现在主要使用 使用url可指定处理表单的应用程序， 可指定处理表单的应用程序 ASP，是服务器端处理数据的主要应用程序。以前 ，是服务器端处理数据的主要应用程序。 出要常使用CGI程序和 程序和Java、C和Perl编写的应用 出要常使用 程序和 、 和 编写的应用 程序。如果没有声明此程序， 程序。如果没有声明此程序，则使用网站默认的应 用程序。 用程序。 language：”JavaScript|Jscript|VBScript|VBS” – 声明了表单采用的脚本语言，在不同的系统和浏览 声明了表单采用的脚本语言， 器中有一定的区别，不过IE浏览器对这些脚步语言 器中有一定的区别，不过 浏览器对这些脚步语言 都兼容。 都兼容。
2011-3-21
School of Applied Technology
Soochow University
8
<form>标记属性说明 标记属性说明(2) 标记属性说明
method: “GET|POST”
– 用来告知浏览器表单以何种方式发送，GET可将表单 用来告知浏览器表单以何种方式发送， 可将表单 的内容作为查询url中的串 数据的表现形式)来传递 中的串(数据的表现形式 来传递， 的内容作为查询 中的串 数据的表现形式 来传递， 服务器使用QueryString集合来存储这些内容。POST 集合来存储这些内容。 服务器使用 集合来存储这些内容 可通过action所指定的服务器程序对表单进行处理。 所指定的服务器程序对表单进行处理。 可通过 所指定的服务器程序对表单进行处理
2011-3-21
School of Applied Technology
Soochow University
12
<input>标记属性说明 标记属性说明
align
– 用于设定表单的位置是靠左 用于设定表单的位置是靠左(left)、靠右 、靠右(right)、 、 居中(middle)、靠上 (top)还是靠底 还是靠底(bottom). 居中 、 还是靠底
maxlength
表示在输入单行文本的时候，最大输入字符个数； 表示在输入单行文本的时候，最大输入字符个数；
size
用于设定在输入多行文本时的最大输入字符数， 用于设定在输入多行文本时的最大输入字符数，可以应用样式 表的width和height属性来描述； 属性来描述； 表的 和 属性来描述
onclick
全部重写
请输入密码：
建立表单(2) 建立表单
使用<form>…</form>标记建立表单 标记建立表单 使用
– 基本格式
• <form action＝url ＝ language=JaHale Waihona Puke BaiduaScript|Jscript|VBScript|VBS method=get|post name＝value ＝ onreset=function onsubmit＝function ＝ target=window title=text > • </form>
– Web搜索：知名的Yahoo、新浪、搜狐、首都 搜索：知名的Yahoo 新浪、搜狐、 Yahoo、 搜索 在线（263）、Chinaren、网易（163） ）、Chinaren 在线（263）、Chinaren、网易（163）等。 – 网络票选： 网络票选： – 意见调查： 意见调查： – 报名或在线订购： 报名或在线订购：
School of Applied Technology Soochow University 14
<input>标记属性说明 标记属性说明
src
– – – – 是针对type=image的情况来说的，设定图像文件的地址； 是针对 的情况来说的，设定图像文件的地址； 的情况来说的
checked
表示选择框中，此项被默认选中； 表示选择框中，此项被默认选中；
– 格式
• <input aligh=left|righ|top|middle|bottom name=value type=text|textarea|password|checkbox|radio|submit| reset|file|hidden|image|button value=value src=url checked maxlength=n size=n onclick=function onselect=function> 文本
2011-3-21 School of Applied Technology Soochow University 3
建立表单(1) 建立表单
表单的建立可以分成3个阶段来讨论： 表单的建立可以分成 个阶段来讨论： 个阶段来讨论
– 决定要搜集的数据：首先，您必须根据实际需 决定要搜集的数据：首先， 求决定要搜集哪些数据。 求决定要搜集哪些数据。 – 建立表单：首先，您必须针对要搜集的数据建 建立表单：首先， 立一个输入界面，也就是表单的形式。 立一个输入界面，也就是表单的形式。 – 设计表单处理程序：最后，您还要设计表单处 设计表单处理程序：最后， 理程序， 理程序，这个程序负责接收浏览者所输入的数 据，以便将数据进行登录或查询等进一步的处 如表9-1所示 所示。 理，如表 所示。
name
– 设定当前变量名称
value
– 用于设定输入默认值，即如果用户不输入的话， 用于设定输入默认值，即如果用户不输入的话， 就采用此默认值
2011-3-21 School of Applied Technology Soochow University 13
<input>标记属性说明 标记属性说明
2011-3-21 School of Applied Technology Soochow University 9
一个表单例子
<html> <head><title>表单的应用 表单的应用</title></head> 表单的应用 <body> <p><font size=4 t> <b>意见反馈 意见反馈</b> </font></p> 意见反馈 <!-- 标记 标记<form></form>之内的元素都称之为表单内容。action的值为处理 之内的元素都称之为表单内容。 之内的元素都称之为表单内容 的值为处理 表单内容的程序method的值为表单的处理方式，ID为表单的唯一标志号同 的值为表单的处理方式， 为表单的唯一标志号同 表单内容的程序 的值为表单的处理方式 时可以引用样式类来描述表单样式， 时可以引用样式类来描述表单样式，name为表单名称 --> 为表单名称 <form action=/toupiao/tou.asp method=post id=form1 name=form1> <font size=2> 同学们认为苏州大学为大家提供的学习环境怎样？<br> </font> 同学们认为苏州大学为大家提供的学习环境怎样？ <font size=2> <input name=r1 type=radio value=2> 非常好！<br> 非常好！ <input name=r1 type=radio value=3>好！<br> 好 <input name=r1 type=radio value=5>一般！<br> 一般！ 一般 <input name=r1 type=radio value=7>差！<br> </font> 差 <input id=submit1 name=submit1 type=submit value=submit> </form> </body> </html>
2011-3-21 School of Applied Technology Soochow University 10
一个表单例子效果
2011-3-21
School of Applied Technology
Soochow University
11
表单中的元素
声明表单元素标记： 声明表单元素标记：<input>
type
– 决定了输入数据的类型。其选项较多，各项的意义是： 决定了输入数据的类型。其选项较多，各项的意义是：
• • • • • • • • • • •
2011-3-21
type=text 表示输入单行文本 typet=textarea：表示输入多行文本； ：表示输入多行文本； type=password:表示输入数据为密码，用星号表示； 表示输入数据为密码， 表示输入数据为密码 用星号表示； type=checkbox：表示复选框； ：表示复选框； type=radio：表示单选框； ：表示单选框； type=submit：表示提交按钮，数据将被送到服务器； ：表示提交按钮，数据将被送到服务器； tyPe=reset：表示清除表单数据，以便重新输入； ：表示清除表单数据，以便重新输入； type=file：表示插入一个文件； ：表示插入一个文件； type=hidden：表示隐藏按钮； ：表示隐藏按钮； type＝image：表示插入一个图像； ＝ ：表示插入一个图像； type=button：表示普通按钮； ：表示普通按钮；
2011-3-21 School of Applied Technology Soochow University 4
表9-1 表单字段 范 例 说 明
单行文 上传您的GIF文件 允许浏览者输入单行的文字,如姓 名、电话、传真、地址、E-Mail等。 本框 多行 文本 框 复 选 框
允许浏览者输入多行的文字，如建 议、评语、自我介绍等。
– – 表示在按下输入时调用指定的子程序； 表示在按下输入时调用指定的子程序；
nselect
表示当前项被选择时调用指定的子程序。 表示当前项被选择时调用指定的子程序。
2011-3-21
School of Applied Technology
Soochow University
15
表单中应具备的元素(1) 表单中应具备的元素
name
– 表单名，这样服务器可以依据表单名称对其进行数据 表单名， 处理 target: “window_name|_blank|_parent|_self|_top” – 声明了目标窗口或者框架的位置
onrest和onsubmit 和
– 主要针对“reset”按钮和“submit”按钮来说的，分别 主要针对“ 按钮和“ 按钮来说的， 按钮和 按钮来说的 设定了在按下相应的按钮之后要执行的子程序。 设定了在按下相应的按钮之后要执行的子程序。
– 普通按钮 用来调用脚本语言处理表单数据 普通按钮,用来调用脚本语言处理表单数据 – 格式 例如 格式:(例如 例如)
网页设计教程
Html语言 语言——表单 语言 表单
表单的作用 建立表单
2011-3-21
School of Applied Technology
Soochow University
2
表单的作用
表单（ 表单（Form）可以让网页的浏览者输入数 ） 然后将数据返回Web服务器，以备登 服务器， 据，然后将数据返回 服务器 录或查询之用 表单可以提供输入的界面， 表单可以提供输入的界面，让浏览者输入 数据，常见的应用有： 数据，常见的应用有：
允许浏览者从一组选取单一或多个 您喜欢下列哪些 选项，比方说，要票选最喜爱的男 活动（可复选）？ 歌手，于是以复选框设计一组包含 5个歌手的选项，然后浏览者可以 水上运动 旅行 从5个歌手中做复选。
续上表 表单字段 范 例 说 明
选择钮 性别： 男 下拉式 菜单 按钮 密码 字段
提交
女
允许浏览者从一组选项中选取单一选 项，比方说，要知道浏览者的性别， 于是以选择设计一组包含男和女的选 项，然后浏览者只能从中选择男或选 择女。 允许浏览者从下拉式菜单所列出的清 单中做选择 当浏览者的表单输入完成之后，可以 点取按钮将数据传送回Web服务器； 或者，当浏览器想放弃刚才输入的数 据，亦可点取按钮重新输入。 密码字段其实就像单行文本框一样， 只是无论浏览者输入什么数据，密码 字段都会以星号（*）表示。
2011-3-21 School of Applied Technology Soochow University 7
<form>标记属性说明 标记属性说明(1) 标记属性说明
action
– 使用 可指定处理表单的应用程序，现在主要使用 使用url可指定处理表单的应用程序， 可指定处理表单的应用程序 ASP，是服务器端处理数据的主要应用程序。以前 ，是服务器端处理数据的主要应用程序。 出要常使用CGI程序和 程序和Java、C和Perl编写的应用 出要常使用 程序和 、 和 编写的应用 程序。如果没有声明此程序， 程序。如果没有声明此程序，则使用网站默认的应 用程序。 用程序。 language：”JavaScript|Jscript|VBScript|VBS” – 声明了表单采用的脚本语言，在不同的系统和浏览 声明了表单采用的脚本语言， 器中有一定的区别，不过IE浏览器对这些脚步语言 器中有一定的区别，不过 浏览器对这些脚步语言 都兼容。 都兼容。
2011-3-21
School of Applied Technology
Soochow University
8
<form>标记属性说明 标记属性说明(2) 标记属性说明
method: “GET|POST”
– 用来告知浏览器表单以何种方式发送，GET可将表单 用来告知浏览器表单以何种方式发送， 可将表单 的内容作为查询url中的串 数据的表现形式)来传递 中的串(数据的表现形式 来传递， 的内容作为查询 中的串 数据的表现形式 来传递， 服务器使用QueryString集合来存储这些内容。POST 集合来存储这些内容。 服务器使用 集合来存储这些内容 可通过action所指定的服务器程序对表单进行处理。 所指定的服务器程序对表单进行处理。 可通过 所指定的服务器程序对表单进行处理
2011-3-21
School of Applied Technology
Soochow University
12
<input>标记属性说明 标记属性说明
align
– 用于设定表单的位置是靠左 用于设定表单的位置是靠左(left)、靠右 、靠右(right)、 、 居中(middle)、靠上 (top)还是靠底 还是靠底(bottom). 居中 、 还是靠底
maxlength
表示在输入单行文本的时候，最大输入字符个数； 表示在输入单行文本的时候，最大输入字符个数；
size
用于设定在输入多行文本时的最大输入字符数， 用于设定在输入多行文本时的最大输入字符数，可以应用样式 表的width和height属性来描述； 属性来描述； 表的 和 属性来描述
onclick
全部重写
请输入密码：
建立表单(2) 建立表单
使用<form>…</form>标记建立表单 标记建立表单 使用
– 基本格式
• <form action＝url ＝ language=JaHale Waihona Puke BaiduaScript|Jscript|VBScript|VBS method=get|post name＝value ＝ onreset=function onsubmit＝function ＝ target=window title=text > • </form>
– Web搜索：知名的Yahoo、新浪、搜狐、首都 搜索：知名的Yahoo 新浪、搜狐、 Yahoo、 搜索 在线（263）、Chinaren、网易（163） ）、Chinaren 在线（263）、Chinaren、网易（163）等。 – 网络票选： 网络票选： – 意见调查： 意见调查： – 报名或在线订购： 报名或在线订购：
School of Applied Technology Soochow University 14
<input>标记属性说明 标记属性说明
src
– – – – 是针对type=image的情况来说的，设定图像文件的地址； 是针对 的情况来说的，设定图像文件的地址； 的情况来说的
checked
表示选择框中，此项被默认选中； 表示选择框中，此项被默认选中；
– 格式
• <input aligh=left|righ|top|middle|bottom name=value type=text|textarea|password|checkbox|radio|submit| reset|file|hidden|image|button value=value src=url checked maxlength=n size=n onclick=function onselect=function> 文本
2011-3-21 School of Applied Technology Soochow University 3
建立表单(1) 建立表单
表单的建立可以分成3个阶段来讨论： 表单的建立可以分成 个阶段来讨论： 个阶段来讨论
– 决定要搜集的数据：首先，您必须根据实际需 决定要搜集的数据：首先， 求决定要搜集哪些数据。 求决定要搜集哪些数据。 – 建立表单：首先，您必须针对要搜集的数据建 建立表单：首先， 立一个输入界面，也就是表单的形式。 立一个输入界面，也就是表单的形式。 – 设计表单处理程序：最后，您还要设计表单处 设计表单处理程序：最后， 理程序， 理程序，这个程序负责接收浏览者所输入的数 据，以便将数据进行登录或查询等进一步的处 如表9-1所示 所示。 理，如表 所示。
name
– 设定当前变量名称
value
– 用于设定输入默认值，即如果用户不输入的话， 用于设定输入默认值，即如果用户不输入的话， 就采用此默认值
2011-3-21 School of Applied Technology Soochow University 13
<input>标记属性说明 标记属性说明
2011-3-21 School of Applied Technology Soochow University 9
一个表单例子
<html> <head><title>表单的应用 表单的应用</title></head> 表单的应用 <body> <p><font size=4 t> <b>意见反馈 意见反馈</b> </font></p> 意见反馈 <!-- 标记 标记<form></form>之内的元素都称之为表单内容。action的值为处理 之内的元素都称之为表单内容。 之内的元素都称之为表单内容 的值为处理 表单内容的程序method的值为表单的处理方式，ID为表单的唯一标志号同 的值为表单的处理方式， 为表单的唯一标志号同 表单内容的程序 的值为表单的处理方式 时可以引用样式类来描述表单样式， 时可以引用样式类来描述表单样式，name为表单名称 --> 为表单名称 <form action=/toupiao/tou.asp method=post id=form1 name=form1> <font size=2> 同学们认为苏州大学为大家提供的学习环境怎样？<br> </font> 同学们认为苏州大学为大家提供的学习环境怎样？ <font size=2> <input name=r1 type=radio value=2> 非常好！<br> 非常好！ <input name=r1 type=radio value=3>好！<br> 好 <input name=r1 type=radio value=5>一般！<br> 一般！ 一般 <input name=r1 type=radio value=7>差！<br> </font> 差 <input id=submit1 name=submit1 type=submit value=submit> </form> </body> </html>
2011-3-21 School of Applied Technology Soochow University 10
一个表单例子效果
2011-3-21
School of Applied Technology
Soochow University
11
表单中的元素
声明表单元素标记： 声明表单元素标记：<input>
type
– 决定了输入数据的类型。其选项较多，各项的意义是： 决定了输入数据的类型。其选项较多，各项的意义是：
• • • • • • • • • • •
2011-3-21
type=text 表示输入单行文本 typet=textarea：表示输入多行文本； ：表示输入多行文本； type=password:表示输入数据为密码，用星号表示； 表示输入数据为密码， 表示输入数据为密码 用星号表示； type=checkbox：表示复选框； ：表示复选框； type=radio：表示单选框； ：表示单选框； type=submit：表示提交按钮，数据将被送到服务器； ：表示提交按钮，数据将被送到服务器； tyPe=reset：表示清除表单数据，以便重新输入； ：表示清除表单数据，以便重新输入； type=file：表示插入一个文件； ：表示插入一个文件； type=hidden：表示隐藏按钮； ：表示隐藏按钮； type＝image：表示插入一个图像； ＝ ：表示插入一个图像； type=button：表示普通按钮； ：表示普通按钮；
2011-3-21 School of Applied Technology Soochow University 4
表9-1 表单字段 范 例 说 明
单行文 上传您的GIF文件 允许浏览者输入单行的文字,如姓 名、电话、传真、地址、E-Mail等。 本框 多行 文本 框 复 选 框
允许浏览者输入多行的文字，如建 议、评语、自我介绍等。
– – 表示在按下输入时调用指定的子程序； 表示在按下输入时调用指定的子程序；
nselect
表示当前项被选择时调用指定的子程序。 表示当前项被选择时调用指定的子程序。
2011-3-21
School of Applied Technology
Soochow University
15
表单中应具备的元素(1) 表单中应具备的元素
name
– 表单名，这样服务器可以依据表单名称对其进行数据 表单名， 处理 target: “window_name|_blank|_parent|_self|_top” – 声明了目标窗口或者框架的位置
onrest和onsubmit 和
– 主要针对“reset”按钮和“submit”按钮来说的，分别 主要针对“ 按钮和“ 按钮来说的， 按钮和 按钮来说的 设定了在按下相应的按钮之后要执行的子程序。 设定了在按下相应的按钮之后要执行的子程序。