您的位置：寻梦网首页＞编程乐园＞HTML园地＞HTML4.0参考文献
前页|后页| 目录|元素| 特性

表单

目录
  1. FORM元素
  2. 控件
    1. INPUT元素
    2. BUTTON元素
    3. SELECT和OPTION元素
    4. TEXTAREA元素
    5. LABEL元素
    6. FIELDSET和LEGEND元素
  3. 让元素获得焦点
    1. 水平导航
    2. 传送键值
  4. 禁止和只读元素
    1. 禁止元素
    2. 只读元素
  5. 表单提交
    1. 哪个元素值被提交了
一个HTML表单是文档中包含标准内容,标注和叫做控件 的特殊元素的部分.控件响应并接受用户输入.用户通常 通过输入文字,选择菜单条目等来"完成"表单,然后提交表 单以供处理.提交的表单可以通过电子邮件发送给别人也 可以发送给程式来处理.

控件可以是复选框,单选框,标签,菜单等.每个控件可以 分配一个名称.当表单被提交时,一些控件(取决于它们的状态) 的名称和当前值随表单一起发送.提交的值的自然属性取 决于控件(例如:文本框的值是输入的文本). 注意:这份说明书在表单显示问题 中包含了更多的关于表单的细节信息.关于对表格内容编 码的信息已经打算加在这份草案以后的版本中.

FORM元素

<!ELEMENT FORM - - %block -(FORM)>
<!ATTLIST FORM
%attrs;                        --%coreattrs,%i18n,%events --
action    %URL      #REQUIRED--server-side form handler --
method    (GET|POST)GET      --HTTPmethod used to submit the form --
enctype    %ContentType;"application/x-www-form-urlencoded"
onsubmit%Script #IMPLIED?--the form was submitted --
onreset    %Script #IMPLIED?--the form was reset --
target  CDATA  #IMPLIED?--where to render result --
accept-charset CDATA   #IMPLIED?-- list of supported charsets -- ?>
开始标记:需要,结束标记:需要 特性定义
action=url
这个特性指定一来处理提交表单的格式.它可以是一个HTTP URL(提交给程式)或一个电子邮件(MAILTO) URL(邮递这个表单).
method=get|post
这个特性指明哪种HTTP方法将被用来提交名称/值对给表 单处理者.可能的值为:
  • post:使用HTTP POST方法.POST方法在表单的主干包含 名称/值对并且无需包含于action 特性的URL中.
  • get:不赞成.使用HTTP GET方法.GET方法把名称/值 对加在action的URL后 面并且把新的URL送至服务器.这是往前兼容的缺省值.这 个值由于国际化的原因不赞成.
enctype=cdata
这个特性指明用来把表单提交给服务器时(当method 值为"post")的互联网媒体形式(Internet Media Type,参见[MIMETYPES]). 这个特性的缺省值是"application/x-www-form-urlencoded".值"multipart/form-data" 应当被用于返回的文档中包含提交文件时.
accept-charset=cdata
这个特定指定了一个可以被服务器处理这个表单的输入 数据时接受的字符编码列 表.这个值是在[RFC2045] 中的定义的用空格和/或逗号分列的"character"列表.服务器 必须把这个列表解释为独占列表,就是说服务器必能够接 受每个条目收到时的单独字符编码.

这个特性的缺省值是保留字串"UNKNOWN".用户代理器可 以把此值解译作包含在FORM 元素中的用于传送文档的编码方式.

accept=cdata
这个特性指明了一个服务器处理能够正确处理这个表单 的用逗号分列的MIME格式列表.当提示用户选择一个文件 发送到服务器时(通过INPUT 元素的type="file"),用户 代理器可以使用这信息来过滤掉不一致的文件.
在它处定义的特性 FORM元素作为控件的容 器.它指定了:
  • 表单的界面(通过元素内容给出).
  • 将用来处理完成和提交表单的程式(action 特性).为了使用它们收到的程式必须能够剖析名称/值对.
  • 用户数据通过哪种方式送到服务器(method 特性).
  • 为了处理这个表单字符编码方式必须能够被服务器接受 (accept-charset特 性).用户代理器可以建议用户的accept-charset 特性值和/或有防止用户输入不认识的字符的能力.
一个表单可以包含文字和标注(段落,列表等等)就象列示 于下的控件那样.

在FORM元素中任何特 性的name特性有效范围是FORM 元素. 下面的例程指定了提交的表单将被"adduser" 程式处理.这个表单将通过HTTP POST方法发送到程式. 

<FORM action="http://somesite.com/prog/adduser" method="post"> ?I>...form contents... </FORM>
下面的例程展示了如何把一个提交表单发送到一个电子 邮件地址. 
<FORM action="mailto:Kligor.T@gee.whiz.com" method="post"> ?I>...form contents... </FORM>

控件

下面的控件元素通常出现于一个FORM 元素声明中.然而,这些元素当用来建立用户接口时也可 以出现在FORM元素声明 外.这将在说明书中稍后讨论,在内部事件 章节中.

控件标签
某些表单控件自动联系标签(通过INPUT 和BUTTON建立的按钮) 然而大多数不这样(通过INPUT 和TEXTAREA的文本域, 通过INPUT建立的复选 框和单选框和用SELECT 建立的元素).

对于那些含有暗式标签的控件,用户代理器应当把value 特性值作为标签字串.

对于那些没有暗式标签的控件,作者必须在控件元素定 义的前或后提供标签.举例说明如下.

INPUT元素

<!ENTITY % InputType ?"(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)"    > 
<!-- HSPACE and VSPACE missing due to lack of widespread support -->
<!ELEMENTINPUT - O EMPTY>
<!ATTLIST INPUT
?%attrs;                      --%coreattrs,%i18n,%events --
type  %InputType  TEXT  --what kind of widget is needed --
name    CDATA  #IMPLIED?--required for all but submit &reset --
value      CDATA  #IMPLIED?--required for radio and checkboxes --
checked  (checked)#IMPLIED?--for radio buttons and check boxes --
disabled?(disabled)  #IMPLIED?--control is unavailable in this context --
readonly?(readonly)  #IMPLIED?--for text and passwd --
size    CDATA  #IMPLIED?--specific to each type of field --
maxlength  NUMBER    #IMPLIED?--max chars for text fields --
src        %URL      #IMPLIED?--for fields with images --
alt        CDATA  #IMPLIED?--description for text only browsers --
usemap  %URL      #IMPLIED?--use client-side image map --
align      %IAlign #IMPLIED?--vertical or horizontal alignment --
tabindexNUMBER    #IMPLIED?--position in tabbing order --
onfocus    %Script #IMPLIED?--the element got the focus --
onblur  %Script #IMPLIED?--the element lost the focus --
onselect%Script #IMPLIED?--some text was selected --
onchange%Script #IMPLIED?--the element value was changed --
accept   CDATA   #IMPLIED?-- list of MIME types for file upload -- ?>
开始标签:需要,结束标签:禁止 特性定义
?
type=text|password|checkbox|radio|submit|reset|file|hidden|image|button
这个特性指定了要建立的输入控件.我们在后面讨论输入控件格式 .这个特性的缺省值是"text".
name=cdata
这个特性为控件提供一个名称.这个名称将与控件的当前 值成对如果元素值与表单一同提交的话.
value=cdata
这个特性指定了控件的初始值.它是可选的除非控件形式 是"radio"(译者:即单选框).
size=cdata
这个特性告诉用户代理器控件的初始宽度.这个宽度用像 素给出,除非"text"和"password"控件格式是(整数的)字符数 目.
maxlength=integer
当控件格式为"text"或"password"时,这个特性指定的可以输 入的字符的最大量.这个数值?可以超过指定的size, 这个情况下用户代理器就当提供一个滚动结构.这个特性 的缺省值是对数量没有限制的.
checked
当控件格式为"radio"(单选框)?时,这个布尔值?指定了单选 框被选中.这个特性必须被其它的控件格式忽略.
src=url
当控件格式为"image"时,这个特性指定的用来装饰图案式 提交按钮的图案位置.
在它处定义的特性 通过INPUT元素定义的 控件的自然属性取决于type 特性的值.

输入格式

INPUT元素的type 特性定义了哪种控件将被建立.
text
这个格式建立一个单行文本框.这个通过文本框框提交的 值是输入的文字.
password
如同"text",但这个控件的输入文字通来一种隐藏字符的 方式来渲染(如一系列星号).这个控件用于大小写相关的 如密码的输入.这个通过密码控件提交的值是输入的文字 (并非渲染的东西).
checkbox
一个复选框有一个打开/关闭开关.当开关打开时,复选框的 值是"active".当开关关闭时,这个值是则没有激活.复选框 的值只有在复选框被选中时提交.

数个在同一个表单中的复选框可以使用同一个名称.在 提交时,每一个"打开"的具有相同名称的复选框使用相同 的名称组件提交一个名称/值对.这允许用户代理器对给定 的属性选择超?过一个的值.

radio
一个单选框是一个打开/关闭开关.当这个开关打开时,这个 单选框的值是"active".当开关关闭时,这个值则没有激尖. 单选框的值只有在开关打开时提交.

数个在同一个表单的单选框可以有一个名称.然而,它 些按钮中在同一个时刻只有一个可以被"打开".在某个设 定为"打开"的时候,所有相关的按钮都是"关闭".因此,对于 相关单选按钮,只有一个名称/值对被提交.

submit
建立一个提交按钮.当这个按钮被用户激活时,表单被提 交到在全局FORM元素的 action指定的位置.

一个表单可以包含一个以上的提交按钮.只有一个激活 的名称/值对与表单一起被提交.

image
建立一个图像化的submit 按钮.src 特性的值指定了将修饰按钮的图像的URL.某些用户可能 无法看到这些图像.我们强烈建议通过提供alt 特性值来提供一个图像的轮替文字.

当一个定位装置在图像上单击的时候,表单被提交并且 位置被传送到服务器.x 值是从图像的左面开始的以像素 为单位的尺寸,而?y 值是从图像的顶端开始的以像素为单 位的尺寸.这提交的数值包含?name.x=x-value 和name.y=y-value 时,这里的"name"是name特性值,而x-value 和y-value 是x 和y 坐标各自的值.

如果服务器根据单击的位置采用不同的对待,?使用非图 案化浏览器的用户将失去优势.由于这个原因,建议你考 虑轮替途径:

  • 使用多个提交按钮(每个都有其自身的图像)来代替一个 简单的图案提交按钮.你可以使用风格页来控制这些按钮 的位置.
  • 与脚本共同使用一个客户端图像映像.
当"type=image" 时一个可能的功能扩展将把usemap 特性加到INPUT?用作客 户端图像映像.对应于单击位置的AREA 元素将有助于把值传到服务器.为了避免须要修改服务器 脚本的必要,它可被适当地扩展AREA 来提供x 和y 值来与INPUT 元素同时使用.
reset
建立一个复位按钮(我经常用"重填"来标识这个按钮).当 这个按扭被用户激活时,表单中的所有控件被重设为通过 它们的value?指定的初始值.复位按钮的名称/值不与 表单一起提交.
button
建立的按钮没有缺省行为.按扭行为通过联系客户端按钮 事件来定义(如单击按钮).value特性的值被?用作按 钮的标签.
例如,下列的声明当按钮被激活时引起被 叫做的verify的函数被执行.这个脚本是SCRIPT 元素定义的. 
<INPUT type="button" value="Click Me" onclick="verify()">
请参见?内部事件章节获得更多的 关于脚本和事件的信息.
hidden
建立一个不被用户代理器渲染的元素.然而,元素的名称 和值还是与表单一起提交.

这个控件格式通常被用来保存客户端/服务器之间的可能 被HTTP丢失的交换信息.

INPUT控件的hidden 格式有其自身的与表单一起传送的值.共同包含于中的也 不被渲染因为风格信息的原因.下列的控件,当然不被用 户代理器渲染,将与表单一起提交它们的值. 

<INPUT type="password" style="display:none"          name="invisible-password"        value="mypassword">
file
显不用户一个文件名称.当这个表单被激活时,文件控件 如同其它用户输入一般被提交到服务器.

用户代理器就当把这些文件压缩封装为一个MIMEmultipart 文档(参见[RFC2045]). 这个结构把每个文件以一种MIMEmultipart 的格式压缩封装 把整体传送给HTTP.每个主干部分可以被标签为一个联系 于"Content-Type"的格式,包括如果需要一个"charset"参数来 指定字符编码.

下面的例程HTML片断定义了一个简单表 单允许用户输入名,姓,电子邮件地起码,以及性别.当提交 按钮被激活时,这个表单被送到以action 指定的程式.. 
<FORM action="http://somesite.com/prog/adduser" method="post">
<P> First name:
<INPUT type="text" name="firstname">
<BR> Last name: <INPUT type="text" name="lastname">
<BR> email: <INPUT type="text" name="email">
<BR> <INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> 
<INPUT type="reset">
</FORM>
这个表单?会被?如下渲染:


在LABEL 元素的部分,我们决定标注标签为"First name". 下面的列程展示了一个用户指定文件的 内容如何与表单一起被提交.这个例程基于[RFC1867] 的例程.

在此例中,用户被提示输入将于表单一起提交的一个文 件和一串文件名列表.通过指定enctype 值为"multipart/form-data",每个文件的内容均在存放于一个 multipart 文档的单独的部分中. 

<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post">that is your name? 
<INPUT type="text" name="name_of_sender"> that files are you sending? 
<INPUT type="file" name="name_of_files"> </FORM>
请参阅[RFC1867] 来获得更多的关于文件提交的信息.

ISINDEX元素

ISINDEX是不赞成的.用户应当使用INPUT 元素来代替它. 
<!ELEMENTISINDEX - O EMPTY>
<!ATTLIST ISINDEX
%coreattrs;  --id,
class,
style,
title--
  %i18n;  --lang,
  dir--
prompt
CDATA   #IMPLIED?-- prompt message -->
开始标记:需要,结束标记:禁止 特性定义
prompt=cdata
不赞成.这个特性指定了输入域的提示字符串.
在它处定义的特性 ISINDEX 元素使得用户代理器提示用户输入一个简单的行(允许任 意数量的字符).用户代理器会使用prompt 特性作为提示的标题. 不赞成例 程:
下面的ISINDEX声 明: 
<ISINDEX prompt="Enter your search phrase: ">
等同于下面的INPUT声 时: 
<FORM action="..." method="post"> Enter your search phrase: <INPUT type="text"> </FORM>
ISINDEX的语义问题.目前,只 有当编码文当的基URL是一个HTTP URL时ISINDEX 有其完善定义的语义.在实践中,由于没有其它的可用于 URL结构的不同字符集,输入字串受Latin-1的限制.

BUTTON元素

<!ELEMENTBUTTON - -      (%inline | %blocklevel)* -(A | %formctrl | FORM | ISINDEX | FIELDSET)>
<!ATTLIST BUTTON
?%attrs;                      --%coreattrs,%i18n,%events --
name    CDATA  #IMPLIED?--for scripting/forms as submit button --
value      CDATA  #IMPLIED?--gets passed to server when submitted --
type(submit|reset)#IMPLIED?--for use as form submit/reset button --
disabled  (disabled)?#IMPLIED?--control is unavailable in this context --
tabindexNUMBER    #IMPLIED?--position in tabbing order --
onfocus    %Script #IMPLIED?--the element got the focus --
onblur   %Script #IMPLIED?-- the element lost the focus -- ?>
开始标记:需要,结束标记:需要 特性定义
name=cdata
这个特性为按钮分配一个名称.
value=cdata
这个特性为按钮分配一个值.
type=button|submit|reset
这个特性声明了按钮形式.当这个特性没有被设定时,这 个按钮行为是未定义的.可能的值为:
  • button:建立一个打算激发脚本的按钮.
  • submit:建立一个提交整份表单的按钮.这是缺省值.
  • reset:建立一个复位整份表单的按钮.
在它处定义的特性 一个格式为"sbumint"的BUTTON 元素与一个格式为"submit"的INPUT 元素相当近似.它们两者都引起表单的提交,但BUTTON 元素允许更丰富的展现可能性.

一个格式为"submit"且内容为一张图像(如IMG 元素)的BUTTON元素非 常近似于一个格式为"image"的INPUT 元素.两者都引起表单的提交,但它们的表现不同.在这种 上下文中,一个INPUT元 素被打算作为一个"flat"图像渲染,而一个BUTTON 被打算作为一个按钮渲染(例如当单击时的缓动和上/下阴 影). 下面的例程通过BUTTON 按钮实例代替建立提交和复位按钮的INPUT 元素来扩展了前例.这个按钮通过IMG 元素来包含图像. 

<FORM action="http://somesite.com/prog/adduser" method="post"> 
<P> First name: 
<INPUT type="text" name="firstname"><BR> Last name: 
<INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> 
lt;INPUT type="radio" name="sex" value="Male"> Male<BR> 
<INPUT type="radio" name="sex" value="Female"> Female<BR> 
<BUTTON name="submit" value="submit" type="submit"> Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON> 
<BUTTON name="reset" type="reset"> Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON> </FORM>
如果一个BUTTON 与IMG元素一起 使用.我们建议采用IMG 元素的alt特性 来提供一个描述给看不到这个图像的用户.

把一个图像映像与一个作为BUTTON 元素内容的IMG 联系起来是非法的. 非法例程:
下面的不认为是合法的HTML 

<BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON>
一个格式为"reset"的BUTTON 元素与一个格式为"reset"的INPUT 元素相当近似.两种情况都控制重新获得初始值,但BUTTON 元素约许更丰富的展现.

BUTTON元素也能够 与脚本共同使用,在这种情况下它的type 应当为"button".当这样的一个按钮被激活时,一个客户端 脚本被运行.我们在这个说明书的后面的内部事件 章节讨论BUTTON的使 用.

SELECT 和?A NAME="edef-OPTION">OPTION 元素

<!ELEMENTSELECT - - (OPTION+)>
<!ATTLIST SELECT
?%attrs;                      --%coreattrs,%i18n,%events --
name    CDATA  #REQUIRED--field name --
size    NUMBER    #IMPLIED?--rows visible --
multiple?(multiple)  #IMPLIED?--default is single selection --
disabled?(disabled)  #IMPLIED?--control is unavailable in this context --
tabindexNUMBER    #IMPLIED?--position in tabbing order --
onfocus    %Script #IMPLIED?--the element got the focus --
onblur  %Script #IMPLIED?--the element lost the focus --
onselect%Script #IMPLIED?--some text was selected --
onchange %Script #IMPLIED?-- the element value was changed -- ?>
开始标记:需要,结束标记:需要 SELECT特性定义
name=cdata
这个特性为元素分配一个名称.这个名称将在表单被提交 时与选定的值成对.
size=integer
这个特性指定被用来代理器渲染的横行的数目.横行的数 目可以小于可能的选择的数目.这这种情况下,用户代理 会提供一个滚动机构以便处理所有可能的选择.
multiple
当设定的时候,这个布尔值允许多选项.而在没有设定时, SELECT元素只允许单 个选择.典型地,可视用户代理器以列表框渲染多选元素, 而以下拉框渲染单选元素.
SELECT元素建立一个 可被可户选择的选项例表.每个SELECT 元素必须包含一个选择.每个选择通过一个OPTION 元素实例来指定. 
<!ELEMENTOPTION - O (#PCDATA)*>
<!ATTLIST OPTION
%attrs;      --%coreattrs,%i18n,%events --
selected(selected)  #IMPLIED
disabled(disabled)  #IMPLIED?--control is unavailable in this context --
value CDATA   #IMPLIED?-- defaults to element content -- >
开始标记:需要,结束标记:可选 OPTION特性定义
selected
当设定时,这个布尔特性指定了这个选项是选定的(初始 或通过用户).
value=cdata
这个特性指定了如果这个选择被选中后与表单提交时提 交的值.这个值与分配给SELECT 元素的namee 配对.如果这个特性没有设定,缺省提 交值为OPTION元素的 内容.
在它处定义的特性 用户应当把OPTION 元素的内容用来显示选择项. 在此例中,我们建立一个下拉框允许用户 来选择七个软件组件来安装.第一和第二个组件初始被选 中但也可以被用户取消.剩下的组件在初始中没有被选中. size特性使得下 拉框显示4个横行而用户要在7个选项中选择.其它的选 项可以通过滚动机制来实现.

SELECT后跟提提交 与复位按钮. 

<FORM action="http://somesite.com/prog/component-select" method="post">    
<SELECT multiple size="4" name="component-select">    
<OPTION selected value="Component_1_a">Component_1</OPTION>    
<OPTION selected value="Component_1_b">Component_2</OPTION>    
<OPTION>Component_3</OPTION>    <OPTION>Component_4</OPTION>    
<OPTION>Component_5</OPTION>    <OPTION>Component_6</OPTION>    
<OPTION>Component_7</OPTION>    </SELECT>    
<INPUT type="submit" value="Send"><INPUT type="reset"> </FORM>
当表单被提供时,每个选择项目将与"component-select"名称 成对并提交.提交的每个OPTION 的值则是它的风容,除非在哪里使用了value特性来 覆盖它(这里的前两个组件).

TEXTAREA元素

<!ELEMENTTEXTAREA - - (#PCDATA)*>
<!ATTLIST TEXTAREA
?%attrs;                      --%coreattrs,%i18n,%events --
name    CDATA  #REQUIRED
rows    NUMBER    #REQUIRED
cols    NUMBER    #REQUIRED
disabled?(disabled)  #IMPLIED?--control is unavailable in this context --
readonly?(readonly)  #IMPLIED
tabindexNUMBER    #IMPLIED?--position in tabbing order --
onfocus    %Script #IMPLIED?--the element got the focus --
onblur  %Script #IMPLIED?--the element lost the focus --
onselect%Script #IMPLIED?--some text was selected --
onchange %Script #IMPLIED?-- the element value was changed -- ?>
开始标记:需要,结束标记:需 要?/B> 特性定义
name=cdata
这个特性把一个名称分配给元素.这个名称将在元素被提 交到服务器时与其内容成对.
rows=integer
指定可见的文字行的数目.用户应当能够输入超过这个数 量的行,所以用户代理器应当提供某些当内容超过可视区 域时在textarea 中滚动内容的方法.
cols=integer
指定可视字符宽度.用户的输入应当能够比之更长,所以 用户代理器应当在其内容超过可视区域时提供某些滚动 textarea 域内容的方法.用户代理器可以对可视文字进行折 行来保持长名而无需滚动.
在它处定义的特性 TEXTAREA 元素建立一个多行文本输入控件(相对于单行INPUT 控件).这个元素的内容提供控件展现的初始文本. 这个例程建立一个TEXTAREA 控件包含20行和80列并且有两行初始文字.TEXTAREA 后跟提交和复位按钮. ? 
<FORM action="http://somesite.com/prog/text-read" method="post">    
<TEXTAREA rows="20" cols="80">    First line of initial text.    Second line of initial text.    </TEXTAREA>    
<INPUT type="submit" value="Send"><INPUT type="reset"> </FORM>
设置readonly 特性允许作者在TEXTAREA 显示不可修改的文本.这不同于在文档中使用标准标注文 本因为TEXTAREA的值 与表单一起被提交.

当提交域内容时建议用户代理器遵照CR,LF(ASCII10进 制13,10)行结束准则.提交数据的字符集应当为ISO Latin-1, 除非服器器预先指定可以支持轮替的字符集.

LABEL元素

<!ELEMENTLABEL
- - (%inline)* -(LABEL) -- field label text -->
<!ATTLIST LABEL
?%attrs;                      --%coreattrs,%i18n,%events --
for        IDREF  #IMPLIED?--matches field IDvalue --
disabled(disabled)#IMPLIED?--control is unavailable in this context --
accesskey  CDATA  #IMPLIED?--accessibility key character --
onfocus    %Script #IMPLIED?--the element got the focus --
onblur   %Script #IMPLIED?-- the element lost the focus -- ?>
开始标记:需要,结束标记:需要 特性定义
for=control-name
这个特性显式地把定义的标签联系到另一个控件.这个特 性的值必须是在同一个文档中的某些id 特性的值.当这个特性不存在时,标签定义与它的内容有 关.
在它处定义的特性 LABEL 元素可以被用来接连信息到其它的控件元素(排除其它LABEL 元素).标签可以被用户代理器以数个方法渲染(如可视的, 被语单机构读出,等等)

当一个LABEL元素得 到焦点时,它把焦点传送到与之相关的控件.查见下面的 access keys章节例程.

为了显式地把一个标签联系到控件,参见LABEL 的for特性. 这个例程建立一个表格来对齐两个INPUT 控件以及相应的关联标签.每个标签到显式地联接到一个 INPUT元素. 

<FORM action="..." method="post"> 
<TABLE> <TR> 
  <TD>
    <LABEL for="fname">First Name</LABEL> 
  <TD><INPUT type="text" name="firstname" id="fname"> 
<TR> <TD><LABEL for="lname">Last Name</LABEL> 
  <TD><INPUT type="text" name="lastname" id="lname"> 
</TABLE> 
<FORM>
这个例程以包含LABEL 元素扩展了前例.注意LABEL 元素通过id特性 与INPUT元素联接. 
<FORM action="http://somesite.com/prog/adduser" method="post"> 
<P> <LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR> 
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR> 
<LABEL for="email"email: </LABEL>
<INPUT type="text" id="email"><BR> 
<INPUT type="radio" name="sex" value="Male"> Male<BR> 
<INPUT type="radio" name="sex" value="Female"> Female<BR> 
<INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM>
一个以上的LABEL 可以通过for特性建立 多参照被联接到同一个控件.

为了隐式地把一个标签联系到另一个控件,来控制LABEL 的内容.这种情况下,LABEL 只可以包含一个其它控件元素.标签本身可以在联系控件 的前面或后面. 在此例中,我们隐式地把两个标签联系到 两个INPUT元素.注意隐 式方法阻止我们在表格中划分标签和与之相关的控件(参 见前例). 

<FORM action="..." method="post"> 
<LABEL>    First Name    
<INPUT type="text" name="firstname"> </LABEL> <LABEL>    
<INPUT type="text" name="lastname">    Last Name </LABEL> 
</FORM>

FIELDSET 和?A NAME="edef-LEGEND">LEGEND 元素

<!-- #PCDATA is to solve the mixed content problem, per specification only whitespace is allowed there! ?->
<!ELEMENTFIELDSET - - (#PCDATA,LEGEND,%block)> 
<!ATTLIST FIELDSET %attrs; -- %coreattrs, %i18n, %events -- >
<!ELEMENTLEGEND - - (%inline;)+> <!ENTITY % LAlign "(top|bottom|left|right)">
<!ATTLIST LEGEND    --fieldset legend --
%attrs;   --%coreattrs,%i18n,%events --
align      %LAlign;  #IMPLIED?--relative to fieldset --
accesskey   CDATA   #IMPLIED?-- accessibility key character -- ?>
开始标记:需要,结束标记:需要 LEGEND特性定义
align=top|bottom|left|right
这个特性指定了标签相对于域设置的对齐位置.可能的值 为:
  • top:标签在域设定的上端.这是缺省值.
  • bottom:标签在域设定的下端.
  • left:标签在域设定的左端.
  • right:标签在域设定的右端.
在它处定义的特性 FIELDSET 元素表单设计者技术性对把控件成组.成组控件使用户更 容易明白它们的意图同时也可以帮助可视用户代理器和 面向语音的语音导航用户代理器.这些元素的适当使用使 得有残疾的人们更易于操作.

LEGEND元素允许设 计者为一个FIELDSET 分配一个标签.当FIELDSET 被渲染为不可视时它提高了处理能力.当渲染为可视时, 设定LEGEND元素的align 特性可以使之对齐于FIELDSET.?!-- the name was changed from CAPTION since a major vendor reported implementation difficulties in using CAPTION for both FIELDSET and TABLE, apparently associated will error recovery code -->
在此例程中,我们建立一种将在医生办公室填写的表 单.它被分成三部分:个人信息,病史和目前病历.每个部分 包含对输入适当的信息的控制. 

<FORM action="..." method="post"> 
<FIELDSET> 
<LEGEND align="top">Personal Information</LEGEND> 
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1"> 
First Name: <INPUT name="personal_firstname" type="text" tabindex="2"> 
Address: <INPUT name="personal_address" type="text" tabindex="3"> 
...more personal information... </FIELDSET> <FIELDSET> 

<LEGEND align="top">
Medical History</LEGEND> <INPUT name="history_illness"? type="checkbox" value="Smallpox" tabindex="20"> Smallpox</INPUT> 
<INPUT name="history_illness" type="checkbox" value="Mumps" tabindex="21"> Mumps</INPUT> 
<INPUT name="history_illness" type="checkbox" value="Dizziness" tabindex="22"> Dizziness</INPUT> 
<INPUT name="history_illness" type="checkbox" value="Sneezing" tabindex="23"> Sneezing</INPUT> ...more medical history... 
</FIELDSET> 
<FIELDSET> 
<LEGEND align="top">Current Medication</LEGEND> Are you currently taking any medication?
<INPUT name="medication_now" type="radio" value="Yes" tabindex="35">Yes</INPUT> 
<INPUT name="medication_now" type="radio" value="No" tabindex="35">No</INPUT> 
If you are currently taking medication, please indicate it in the space below: 
<TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40"> 
</TEXTAREA> 
</FIELDSET> 
</FORM>
注意在此例中,我们可以通过在每个在FIELDSET 中对齐元素(通过风格页),加入脚本(就是说,只有当他或 她打开"current medication"文本区域表示还在用药中)等等来 提高表单的展现.

给一个元素焦点

在HTML活动元素必须由于用户的打算的任务而得到?得到 焦点.例如,用户必须激活一个由A 元素指定的链接来追随指定的链接.类似的,用户代理器 为输入文字而给一个TEXTAREA 赋于焦点.

有数个方法把焦点赋于一个元素:

  • 通过定位设备指定元素.
  • 从一个元素通过键盘导航到下一个.文档作者可以定义一 个制表键次序来指定用户通过键盘来导航(制表键导航) 的话哪个元素得到焦点.一旦选中,一个元素可以被其它 的键顺序来激活.
  • 通过一系列键事件来选择一个元素被称为一个热键?/A> (有时也叫做"键盘热键"或"键盘加速").

制表键导航

特性定义
tabindex=integer
这个特性指定了当前元素在当前文档制表键次序中的位 置.这个值可以是正的或负的整数.
制表键次序指定了当用户通过键盘导航时哪个元素将得 到焦点.制表键次序可以在其它嵌套元素中间包含元素.

应当被用户代理器导航获得焦点的元素根据下列原则:

  1. 那些提供tabindex特 定和指定正数值的元素首先被导航.导航从具有最低tabindex 值的元素向具有最高值的进行.值无需按次序也能以任何 的特定值开始.具有标志性的tabindex 元素在它们显示的文档中按次序被导航.
  2. 那些没有定义tabindex 特性或不提供往下导航的元素.这些元素以它们在文档中 的显示次序被导航.
  3. 那些提供tabindex值 和分配了导航值的元素不参与制表键导航.
  4. disabled的元素不参见制加键?导航.
下面的元素支持tabindex 特性:A,AREA, OBJECT,INPUT, SELECT,TEXTAREA 和BUTTON. 在此例?中,制表键次序为BUTTON, 然后是INPUT元素(注意"field1" 和按钮共享共一个键表键索引,但"field1"出现于文档的后 部),最后是由A元素 建立的链接. 
<HTML> 
<BODY> ...some text... Click to go to the? 
<A tabindex="10" href="http://www.w3.org/">W3C Website.</A> ...some more... 
<BUTTON type="button" name="get-database" tabindex="1" onclick="get-database"> 
Click me to receive the current database. 
</BUTTON>
...some more... <FORM action="..." method="post"> 
<INPUT tabindex="1" type="text" name="field1"> 
<INPUT tabindex="2" type="text" name="field2"> 
<INPUT tabindex="3" type="submit" name="submit"> 
</FORM> 
</BODY> 
</HTML>
制表键.在用户的定义中的实际的 键次序引起制表键导航或元素的激活(例如"tab"键用来导 航而"enter"则与激活选定元素相关).

用户代理器也可以定义一个键次序来相反的导航制 表键次序.当到达制表键次序的最后(或开始时),用户代 理器会绕转到开始(或结尾).

热键

特性定义accesskey=cdata
这个特性分配一个热键给一个元素.一个热键是来自于用 户代理器当前字符集的单个字符.用户代理器应当把这个 特性作为大小写无关来对待.
按动指定给元素的处理值则赋于此元素焦点.当元素接到 焦点时根据元素激活其应当的方式.通过A 定义的链接通常被用户代理器跟随,激活单先钮则改变值, 有焦点的文本域则允许用户输入,等等.

这列的元素支持accesskey 特性:LABEL,A, CAPTION和LEGEND. 这个例程指定热键"U"给一个联系于INPUT 控件的标签.键入热键则把焦点发送到标签并依次给予相 关的控件.然后用户可以INPUT 区域中输入文字. 

<FORM action="..." method="post"> 
<LABEL for="user" accesskey="U"> User Name </LABEL> 
<INPUT type="text" name="user"> </FORM>
在此例中,我们为一个通过A 元素定义的链接分配一个热键.键入此键可以把用户带到 另一个文档,在此例中是一个目录表格. 
<A accesskey="C"?    href="http://somplace.com/specification/index.html"> Table of Contents</A>
热键的实现取决于下层系统.例如,在运行MS Windows 的机构 上,某人通常键下"alt"键作为额外的热键.在Apple 系统中, 某人通常按下"cmd"键作为额外的热键.

对于热键的处理取决于用户代理器.我们建议用户在标 签中包含热键或指明提供的热键.用户代理器会以一种强 调的区别于其它字符的方式来渲染热键的角色(例如下划 线).

禁止和只读元素

哪里的用户输入对上下文来说是不希望?的或不相干,?能够 禁止一个元素或以只读方式渲染一个元素是重要的.例如, 某人可能希望禁止一个表单的提交按钮直到某些需要的 数据被输入.类类似的,一个作者可能希望包含一条只读 文字并必须能够作为一个值与表单一起被提交.下面的章 节描述了禁止的和只读的元素.

禁止元素

特性定义
disabled
当为一个表单元素设定时,这个布尔特性禁止控件被用户 输入.

当设定时,the disabled 特性具有下列对元素的影响:

  • 禁止的元素不接收焦点.
  • 禁止的元素在制表键导航中被忽略.
  • 禁止的控件的值不与表单一起被提交.
下列的元素支持disabled 特性:INPUT,TEXTAREA, SELECT,OPTION, OBJECT,LABEL 和BUTTON.

禁止元素如何被渲染取决于用户代理器.例如,某些用 户代理器通过"gray out"来禁止下拉框条目,按钮标签等等. 在此例中,禁止的INPUT 元素无法收到用户输入并且值不与表单被提交. 

<INPUT disabled name="fred" value="stone">
注意:唯一能够动态修改disabled 特性的值的方法是通过一段脚本.

只读元素

特性定义
readonly
当为表单控件设定时,这个布尔特性禁止控件的改变.
readonly特性指定元 素是否可以被用户修改.

当设定时,readonly 特性对一个元素有下列的影响:

  • 只读元素获得焦点但不能被用户修改.
  • 只读元素包括制表键导航.
  • 只读元素的值与表单一起被提交.
下面的元素支持readonly 特性:INPUT,TEXT, PASSWORD和TEXTAREA.

只读元素如何被渲染取决于用户代理器. 注意:动态修改readonly 特性的值的唯一方法是通过一段脚本.

表单提交

哪个元素值被提交了

并非所有元素和它们的值与表单被提交. 一致性用户代理器应当不提交:
  • 禁止的表单控件.
  • 没有name特性值的表单控件.
  • 没有name特性值的OBJECT 元素.
  • 具有declare 特性的OBJECT 元素.
前页 后页 目录 元素 特性