17 forms

17.1 Introduction to form

Form HTML - this section of the document, which contains the usual information, layout and special elements called control elements (check boxes, radio buttons, menus, etc.), as well as the labels of the controls. Typically, users "fill" the form by modifying controls (entering text, selecting menu items, etc.) before you submit the form for processing agentts user (for example, on the Web-servver, mail server, etc.)

Here's a simple form that includes labels, radio buttons and buttons (clear form or sending):

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  <P>
  <LABEL for = "firstname"> Name: </ LABEL>
  <INPUT type = "text" id = "firstname"> <BR>
  <LABEL for = "lastname"> 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">
  </ P>
  </ FORM>

Note. In this specification, there is more detailed information about forms in the subsections on form display issues .

17.2 Controls

Users interact with forms using named controls.

"Element Name" is specified by name. The scope of the name attribute for a control element in the FORM is an element FORM .

Each control element has an initial and a current value, both of which are character strings. For information about initial values ​​and possible constraints on values, see. In the definition of the control. In general, the "initial value" of the control element can be set using attribute value. However, the original value of the element TEXTAREA given by its contents, and the original value element OBJECT in the form determined by the implementation of the object (ie lies outside the domain of this specification).

"Current value" operating element is first set to an initial value. Then, the current value can be changed by the user or script.

The initial value of the control is not changed. Thus each mold when resetting the current value is set to the initial value. If the control is not the initial value, the result is unpredictable relief forms.

When the form is submitted for processing, a form is transmitted pair-control element current value. Transferable name / value pairs are called successful controls .

17.2.1 Control types

The HTML defines the following types of controls:

button
Authors may create three types of buttons:

Authors create buttons with the help of an element BUTTON or the INPUT . Learn more about how different types of buttons, see. In the definition of these elements.

Note. Authors should note that the element BUTTON provides more opportunities presenting buttons than the element the INPUT .

flags
Checkboxes (and radio buttons) - it on / off switches that can be switched by the user... The switch is "on", if the attribute is set to a control element selected .

When submitting a form successful only switches can be included. Several checkboxes in a form may have the same control name. Thus, for example, check boxes allow users to choose several values ​​of the same properties. To create a checkbox element is used the INPUT .

radio buttons
The radio buttons are like checkboxes except that when several buttons are used the same control name , they are mutually exclusive: if a button is on, the other necessarily turned off. To create radio buttons used item the INPUT .
menu
Provide users with options to choose from. Menu created by an element the SELECT , as well as elements OPTGROUP and the OPTION .
text input
To enter a user-text writers can create two types of controls. Element INPUT creates a control element for the text of a single line, and the element the TEXTAREA - text input multiple lines. In both cases, the input text becomes the current value of the control.
file selection
Control elements of this type allow users to select files, the contents of which can be transmitted together with the form. To create this control element using the element the INPUT .
hidden controls
Authors may create controls that are not presented to the user, but have values ​​that are passed to the form. Typically, they are used to store information exchange between client / server, which otherwise could be due to the stateless nature of the abyss of the HTTP protocol (see. [RFC2068] ). To create a hidden control elements use the INPUT .
objects
Authors are allowed to form shared objects, so that the values ​​associated with them will be transferred to other control elements. To create such control elements use the OBJECT .

The elements used to create controls that are usually located in the cell the FORM , but may be outside of the ad the FORM , if they are used to build the user interface. This is discussed in the section on internal events. Note that controls outside forms may not be successful .

17.3 Element FORM

  <The ELEMENT! The FORM - - ( % block; | the SCRIPT) + - (the FORM) - interactive form ->
 <! ATTLIST FORM
  % attrs;
  - % Coreattrs , % the i18n , % events -
  the action % the URI;
  #REQUIRED - Form handler on the server -
  method (the GET | the POST) the GET - the HTTP method used to send formy--
  the enctype % the ContentType;
  "Application / x-www-form-urlencoded"
  the onsubmit % the Script;
  #IMPLIED - The form was submitted -
  onreset % the Script;
  #IMPLIED - The form is reset -
  the charset-the accept % Charsets;
  #IMPLIED - List of supported character sets -
  >

Start tag: required, End tag: required

attribute definitions

the action = the uri [the CT]
It specifies the treatment agent forms. For example, the value may be URI HTTP (to submit the form to a program) or a mailto URI (to submit the form by e-mail).
method = the get | the post [the CI]
Defines the HTTP method used to send form data set . Possible values ​​(case sensitive) - "get" (default) and "post". See. In the section on form submission .
the enctype = the content-of the type [the CI]
This attribute specifies the content type used to submit the form to the server (if the method uses the value "post"). By default, this attribute is "application / x-the www-The form-urlencoded" . With the element of the INPUT , of the type = "file" should be used the value of "a multipart / The form-the data" .
the charset-the accept = list of character sets [CI]
This attribute specifies the list of character encodings for input data that must be taken in this form processing server. The value is a space separated and / or comma-delimited list of values of the charset . The server must interpret this list as a list of excluding or, that is, it must take any encoding for the loaded object.

By default, this attribute value is "UNKNOWN" reserved line. User agents may interpret this value as the character encoding used to transmit the document containing this element is the FORM .

the accept = the content-of the type-list [the CI]
This attribute specifies a comma-separated list of content types that should correctly handle the server processing the form. User agents may use this information to filter files meet specifications while offering the user to select files to be sent to the server (if the element INPUT stated of the type = "file").

Element FORM is a container for controls . It specifies:

  • Layout form (given by the contents of the element).
  • The program, which will be processed and transmitted zapolennuyu form (attribute of the action ). Receiving the form of the program should be able to determine the name / value pairs to use them.
  • The method of sending data to the server (attribute method ).
  • Character encoding that must be accepted by the server to handle this form (attribute of the accept-the charset ). User agents may advise the user to the value of the attribute accept-charset and / or not to allow users to enter unrecognized characters.

Apart form controls may include text and markup (paragraphs, lists, etc.).

The following example shows a form that must be processed by the program "adduser". This form will be sent using the HTTP method "post".

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  ... the contents of the form ...

  </ FORM>

The following example shows sending the form to the email address:

  <FORM action = "mailto: [email protected]" method = "post">
  ... the contents of the form ...

  </ FORM>

For information about how user agents must prepare form data for servers and how they should handle the responses from the server, please refer to the section on form submission .

Note. Further discussion on the behavior of servers that receive form data is beyond the areas covered by this specification.

17.4 Element INPUT

  <! ENTITY% InputType
  "(TEXT | PASSWORD | CHECKBOX |
  RADIO |  SUBMIT |  RESET |
  FILE |  HIDDEN |  IMAGE |  BUTTON) "
  >
 <! - Attribute is required for all types except for submit and reset ->
 <The ELEMENT! The INPUT - About EMPTY The - control element forms ->
 <! ATTLIST INPUT
  % attrs;
  - % Coreattrs , % the i18n , % events -
  of the type % InputType;
  TEXT - the type of input data -
  name a CDATA #IMPLIED - passed as part of the form -
  of value a CDATA #IMPLIED - required for radio buttons and check boxes -
  checked Only (set) #IMPLIED - for radio buttons and check boxes -
  the disabled (disabled) #IMPLIED - unavailable in this context -
  the readonly (read-only) #IMPLIED - for text and passwords -
  size bed a CDATA #IMPLIED - it depends on the type of the field -
  the maxlength NUMBER #IMPLIED - the maximum number of characters in the text box -
  the src % the URI;
  #IMPLIED - For fields with images -
  the alt a CDATA #IMPLIED - short description -
  the usemap % the URI;
  #IMPLIED - Use client-side image map -
  the tabindex NUMBER #IMPLIED - position in tabbing order -
  accesskey % the Character;
  #IMPLIED - Access key -
  the onfocus % the Script;
  #IMPLIED - The focus on this element -
  the onblur % the Script;
  #IMPLIED - The focus is moved to another element -
  onselect % the Script;
  #IMPLIED - Some text is highlighted -
  the onchange % the Script;
  #IMPLIED - The element value changed -
  the accept % ContentTypes;
  #IMPLIED - List of MIME types for file upload -
  >

Start tag: required, End tag: forbidden

attribute definitions

of the type = text | the password | checkbox Central | a radio | the submit | the reset | file | hidden | image | button [the CI]
It specifies the type of control element . The default value is "text".
name = cdata [the CI]
Specifies the control name .
of value = cdata [the CA]
It specifies the initial value of the control. This attribute is optional, if only for the attribute type is not set to "radio".
size bed = cdata [the CN]
It tells the user agent the initial width of the control. The width is given in pixels , if the attribute type is not set to "text" or "password". In this case, the width is set in the number of symbols (the number must be an integer).
the maxlength = number [CN]
If the attribute type is set to "text" or "password", this attribute specifies the maximum number of user input characters. This number may exceed the specified attribute in the size of the field size; In this case, the user agent should provide a scrolling mechanism. The default number of characters is not limited.
checked Only [the CI]
If the attribute type is set to "radio" or "checkbox", this boolean attribute specifies that the check box is selected. User agents must ignore this attribute for other types of controls.
the src = the uri [the CT]
If the attribute type is set to "image", this attribute specifies the location of the image used to represent the graphic button.

17.4.1 Control types created with the INPUT element

Type of control element defined by an element of the INPUT , depending on the value of an attribute of the type :

text
It creates a text input of a single line.
password
Same meaning "text", but the input text is presented in a manner not to display characters (for example, as a series of stars). This control element is often used to enter passwords. Note that the current value is the text entered by the user, not the text submitted by the user agent.

Note. Application developers should pay attention to the fact that this mechanism provides only weak protection. Although the password is masked by user agent from casual observers, it is transmitted to the server in plain text, and can be read by anyone with access to the network at a low level.

checkbox
Creates a check box.
radio
Creates a radio button.
submit
Creates a submit button.
image
Creates a graphical submit button. The value of the attribute src specifies the URI of an image used to represent the button. From accessibility reasons, authors should provide alternate text for images using attribute the alt .

If you click on the image pointing device is used, the server transferred the shape and coordinates of the click. The x value is measured in pixels from the left border of the image, and the value of y - in pixels from the top of image. The transmitted data includes name .x = a sequence value-x and name .y = value-y, where "name" - the attribute name, and value-x-value and y - coordinate values x and y, respectively.

If the server takes different actions depending on where you click, users of non-graphical browsers will not be able to take advantage of this property. For this reason, authors should consider alternate approaches:

  • Use multiple submit buttons (each with its own image) in place of a single graphical buttons. It can be used to control the location of these buttons stylesheet.
  • Use the client image maps , and scripts.
reset
Creates a reset button.
button
Create another button. User agents should be used as the label value of the button attribute value.
hidden
It creates an invisible control element.
file
Creates a control element file selection . User agents may use the value of the attribute value as the original file name.

17.4.2 Examples of forms with the control elements such as INPUT

In the following snippet of HTML code defines a simple form that allows users to enter the name, surname, email address and gender. In the case of activation of the submit button the form is submitted to the program specified in the attribute of the action .

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  <P>
  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">
  </ P>
  </ FORM>

This form can be represented as follows:

Sample submission forms.

In the section of the element LABEL we will discuss the type of markup tags "First name".

In the following example, when the event "onclick" JavaScript function is activated with the name verify:

 <HEAD>
 <META http-equiv = "Content-Script-Type" content = "text / javascript">
 </ HEAD>
 <BODY>
  <FORM action = "..." method = "post">
  <P>
  <INPUT type = "button" value = "Click here" onclick = "verify ()">
  </ FORM>
 </ BODY>

For more information about scripts and events you can find in the section on internal developments .

The following example shows how the contents of the file specified by the user -can be sent together with the form. The user is prompted name and a list of file names whose contents should be submitted with the form. With the guidance value of enctype to "multipart / form-data" content of all files will be packed for transfer to individual sections of an existing document.

 <FORM action = "http: //server.dom/cgi/handle"
  enctype = "multipart / form-data"
  method = "post">
  <P>
  What is your name?  <INPUT type = "text" name = "name_of_sender">
  What files are you sending?  <INPUT type = "file" name = "name_of_files">
  </ P>
 </ FORM>

17.5 Element BUTTON

  <The ELEMENT! To BUTTON - -
  ( % Flow; ) * - (A | % formctrl; | the FORM | the FIELDSET)
  - Button ->
 <! ATTLIST BUTTON
  % attrs;
  - % Coreattrs , % the i18n , % events -
  name a CDATA #IMPLIED
  of value a CDATA #IMPLIED - sent to the server when sending -
  of the type (button | the submit | the reset) the submit - for use as form button -
  the disabled (the disabled) #IMPLIED - unavailable in this context -
  the tabindex NUMBER #IMPLIED - position in the sequence perehoda--
  accesskey % the Character;
  #IMPLIED - Access key -
  the onfocus % the Script;
  #IMPLIED - The focus on an element -
  the onblur % the Script;
  #IMPLIED - The focus is moved to another element -
  >

Start tag: required, End tag: required

attribute definitions

name = cdata [the CI]
Specifies the control name.
of value = cdata [the CS]
Specifies the initial value of a button.
of the type = the submit | button | the reset [the CI]
Declares the type of button. Possible values ​​are:

Buttons produced by using the element BUTTON , act much like a button created by an element INPUT , but they provide a more rich presentation capabilities: element BUTTON may have content. For example, the element BUTTON , contains an image functions like and may resemble element of the INPUT , the attribute type is set to "image", but the element type BUTTON can have content content.

Visual user agents may be buttons BUTTON relief or pushing effect on mouse click, while key INPUT can only be presented as a "flat" image.

The following example extends the previous example, and buttons send and reset generated by an element BUTTON instead of the element the INPUT . Used for image buttons defined by the element images IMG .

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  <P>
  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>
  <BUTTON name = "submit" value = "Send" type = "submit">
  Send <IMG src = "/ icons / wow.gif" alt = "Wow"> </ BUTTON>
  <BUTTON name = "reset" type = "reset">
  Reset <IMG src = "/ icons / oops.gif" alt = "second"> </ BUTTON>
  </ P>
  </ FORM>

Remember, the authors should provide alternate text for the item images IMG .

It is not allowed to associate an image map with an element images IMG , soderzhaschimya the element to BUTTON element.

ILLEGAL EXAMPLE:
The following example shows the HTML code is not valid.

 <BUTTON>
 <IMG src = "foo.gif" usemap = "...">
 </ BUTTON>

17.6 Elements of the SELECT , the OPTGROUP and OPTION

  <The ELEMENT! The SELECT - - (the OPTGROUP | the OPTION) + - the option selector ->
 <! ATTLIST SELECT
  % attrs;
  - % Coreattrs , % the i18n , % events -
  name a CDATA #IMPLIED - name of the field -
  size bed NUMBER #IMPLIED - the number of visible rows -
  the multiple (the multiple) #IMPLIED - one selection is the default -
  the disabled (the disabled) #IMPLIED - unavailable in this context -
  the tabindex NUMBER #IMPLIED - position in tabbing order -
  the onfocus % the Script;
  #IMPLIED - The focus moved to the item -
  the onblur % the Script;
  #IMPLIED - The focus stepped element -
  the onchange % the Script;
  #IMPLIED - The element value has changed -
  >

Start tag: required, End tag: required

Definitions element attributes SELECT

name = cdata [the CI]
Specifies the control name.
size bed = number [the CN]
If the item SELECT presented as a scrolling list, this attribute specifies the number of rows in the list that are visible at one time. Visual user agents are not necessarily represent the element SELECT in list form; they can use other mechanisms - such as drop-down menus.
the multiple [the CI]
If this boolean attribute is set, it allows you to select multiple items. If it is not set, the element SELECT you can choose only one option.

Element SELECT creates a menu . Each option menu item appears the OPTION . Element SELECT must contain at least one element of the OPTION .

Element the OPTGROUP element allows authors to group choices logically. Usually it is helpful if a user has to make a choice in a long list of options; a group of related options easier to browse and remember than a single long list of options. In HTML 4.0 all elements OPTGROUP must be set directly in the cell the SELECT (ie, groups may not be nested).

17.6.1 Preselected options

Options may be selected in advance. User agents should determine which options are selected as follows:

  • If for any element OPTION not set attribute selected , neither option is selected in advance.
  • If one element OPTION attribute set selected , this option must be selected Sarnen.
  • If an element SELECT attribute set multiple , and several elements for the OPTION attribute set selected , they should be chosen in advance.
  • It is an error if for some elements OPTION set attribute selected , and the element SELECT is not set attribute of the multiple . User agents may vary in how to handle this error, but should not pre-select more than one option.
  <The ELEMENT! The OPTGROUP - - (the OPTION) + - a group of options ->
 <! ATTLIST OPTGROUP
  % attrs;
  - % Coreattrs , % the i18n , % events -
  the disabled (the disabled) #IMPLIED - unavailable in this context -
  the label % the Text;
  #REQUIRED - Use in hierarchical menus -
  >

Start tag: required, End tag: required

Definitions OPTGROUP element attributes

the label = text [the CS]
Tag group options.

Note. Developers are advised to keep in mind that in future versions of HTML grouping mechanism may be extended to poderzhkoy nested groups (ie elements OPTGROUP can be nested). This will allow authors to represent a more complex hierarchy of options.

  <The ELEMENT! The OPTION - About (#PCDATA) - select an option ->
 <! ATTLIST OPTION
  % attrs;
  - % Coreattrs , % the i18n , % events -
  selected (selected) #IMPLIED
  the disabled (the disabled) #IMPLIED - unavailable in this context -
  the label % the Text;
  #IMPLIED - Used in hierarchical menus -
  of value a CDATA #IMPLIED - default - content item -
  >

Start tag: required, End tag: optional

Definitions OPTION element attributes

selected [the CI]
If this boolean attribute is set, this option is selected in advance.
of value = cdata [the CS]
It specifies the initial value of the control. If this attribute is not set, the initial value is set to the content item the OPTION .
the label = text [the CS]
It allows authors to specify a shorter label for an option than the content of the element the OPTION . If this attribute is specified, user agents should use the value instead of the element's content OPTION as the label option.

In introducing the item menu , user agents should use the value of the attribute label element OPTION as an option. If this attribute is not specified, user agents should use the contents of the element the OPTION .

Attribute label element OPTGROUP defines the label versions of the group.

In this example, we will create a menu that allows the user to select which of seven software to install. The first and second programs are selected in advance, but you can deselect them. The rest of the program previously selected. Attribute size determines that the menu should take 4 rows even though the user and has 7 options. Access to the other options should be provided with the scroll mechanism.

For element SELECT is followed by submit and reset buttons.

  <FORM action = "http://somesite.com/prog/component-select" method = "post">
  <P>
  <SELECT multiple size = "4" name = "component-select">
  <OPTION selected value = "Component_1_a"> Programma_1 </ OPTION>
  <OPTION selected value = "Component_1_b"> The program _2 </ OPTION>
  <OPTION> Program _3 </ OPTION>
  <OPTION> Program _4 </ OPTION>
  <OPTION> Program _5 </ OPTION>
  <OPTION> Program _6 </ OPTION>
  <OPTION> Program _7 </ OPTION>
  </ SELECT>
  <INPUT type = "submit" value = "Send"> <INPUT type = "reset">
  </ P>
 </ FORM>

Successful will be only the selected options (using the name of the control element "component-select"). Note that if the set value of the attribute value , it determines the initial value of the control element, otherwise it will be a content item.

In this example, we use an element OPTGROUP for grouping options. The following markup:

  <FORM action = "http://somesite.com/prog/someprog" method = "post">
  <P>
  <SELECT name = "ComOS">
  <OPTGROUP label = "PortMaster 3">
  <OPTION label = "3.7.1" value = "pm3_3.7.1"> PortMaster 3 and ComOS 3.7.1
  <OPTION label = "3.7" value = "pm3_3.7"> PortMaster 3 and ComOS 3.7
  <OPTION label = "3.5" value = "pm3_3.5"> PortMaster 3 and ComOS 3.5
  </ OPTGROUP>
  <OPTGROUP label = "PortMaster 2">
  <OPTION label = "3.7" value = "pm2_3.7"> PortMaster 2 and ComOS 3.7
  <OPTION label = "3.5" value = "pm2_3.5"> PortMaster 2 and ComOS 3.5
  </ OPTGROUP>
  <OPTGROUP label = "IRX">
  <OPTION label = "3.7R" value = "IRX_3.7R"> IRX and ComOS 3.7R
  <OPTION label = "3.5R" value = "IRX_3.5R"> IRX and ComOS 3.5R
  </ OPTGROUP>
  </ SELECT>
 </ FORM>

It represents the following group:

  PortMaster 3
  3.7.1
  3.7
  3.5
  PortMaster 2
  3.7
  3.5
  IRX
  3.7R
  3.5R

Visual user agents may provide a selection using a hierarchical menu in the options group, or by any other mechanism that reflects the structure of the options.

Graphical user agents may be as follows:

Possible representation OPTGROUP element

Here is an element of the SELECT , presented in the form of a cascade menu. the currently selected value is shown in the top menu (PortMaster 3, 3.7.1). The user has unfurled two cascading menus, but has not yet selected the new value (PortMaster 2, 3.7). Note that the label element is displayed in each cascade menu OPTGROUP or the OPTION .

17.7 Element TEXTAREA

  <The ELEMENT! The TEXTAREA - - (#PCDATA) - text field of several lines ->
 <! ATTLIST TEXTAREA
  % attrs;
  - % Coreattrs , % the i18n , % events -
  name a CDATA #IMPLIED
  rows NUMBER #REQUIRED
  the cols NUMBER #REQUIRED
  the disabled (the disabled) #IMPLIED - unavailable in this context -
  the readonly (the readonly) #IMPLIED
  the tabindex NUMBER #IMPLIED - position in tabbing order -
  accesskey % the Character;
  #IMPLIED - Access key -
  the onfocus % the Script;
  #IMPLIED - The focus moved to the element -
  the onblur % the Script;
  #IMPLIED - The focus moved to another element -
  onselect % the Script;
  #IMPLIED - Some text is highlighted -
  the onchange % the Script;
  #IMPLIED - The element value has changed -
  >

Start tag: required, End tag: required

attribute definitions

name = cdata [the CI]
The name of the control.
rows = number [the CN]
The number of visible text lines. Users should be able to enter more lines, so user agents should provide some means to scroll through the control element when the contents extend beyond the visible area.
the cols = number [the CN]
Visible width, expressed as the average character width. Users should be able to enter longer lines, so user agents should provide some means to scroll through the control element when the contents extend beyond the visible area. User agents may break visible test lines, long lines to be visible without scrolling.

Element TEXTAREA creates a control element for multi-line text input . User agents should use the contents by this element as the initial value of the control element and submit the text first.

In this example, a control element TEXTAREA in 20 rows and 80 columns, which originally has two lines of text. For element TEXTAREA is followed by submit and reset buttons.

 <FORM action = "http://somesite.com/prog/text-read" method = "post">
  <P>
  <TEXTAREA name = "thetext" rows = "20" cols = "80">
  The first line of the source text.
  The second line of the source text.
  </ TEXTAREA>
  <INPUT type = "submit" value = "Send"> <INPUT type = "reset">
  </ P>
 </ FORM>

Ustanvoka attribute readonly allows authors to display unmodifiable text in an element of the TEXTAREA . Unlike a standard reference text in the document, if such a markup element value of TEXTAREA is transferred to the form.

17.8 Element ISINDEX

ISINDEX is undesirable . This element creates a control element for the text of a single line. Authors should use to create controls for the text element the INPUT .

The formal definition of cm. In Transitional the DTD .

attribute definitions

the prompt = text [the CS]
Not Recommended. Specifies the query string for the input field.

Element ISINDEX creates a control element for the text of a single line, in which you can enter any number simvlov. User agents may use the value of the attribute prompt in a query.

DEPRECATED EXAMPLE:
Next ad ISINDEX :

  <ISINDEX prompt = "Enter the search phrase:">

You can be rewritten using the item INPUT as follows:

  <FORM action = "..." method = "post">
 <P> Enter the search phrase: <INPUT type = "text"> </ P>
 </ FORM>

Semantics ISINDEX element. Currently, the semantics element ISINDEX accurately determined only when the base URI for vlklyuchayuschego element is a URI HTTP. In practice, this line you can enter only characters in the Latin-1 character set, because there is no job for the URI mechanism different set of characters.

17.9 Tags

With some form controls can automatically connect tags (for example, buttons), with other elements of the mark are not linked (text fields, check boxes, and with dependent fixing, and the menu button).

For controls with implicit labels, user agents should be used as a label value attribute.

Element LABEL is used to define labels for the controls without implicit labels.

17.9.1 Element LABEL

  <The ELEMENT! The LABEL - - ( % the inline; ) * - (the LABEL) - text field tag form ->
 <! ATTLIST LABEL
  % attrs;
  - % Coreattrs , % the i18n , % events -
  for IDREF, #IMPLIED - coincides with the value of the field ID -
  accesskey % the Character;
  #IMPLIED - Access key -
  the onfocus % the Script;
  #IMPLIED - The focus moved to the element -
  the onblur % the Script;
  #IMPLIED - The focus moved to another element -
  >

Start tag: required, End tag: required

attribute definitions

for = idref [the CS]
Clearly defined links the label to another control. If the value of this attribute, it must match the value of the attribute id of another control element in the same document. If this attribute is not specified, defined by the label associated with the content item.

Element LABEL can be used to attach information to the control elements. Each element of the LABEL associated with exactly one form control.

Attribute for explicitly links the label to another control element: an attribute value for should match the value of the attribute id associated control element. With the same control element can be connected several elements the LABEL , if you create multiple links with the attribute for .

In this example, we will create a table that is used to align two elements for text and labels associated with them. Each label is clearly linked to one of the fields of water :

 <FORM action = "..." method = "post">
 <TABLE>
  <TR>
  <TD> <LABEL for = "fname"> Name </ LABEL>
  <TD> <INPUT type = "text" name = "firstname" id = "fname">
  <TR>
  <TD> <LABEL for = "lname"> Name </ LABEL>
  <TD> <INPUT type = "text" name = "lastname" id = "lname">
 </ TABLE>
 </ FORM>

Here, we extend the previous example and will include elements of the LABEL .

  <FORM action = "http://somesite.com/prog/adduser" method = "post">
  <P>
  <LABEL for = "firstname"> Name: </ LABEL>
  <INPUT type = "text" id = "firstname"> <BR>
  <LABEL for = "lastname"> 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">
  </ P>
  </ FORM>

To implicitly associate a label with another control element, the control element must be in the cell the LABEL . In this case, the element LABEL may comprise only one control element. The label itself may be positioned before or after the associated control member.

In this example, we implicitly associate two labels with two control elements for entering text :

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

Note that this technique can not be used if a table is used for formatting documents, and the label is located in a single cell, and a control element associated to the other.

If element LABEL moves the focus , it is transmitted to the associated operating element. For examples, see. Below in the section on keyboard access .

Tags may be submitted by user agents in several ways (eg, visually, read by speech synthesizers, etc.)

17.10 Adding structure to forms: the elements FIELDSET and LEGEND

  <! -
  #PCDATA Is used to solve the problem of mixed content,
  per specification only whitespace is allowed there!
  ->
 <The ELEMENT! The FIELDSET - - (# PCDATA, LEGEND, ( % flow; ) *) - a group of form controls ->
 <! ATTLIST FIELDSET
  % attrs;
  - % Coreattrs , % the i18n , % events -
  >
 <The ELEMENT! LEGEND - - ( % the inline; ) * - legend set of fields ->
 <ENTITY% LAlign "(top | bottom | left | right)"!>
 <! ATTLIST LEGEND
  % attrs;
  - % Coreattrs , % the i18n , % events -
  accesskey % the Character;
  #IMPLIED - Access key -
  >

Start tag: required, End tag: required

LEGEND Attribute definitions

the align = top | bottom | left | right [the CI]
Not Recommended. Specifies the position of the legend on a set of fields. Possible values ​​are:
  • top: legend located on top of a set of fields. This value is used by default.
  • bottom: legend located at the bottom of a set of fields.
  • left: legend located on the left side set of fields.
  • right: legend located on the right side set of fields.

Element FIELDSET allows authors to group related tags and controls on the topics. Grouping controls makes it easier for users to understand the destination elements, while simplifying the transition on the tab key for visual user agents and speech navigation for the audio user agents. The correct use of this element increases the availability of documents.

Element LEGEND allows authors to assign a header element the FIELDSET . Legend increases the availability, if the item FIELDSET seems non-visually.

In this example, we will create a form that you can fill out at the doctor's. It has three sections: personal information, medical history and current treatment. In each section there are controls for the corresponding input information.

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

  <FIELDSET>
  <LEGEND> Case History </ LEGEND>
  <INPUT name = "history_illness" 
  type = "checkbox" 
  value = "Smallpox" tabindex = "20"> Smallpox
  <INPUT name = "history_illness" 
  type = "checkbox" 
  value = "Mumps" tabindex = "21"> Mumps
  <INPUT name = "history_illness" 
  type = "checkbox" 
  value = "Dizziness" tabindex = "22"> Dizziness
  <INPUT name = "history_illness" 
  type = "checkbox" 
  value = "Sneezing" tabindex = "23"> Sneezing
  ... more history ...

  </ FIELDSET>
  <FIELDSET>
  <LEGEND> Current treatment </ LEGEND>
  Are you currently taking medication? 
  <INPUT name = "medication_now" 
  type = "radio" 
  value = "Yes" tabindex = "35"> Yes
  <INPUT name = "medication_now" 
  type = "radio" 
  value = "No" tabindex = "35"> No

  If so, list them below:
  <TEXTAREA name = "current_medication" 
  rows = "20" cols = "50"
  tabindex = "40">
  </ TEXTAREA>
  </ FIELDSET>
 </ FORM>

Note that in this example, we can improve the visual presentation of the form by adding the elements in each element of the FIELDSET (using style sheets), adding information on the colors and fonts (using style sheets), adding scripting (eg, to the region, "the current treatment "opened only if the user indicates that he is being treated), etc. / samp

17.11 Moving the focus to an element

The document HTML, to become active and perform its task is to receive from the user focus. For example, users must activate a link defined by an element of A , to go to the linked document. Similarly, users should focus to an element of the TEXTAREA , to be able to enter text into it.

There are several ways to focus the transmission element:

  • Specify the item with the pointing device.
  • Jump from one element to another using the keyboard. The document's author may define a funnel defining a procedure for obtaining elements of focus when the user navigates through the document using the keyboard (see. Jump to the tab key ). The selected item can be activated by using a different key sequence.
  • Select an item using the access key (sometimes called "keyboard shortcut").

17.11.1 Moving with the Tab key

attribute definitions

the tabindex = number [the CN]
Specifies the position of the current element in the tabbing order for the current document. The value must be between 0 and 32767. User agents should ignore leading zeros.

Transition sequence determines the order of elements will receive focus when switching from the keyboard. A funnel may include elements nested within other elements.

Jump to items that may receive focus should be carried out by user agents in accordance with the following rules:

  1. Go to the elements supporting the attribute of the tabindex , which is assigned a positive value, it should be carried out first. Transition is made from the elements with the lowest value of the attribute tabindex to items with the highest value. The values ​​do not necessarily have to be consistent and do not have to begin with any particular value. Move elements with the same values of the attribute tabindex should be carried out in the order of their location in the character stream.
  2. Go to the elements that do not support the attribute tabindex or elements that have this attribute value is "0", is performed in the following turn. The transition is made to these elements in order of their location in the character stream.
  3. Disabled elements do not participate in the tabbing order.

The following elements support the attribute of the tabindex : A , the AREA , to BUTTON , the INPUT , the OBJECT , the SELECT and the TEXTAREA .

In this example, the tab will include elements BUTTON, INPUT OK (note that "field1" and the button uses the same attribute value of the tabindex, but "field1" is the flow of the stream of characters), and finally the link created element A .

  <DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.0 // EN"
  "Http://www.w3.org/TR/REC-html40/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> tag Document FORM </ TITLE>
 </ HEAD>
 <BODY>
 ... some text ... <P> Visit
 <A Tabindex="10" href="http://www.w3.org/"> site W3C. </A>
 more ... text ... <BUTTON type = "button" name = "get-database"
  tabindex = "1" onclick = "get-database">
 The current database.
 </ BUTTON>
 ... More text ...

 <FORM action = "..." method = "post">
 <P>
 <INPUT tabindex = "1" type = "text" name = "field1">
 <INPUT tabindex = "2" type = "text" name = "field2">
 <INPUT tabindex = "3" type = "submit" name = "submit">
 </ P>
 </ FORM>
 </ BODY>
 </ HTML>

Transition keys. The actual key sequence that provides a transition or element activation depends on the configuration of the user agent (eg key "tab" is used for the transition, and the key "enter" - to activate the selected item).

User agents may also define key sequences to move in reverse. When the end (or beginning) of the sequence, user agents can move to the beginning (or end).

17.11.2 Access keys

attribute definitions

accesskey = character [the CN]
Assigns an access key to an element. Access Key - a single character from the document character set. Note. When determining the access key authors should consider the input method, which is more likely to be used by the reader.

Pressing an access key assigned to an element sends an element focus. Action occurring upon receipt of the focus element depending on the element. For example, if polzvoatel activates a link defined by the element A , the user agent generally produces a transition link. If a user activates a radio button, the user agent changes the value of a button. If the user activates a text field entry is permitted to it, etc.

The following elements support the attribute accesskey : A , the AREA , to BUTTON , the INPUT , the LABEL , LEGEND , and the TEXTAREA .

In this example, the access key "U" is assigned to the label associated with the control element of the INPUT . Pressing the access key gives focus to the label which in turn transfers it to Associated controls. The user can then enter the text to the INPUT .

 <FORM action = "..." method = "post">
 <P>
 <LABEL for = "fuser" accesskey = "U">
 User Name
 </ LABEL>
 <INPUT type = "text" name = "user" id = "fuser">
 </ P>
 </ FORM>

In this example, we assign an access key link defined by an element of A . Pressing this key will move the user to another document, in this case - in the table of contents.

  <P> <A accesskey = "C" 
  rel = "contents"
  href = "http://someplace.com/specification/contents.html">
  Contents </A>

The use of access keys depends on the system. For instance, on machines running MS Windows usually together with the access key you need to press "alt". "Cmd" key press is usually required in Apple systems.

Representation of access keys depends on the user agent. Authors are encouraged to include the access key in label text or wherever the access key is used. User agents should render the value of an access key in such a way as to emphasize its role and to distinguish it from other characters (for example, by an underscore).

17.12 Disabled controls and elements of the read-only

In contexts where user input is not desired or required, it is important the ability to disable the control element or the presentation of its read-only. For example, you can disable the submit button to enter some required data. Similarly, the author may include read-only text to be transmitted with the form as a value. The following sections describe disabled controls, and elements of the read-only.

17.12.1 Disabled controls

attribute definitions

the disabled [the CI]
If this attribute is set for a form control, user input for this element is not possible.

If the attribute is disabled is set, it affects the element as follows:

Attribute disabled support the following elements: to BUTTON the INPUT , the OPTGROUP , the OPTION , the SELECT and the TEXTAREA .

This attribute is inherited but local declarations override the inherited value.

Presentation of disconnected elements depends on the user agent. For example, some user agents "gray isolated" disabled menu items, button labels, etc.

In this example, the element INPUT disabled. Thus, the user can enter text there, and its value is transmitted with the form.

 <INPUT disabled name = "fred" value = "stone">

Note. The only way to modify dynamically the value of the attribute disabled is to use the script.

17.12.2 Controls read-only

attribute definitions

the readonly [the CI]
If this attribute is set to control the form element, change the value of this element is not possible.

Attribute readonly determines whether the user can modify the contents of the control.

If the attribute readonly installed, it influences the element as follows:

Attribute readonly support the following elements: the INPUT , the TEXT, the PASSWORD and the TEXTAREA .

Presentation of elements for reading depends only on the user agent.

Note. The only way to modify dynamically the value of the attribute is read-only is the use of scripts.

17.13 Form submission

The following sections explain the transfer form data form processing agents user agents.

17.13.1 method of sending form

Attribute method element FORM specifies the HTTP method used to submit the form to the processing agent. This attribute may take two values:

  • get: Using the method of HTTP "get" form data set is added to the URI, an attribute specified action , and this new URI is sent to the processing agent.
  • post: Using the method of HTTP "post" forms the data set is included in the body of the form and sent to the processing agent.

"Get" method should be used if the form is idempotent (ie, causes no side effects). A large number of search operations is not in the database visible side effects and is an ideal application for "get" method.

If the service associated with the processing of forms, causes side effects (for example, if the form modifies a database or subscription makes Mr. Services), use the "post" method.

Note. When using the "get" method form data set must include only ASCII characters. Only the method "post" (attribute enctype entire character set can be used = "a multipart / The form-the data") [ISO10646] .

17.13.2 Successful controls

Successful control element "fits" to send. Every successful control element has a name , and the current value ; this pair is part of the transmission form data set . Successful control element must be defined in the element FORM and must have a name.

But:

  • Disabled controls can not be successful.
  • If the form contains multiple submit buttons , success is only activated button.
  • Successful can all be "on" checkboxes .
  • For radio buttons with the same value of the attribute name , success can only be "on" button.
  • For menu control element name given element the SELECT , and values - the elements of the OPTION . Successful can be only selected items.
  • The current value of the element file selection is a list of one or more file names. After submitting the form contents of each file is transmitted to the rest of the form data. The contents of the file is packaged in accordance with the content type of the form.
  • The current value of the control object is implementation-defined object.

If the control element is not the current value at the time the form is submitted, user agents do not have to handle it as a success.

Furthermore, user agents should not consider the following controls successful:

Hidden controls and controls that are not submitted through stylesheets can be successful. For example:

  <FORM action = "..." method = "post">
 <P>
 <INPUT type = "password" style = "display: none" 
  name = "invisible-password"
  value = "mypassword">
 </ FORM>

In this case, the value is mapped to the name "invisible-password", and it will be submitted with the form.

17.13.3 Processing form data

When a user submits a form (eg, by activating a submit button ), the user agent processes it as follows.

The first step: Identify the successful controls  

Step Two: Build the form data set  

Form data set - is a sequence of pairs name / value compiled from successful controls

Step three: Encode the form data set  

Then form a set of data is encoded according to the content type , defined attribute enctype element of the FORM .

Fourth step: Transfer the encoded form data set  

Finally, the encoded data is sent to the processing agent appointed attribute the action , according to the protocol specified in the attribute method .

This specification does not define all the valid delivery methods or content types that can be used with forms. However, user agents must support HTML 4.0 set by an agreement in the following cases:

  • If the attribute method is set to "get", and to attribute action Set HTTP URI, the user agent takes the value attribute of action , appends a `? ' And then adds a set of form data encoded using the content type "application / x-www-form -urlencoded". Then, the user agent passes the link to this URI. In this scenario, the form data are limited to ASCII codes.
  • If the attribute method is set to "post", but to attribute action - HTTP the URI, the user agent performs an HTTP transaction "post" with the attribute value action and message created according to the content type specified in the attribute of the enctype the attribute.

For other attribute values action or method behavior is undefined.

User agents are required to submit a response to the HTTP transaction "get" and "post".

17.13.4 Types of content form

Attribute enctype element FORM specifies the content type used to encode the form data set for transmission to the server. User agents must support the content types listed below. Behavior for other content types is not defined.

See. Also the section about using ampersands in URI attribute values .

application / x-www-form- urlencoded  

This content type is used by default. Shape, with the transmitted content type should be encoded as follows:

  1. The names and values ​​of the control elements are escaped. Non-printing characters are replaced by `+ ', and then reserved characters are escaped, as described in [RFC1738] , Section 2.2: nonarithmetic characters are replaced by`% HH', a percent sign, followed by hexadecimal digits representing the ASCII character-Code. Line breaks are represented in pairs "CR LF" (ie, `% 0D% 0A ').
  2. The names / values ​​of the controls listed in the order in which they appear in the document. The name is separated from the value by a character `= 'and name / value pairs are separated from each other by` &'.

multipart / form-data  

Note. For more information about compatibility issues with previous versions, the relation of the content type "multipart / form-data" and other content types to work, etc. problems cm. in [RFC1867] .

Information on the protection of forms , see. In the Annex.

Type "application / x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing characters outside the ASCII set. "Multipart / form-data" type should be used for submitting forms that contain files, these non-ASCII and binary data.

The content "multipart / form-data" used by the rules of all the component data streams MIME, as described in [RFC2045] . Determining the type of "multipart / form-data" can be found in the registry [the IANA] .

Message type "multipart / form-data" consists of several parts, each of which is successful controls . Part of the treatment agent are sent in the order in which the respective control elements are represented in the flow of the document. Borders parts should not be in the database; ensure this requirement is outside the domain of this specification.

As with all types of composite MIME, each part has an optional header "Content-Type", for which the default is set to "text / plain". User agents should provide the title of "Content-Type" with the parameter "charset".

Each part should contain:

  1. header "Content-Disposition", having a value of "form-data".
  2. naming attribute that defines the name of the corresponding control element. The names of the controls originally encoded using character sets other than ASCII, can be encoded using the method described in [RFC2045] .

For example, the control element to "mycontrol" the name of the corresponding part might look like this:

  Content-Disposition: form-data;  name = "mycontrol"

As in all data transfer processes MIME, to separate data lines, a combination of "CR LF" (ie, `% 0D% 0A ').

Can encode each part indicating the header "Content-Transfer-Encoding", if the value of that part does not correspond to the default encoding (7BIT) (see. [RFC2045] , Section 6)

If the contents of the file is transferred to the form, the file input should be determined by the appropriate content type (eg, "application / octet-stream" ). If the result of one form element to be returned multiple files, they should be returned as a type of "multipart / mixed", embedded in the "multipart / form-data".

The user agent should attempt to supply a name for each file transfer. The file name can be specified in the parameter "filename" header 'Content-Disposition: form-data' or, in the case of several fields in the header 'Content-Disposition: file' part. If the name of the client operating system file contains characters that are not included in the set of US-ASCII, the file name may be changed or encoded using the method of [RFC2045] . This is useful when, for example, the uploaded files might contain references to each other (for example, TeX file and its ancillary description of styles ".sty").

The following example shows encoding "multipart / form-data". Suppose we have the following form:

  <FORM action = "http: //server.dom/cgi/handle"
  enctype = "multipart / form-data"
  method = "post">
  <P>
  What is your name?  <INPUT type = "text" name = "submit-name"> <BR>
  What files are you sending?  <INPUT type = "file" name = "files"> <BR>
  <INPUT type = "submit" value = "Send"> <INPUT type = "reset">
  </ FORM>

If the user enters the word "Larry" and selects the text file "file1.txt" in the text field, the user agent may send the following data:

  Content-Type: multipart / form-data;  boundary = AaB03x
  --AaB03x
  Content-Disposition: form-data;  name = "submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data;  name = "files";  filename = "file1.txt"
  Content-Type: text / plain
  ... The contents of the file file1.txt ...
  --AaB03x--

If the user selects the second file (image) "file2.gif", the user agent might construct the parts as follows:

  Content-Type: multipart / form-data;  boundary = AaB03x
  --AaB03x
  Content-Disposition: form-data;  name = "submit-name"
  Larry
  --AaB03x
  Content-Disposition: form-data;  name = "files"
  Content-Type: multipart / mixed;  boundary = BbC04y
  --BbC04y
  Content-Disposition: attachment;  filename = "file1.txt"
  Content-Type: text / plain
  ... The contents of the file file1.txt ...
  --BbC04y
  Content-Disposition: attachment;  filename = "file2.gif"
  Content-Type: image / gif
  Content-Transfer-Encoding: binary
  ... The contents of the file file2.gif ...
  --BbC04y--
  --AaB03x--