1.3.2 HTML基本标记－表单及其控件标记

http://book.51cto.com 2007-04-07 10:17 郑阿奇机械工业出版社我要评论(0)

摘要：《ASP .NET程序设计教程》第1章“Web基础知识”第3节“超文本标记语言HTML”。这一节学习编写Web页面的基本语言—HTML语言，包括HTML文档的基本构成和HTML基本标记。HTML基本标记有很多，包括文档头标记、文本格式、列表标记、图像标记、超链接、表格、表单、框架等。本文介绍表单及其控件标记。
标签：html 标记表单 ASP .NET ASP .NET程序设计教程

表单（Form）用于从用户（站点访问者）收集信息，然后将这些信息提交给服务器进行处理。表单中可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据之后将其提交，该数据就会送交给表单处理程序进行处理。表单的使用包括两个部分内容：一部分是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序，在浏览器中执行，也可以是服务器处理程序，处理用户提交的数据，返回结果。表单定义格式如下：
<Form 定义>
[<Input定义>]
[<Textarea 定义>]
[<Select 定义>]
[<Botton定义>]
</Form>

(1) 表单标记
在HTML语言中，表单通过FORM标记来定义。
<Form属性="值"… 事件="代码">
……
</Form>
Form标记具有以下属性：
Name = 表单的名称。命名表单后，可以使用脚本语言来引用或控制该表单。
Method = 表单数据传输到服务器的方法。
其取值如下：
post：在HTTP请求中嵌入表单数据
get：将表单数据附加到请求该页的URL中
注意：若要使用get方法发送，URL的长度应限制在8192个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。此外，在发送用户名和密码、信用卡号或其他机密信息时，不要使用get方法，而应使用post方法。
Action = 接收表单数据的服务器端程序或动态网页的URL地址。
Target = 目标窗口
其取值如下：
_Blank：在未命名的新窗口中打开目标文档。
_parent：在显示当前文档的窗口的父窗口中打开目标文档。
_self：在提交表单所使用的窗口中打开目标文档。
_top：在当前窗口内打开目标文档，确保目标文档占用整个窗门。
在一个网页中可以创建多个表单，每个表单都可以包含各种各样的控件，例如文本框、单选按钮、复选框、下拉菜单以及按钮等。但表单不能嵌套使用。
Form标记具有以下事件：
OnSubmit = 提交表单时调用的事件处理程序
OnRest = 重置表单时调用的事件处理程序

(2) 表单输入控件标记
<Input 属性=值… 事件= "代码"…>
为了让用户通过表单输入数据，表单中可以使用Input标记创建各种输入型表单控件。表单控件类型通过Input标记的Type属性设置，包括单行文本框、密码文本框、复选框、单选按钮、文件域以及按钮等。
1) 单行文本框。在表单中添加单行文本框可以获取站点访问者提供的一行信息。创建单行文本框方法如下：
<Input Type="text"属性="值"… 事件="代码"…>
属性
Name = 单行文本框的名称，通过它可以在脚本中引用该文本框控件。
Value = 文本框的值
DefaultValue = 文本框的初始值
Size = 文本框的宽度（字符数）
MaxLength = 允许在文本框内输入的最大字符数。用户输入的字符数可以超过文本框的宽度，这时系统会将其滚动显示，但输入的字符数不能超过输入的最大字符数。
Form = 所属的表单（只读）
方法
Click()：单击该文本框
Focus()：得到焦点
Blur()：失去焦点
Select()：选择文本框的内容
事件
OnClick = 单击该文本框执行的代码
OnBlur = 失去焦点执行的代码
OnChange = 内容变化执行的代码
OnFocus = 得到焦点执行的代码
OnSelect = 选择内容执行的代码
例如:
用户名：<Input Type=text Name="nm" Value="">
2) 密码文本框。密码文本框也是一个单行文本框。当站点访问者在这个框中输入数据时，大部分的Web浏览器都会以星号显示密码以不让别人看到输入内容。创建密码文本框方法
如下：
<Input Type="password" 属性="值"… 事件="代码"…>
其中的属性、方法和事件与单行文本框基本相同。但它没有OnClick事件。
如果要求站点访问者输入密码后才能进入站点，则应在其表单中添加密码文本框。
3) 隐藏域。表单中添加隐藏域站点使访问者不能看见隐藏域的信息，每一个隐藏域都要有自己的名称和值。例如，如果有许多使用相同自定义处理程序的表单，则可以利用独特的名称或数字作为隐藏域的名称来区分各个表单。创建隐藏域方法如下：
<Input Type="hidden" 属性="值"…>
与单行文本框相比，它没有DefaultValue属性。
当提交表单时，隐藏域的名称和值将与可见表单域的名称和值一起包含在表单结果中。
4) 复选框。在表单中添加复选框可以让站点访问者去选择一个或多个选项或不选项。创建复选框的方法如下：
<Input Type="checkbox" 属性="值"… 事件="代码"…>选项文本
属性
Name = 复选框的名称
Value = 选中时提交的值
Checked：设置当第一次打开表单时该复选框处于选中状态。该复选框被选中时，值为true，否则为false。该属性是可选的。
DefaultChecked：判断复选框是否定义了Checked属性。若定义了Checked属性，则DefaultChecked为true，否则为false。
方法
Focus()：得到焦点
Blur()：失去焦点
Click()：单击该复选框
事件
OnFocus = 得到焦点执行的代码
OnBlur = 失去焦点执行的代码
OnClick = 单击该复选框执行的代码
当提交表单时，假如复选框被选中，它的内部名称和值都会包含在表单结果中。否则，只有名称会被纳入表单结果中，值则为空白。
例如：
签字笔<Input Type=checkbox Name="ch1" Checked>
钢笔<Input Type=checkbox Name="ch2">
圆珠笔<Input Type=checkbox Name="ch3">
5) 单选按钮。在表单中添加单选按钮可以让站点访问者从一组选项中选择其中之一。在一组单选按钮中，一次只能选择一个。创建单选按钮方法如下：
<Input Type="radio" 属性="值"… 事件="代码"…>选项文本
其属性如下：
Name = 单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。
Value = 提交时的值
Checked：设置当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。
单选按钮的方法和事件与复选框基本相同。
当提交表单时，该单选按钮组名称和所选取的单选按钮指定值都会包含在表单结果中，如果没有任何单选按钮被选取，组名称会被纳入表单结果中，值则为空白。
例如:
<Input Type=radio Checked Name=kd Value="教师">教师
<Input Type=radio Name=kd Value="学生">学生
<Input Type=radio Name=kd Value="公务员">公务员
<Input Type=radio Name=kd Value="医生">医生
6) 按钮。使用Input标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下：
<Input Type="submit | reset | button" 属性="值"… OnClick="代码">
属性
Type = submit：创建一个提交按钮。在表单中添加提交按钮后，站点访问者就可以在提交表单时，将表单数据（包括提交按钮的名称和值）以ASCII文本形式传送到由表单的Action属性指定的表单处理程序。一般来说，表单中必须有一个提交按钮。
Type = reset：创建一个重置按钮。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。但是，如果框中含有默认文本或选项为默认，单击重置按钮将会恢复这些设置值。
Type = button：创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为该按钮编写脚本。
Name = 按钮的名称
Value = 显示在按钮上的标题文本
事件
OnClick = 单击按钮执行的脚本代码

【例1.6】创建一个如图1-8所示的登录表单，其中包含有文本框、密码框、提交按钮和重置按钮。

图1-8 登录表单

源代码如下（Ex1-6.htm）：

<Html><Head><Title>创建登录表单</Title></Head>
<Body>
<Form>
　<Table Align="center" BgColor="blue" Width="380">
<Tr BgColor="#0034FF">
<Th ColSpan=2 Align=center><Font Color=#FFFFFF>登录表单</Font></Th></Tr>
<Tr><Td >用户名：</Td>
<Td Width=240 Height=50><Input Type=text Name=uname Size=20></Td></Tr>
<Tr><Td >密码：</Td>
<Td Width=240 Height=50><Input Type=password Name=ukl Size=20></Td></Tr>
<Tr Align=center>
<Td Width=115 Align=right Height=50>
　<Input Type=submit Value="提交" Name="bok"></Td>
<Td Width=241 Height=50><Input Type=reset Value="重填" Name="bcls"> </Td> </Tr>
　</Table>
</Form>
</Body>
</Html>

7) 文件域。文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。文件域一般用于选择文件。创建文件域方法如下：
<Input Type="file" 属性="值"…>
其中：
Name = 文件域的名称
Value = 初始文件名
Size = 文件名输入框的宽度

【例1.7】创建一个如图1-9所示的表单，其中包含文件域、提交按钮和重置按钮。

图1-9 含有文件域的表单

源代码如下（Ex1-7.htm）：

<Html>
<Head><Title>文件域示例</Title></Head>
<Body>
<Form>
<Table Align=center BgColor=#D6D3CE Width=368>
<Tr><Th ColSpan=2 BgColor=#0034FF><Font Color=#FFFFFF>文件域</Font></Th></Tr>
<Tr><Td Height=52 Align=right>请选择文件：</Td>
<Td Height=52><Input Type=file Name=F1 Size=16></Td></Tr>
<Tr Align=center>
<Td Height=52 Align=right><Input Type=submit Value=提交 Name=btnSubmit></Td>
<Td Height=52><Input Type=reset Value=全部重写Name=btnReset></Td></Tr>
</Table>
</Form>
</Body>
</Html>

8) 图像提交按钮。图像提交按钮与提交按钮在表单中的区别仅仅是提交按钮上用图像代替按钮文本标题。图像提交按钮使用Input标记来创建，方法如下：
<Input Type="image" 属性="值"… 事件="代码"… >
其中属性如下：
Src = 所用图像的URL地址
Value = 提供图像的替换文本
其他同提交按钮。

(3) 其他表单控件
除了使用Input标记创建输入型表单控件外，也可以使用Textarea标记创建多行文本框，或者使用Select标记创建选项菜单，还可以使用FieldSet标记对表单中的控件进行分组。
1) 多行文本框。在表单中添加多行文本框可以接受站点访问者输入多于一行的文本。创建多行文本框方法如下：
<Textarea 属性="值"… 事件="代码"…>初始值</Textarea >
其中属性如下：
Name = 滚动文本框控件的名称
Rows = 控件的高度（以行为单位）
Cols = 控件的宽度（以字符为单位）
ReadOnly：滚动文本框的内容不被用户修改
创建多行文本框时，在<Textarea>和</Textarea>标记之间输入的文本将作为该控件的初始值。它的其他属性、方法和相关事件与单行文本框基本相同。
当提交表单时，该域名称和内容都会包含在表单结果中。
2) 选项菜单。表单中的选项菜单让站点访问者从列表或菜单中选择选项。菜单中可以选择一个选项，也可以设置为允许作多重选择。创建选项菜单方法如下：
<Select Name="值" Size="值" [Multiple]>
<Option [Selected] Value="值">选项1</Option >
<Option [Selected] Value="值">选项2</Option >
……
</Select>
其中：
Name = 选项菜单控件的名称
Size = 在列表中一次可以看到的选项数目（默认为1）
Multiple：允许作多项选择
Selected = 该选项的初始状态为选中
当提交表单时，菜单的名称会被包含在表单结果中，并且其后有一份所有选项值的列表。
例如：
<Select Name="课程">
<Option Value="计算机基础" Selected>计算机基础</Option>
<Option Value="C语言程序设计">C语言程序设计</Option>
<Option Value="数据结构">数据结构</Option>
<Option Value="数据库原理">数据库原理</Option>
<Option Value="C++程序设计">C++程序设计</Option>
</Select>
3) 对表单控件分组。可以使用FieldSet标记对表单控件进行分组，从而将表单细分为更小、更易于管理的部分。FieldSet标记必须以Legend标记开头，以指定控件组的标题，在Legend标记之后可以跟其他表单控件，也可以嵌套FieldSet。创建表单控件分组的方法如下：
<FieldSet>
<Legend>控件组标题</Legend>
组内表单控件
</FieldSet>