Which of the Following Form Tags Is Correctly Formatted for a Form That Supports File Uploads

17 Forms

Contents

1. Introduction to forms
2. Controls
   1. Control types
3. The Form chemical element
4. The INPUT element
   1. Control types created with INPUT
   2. Examples of forms containing INPUT controls
5. The Push chemical element
6. The SELECT, OPTGROUP, and Selection elements
   1. Pre-selected options
7. The TEXTAREA element
8. The ISINDEX element
9. Labels
   1. The LABEL element
10. Adding structure to forms: the FIELDSET and LEGEND elements
11. Giving focus to an element
    1. Tabbing navigation
    2. Access keys
12. Disabled and read-but controls
    1. Disabled controls
    2. Read-only controls
13. Form submission
    1. Course submission method
    2. Successful controls
    3. Processing form data
       • Footstep one: Identify the successful controls
       • Step two: Build a class information set up
       • Step three: Encode the form data set
       • Stride four: Submit the encoded form data set
    4. Form content types
       • application/x-world wide web-form-urlencoded
       • multipart/grade-data

17.1 Introduction to forms

An HTML grade is a department of a certificate containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users more often than not "complete" a form by modifying its controls (entering text, selecting carte items, etc.), before submitting the grade to an agent for processing (due east.m., to a Spider web server, to a mail server, etc.)

Hither's a uncomplicated form that includes labels, radio buttons, and push buttons (reset the grade or submit information technology):

          <Grade action="http://somesite.com/prog/adduser" method="mail">     <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="electronic mail">email: </Label>               <INPUT type="text" id="email"><BR>     <INPUT type="radio" name="sex activity" value="Male"> Male<BR>     <INPUT type="radio" proper name="sex" value="Female person"> Female person<BR>     <INPUT type="submit" value="Send"> <INPUT blazon="reset">     </P>  </Grade>        

Notation. This specification includes more than detailed information about forms in the subsections on course display issues.

17.ii Controls

Users interact with forms through named controls.

A command's "control name" is given by its name aspect. The scope of the name attribute for a control within a FORM chemical element is the FORM element.

Each control has both an initial value and a current value, both of which are character strings. Delight consult the definition of each control for information about initial values and possible constraints on values imposed by the command. In full general, a command'southward "initial value" may be specified with the control element'due south value attribute. Nonetheless, the initial value of a TEXTAREA element is given by its contents, and the initial value of an OBJECT element in a form is determined by the object implementation (i.e., information technology lies outside the telescopic of this specification).

The control's "electric current value" is first set to the initial value. Thereafter, the control'south current value may be modified through user interaction and scripts.

A control'southward initial value does non change. Thus, when a form is reset, each control'south current value is reset to its initial value. If a command does not have an initial value, the result of a form reset on that control is undefined.

When a course is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which proper name/value pairs are submitted are called successful controls.

17.2.ane Command types

HTML defines the following control types:

buttons

Authors may create three types of buttons:

• submit buttons: When activated, a submit button submits a form. A course may comprise more one submit button.
• reset buttons: When activated, a reset push button resets all controls to their initial values.
• button buttons: Push buttons have no default behavior. Each push may have client-side scripts associated with the element's result attributes. When an event occurs (e.grand., the user presses the button, releases it, etc.), the associated script is triggered.

  Authors should specify the scripting language of a push button button script through a default script annunciation (with the META chemical element).

Authors create buttons with the BUTTON element or the INPUT element. Please consult the definitions of these elements for details about specifying different button types.

Note. Authors should annotation that the Button element offers richer rendering capabilities than the INPUT element.

checkboxes

Checkboxes (and radio buttons) are on/off switches that may be toggled past the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful.

Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same holding. The INPUT element is used to create a checkbox control.

radio buttons

Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the aforementioned name are switched "off". The INPUT element is used to create a radio button control.

If no radio button in a set sharing the same control proper noun is initially "on", user agent behavior for choosing which control is initially "on" is undefined. Annotation. Since existing implementations handle this case differently, the current specification differs from RFC 1866 ([RFC1866] department 8.1.2.four), which states:

At all times, exactly ane of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.

Since user agent beliefs differs, authors should ensure that in each set of radio buttons that one is initially "on".

menus

Menus offering users options from which to cull. The SELECT element creates a carte, in combination with the OPTGROUP and OPTION elements.

text input

Authors may create two types of controls that allow users to input text. The INPUT element creates a unmarried-line input command and the TEXTAREA element creates a multi-line input control. In both cases, the input text becomes the control'due south electric current value.

file select

This control type allows the user to select files so that their contents may exist submitted with a form. The INPUT chemical element is used to create a file select control.

hidden controls

Authors may create controls that are not rendered only whose values are submitted with a grade. Authors generally use this control type to shop information between client/server exchanges that would otherwise exist lost due to the stateless nature of HTTP (encounter [RFC2616]). The INPUT element is used to create a hidden control.

object controls

Authors may insert generic objects in forms such that associated values are submitted along with other controls. Authors create object controls with the OBJECT element.

The elements used to create controls generally appear inside a Grade element, but may besides appear exterior of a Form element annunciation when they are used to build user interfaces. This is discussed in the department on intrinsic events. Note that controls outside a form cannot be successful controls.

17.3 The FORM element

Commencement tag: required, Finish tag: required

Aspect definitions

action = uri [CT]

This attribute specifies a form processing amanuensis. User amanuensis behavior for a value other than an HTTP URI is undefined.

method = get|post [CI]

This aspect specifies which HTTP method volition be used to submit the course data set. Possible (instance-insensitive) values are "get" (the default) and "post". Meet the section on form submission for usage information.

enctype = content-type [CI]

This attribute specifies the content type used to submit the grade to the server (when the value of method is "mail"). The default value for this attribute is "application/10-www-course-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".

accept-charset = charset list [CI]

This attribute specifies the list of character encodings for input data that is accepted by the server processing this form. The value is a space- and/or comma-delimited listing of charset values. The customer must translate this list as an exclusive-or listing, i.e., the server is able to have any unmarried grapheme encoding per entity received.

The default value for this attribute is the reserved string "UNKNOWN". User agents may interpret this value equally the graphic symbol encoding that was used to transmit the document containing this FORM element.

take = content-type-list [CI]

This aspect specifies a comma-separated list of content types that a server processing this grade will handle correctly. User agents may utilize this data to filter out non-conforming files when prompting a user to select files to be sent to the server (cf. the INPUT chemical element when type="file").

name = cdata [CI]

This aspect names the element so that it may be referred to from mode sheets or scripts. Notation. This attribute has been included for backwards compatibility. Applications should utilise the id aspect to place elements.

Attributes divers elsewhere

• id, course (document-wide identifiers)
• lang (language information), dir (text direction)
• style (inline style information)
• championship (element title)
• target (target frame data)
• onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The FORM chemical element acts equally a container for controls. It specifies:

• The layout of the class (given by the contents of the element).
• The program that will handle the completed and submitted form (the activity attribute). The receiving plan must exist able to parse name/value pairs in order to brand use of them.
• The method by which user data will exist sent to the server (the method attribute).
• A character encoding that must be accustomed by the server in order to handle this form (the accept-charset aspect). User agents may advise the user of the value of the accept-charset attribute and/or restrict the user's ability to enter unrecognized characters.

A grade can contain text and markup (paragraphs, lists, etc.) in addition to form controls.

The following example shows a form that is to exist processed past the "adduser" programme when submitted. The grade will be sent to the plan using the HTTP "post" method.

          <Form action="http://somesite.com/prog/adduser" method="post">          ...course contents...          </Class>        

Please consult the section on form submission for information nigh how user agents must prepare class data for servers and how user agents should handle expected responses.

Note. Further discussion on the beliefs of servers that receive form information is beyond the telescopic of this specification.

17.4 The INPUT element

<!ENTITY % InputType   "(TEXT | PASSWORD | CHECKBOX |     RADIO | SUBMIT | RESET |     FILE | HIDDEN | IMAGE | Push button)"    >  <!-- attribute proper noun required for all but submit and reset --> <!ELEMENT          INPUT          - O EMPTY              -- form control --> <!ATTLIST INPUT   %attrs;                              -- %coreattrs, %i18n, %events --          type          %InputType;    TEXT      -- what kind of widget is needed --          name          CDATA          #IMPLIED  -- submit as part of form --          value          CDATA          #IMPLIED  -- Specify for radio buttons and checkboxes --          checked          (checked)      #IMPLIED  -- for radio buttons and bank check boxes --          disabled          (disabled)     #Unsaid  -- 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          %URI;          #Unsaid  -- for fields with images --          alt          CDATA          #IMPLIED  -- short description --          usemap          %URI;          #IMPLIED  -- use customer-side image map --          ismap          (ismap)        #Unsaid  -- employ server-side image map --          tabindex          NUMBER         #Implied  -- position in tabbing society --          accesskey          %Grapheme;    #Implied  -- accessibility key graphic symbol --          onfocus          %Script;       #Implied  -- the chemical element got the focus --          onblur          %Script;       #Unsaid  -- the element lost the focus --          onselect          %Script;       #IMPLIED  -- some text was selected --          onchange          %Script;       #Unsaid  -- the chemical element value was changed --          accept          %ContentTypes; #IMPLIED  -- list of MIME types for file upload --   >        

Showtime tag: required, End tag: forbidden

Aspect definitions

blazon = text|password|checkbox|radio|submit|reset|file|subconscious|image|push button [CI]

This aspect specifies the type of command to create. The default value for this aspect is "text".

name = cdata [CI]

This aspect assigns the control name.

value = cdata [CA]

This attribute specifies the initial value of the control. It is optional except when the blazon attribute has the value "radio" or "checkbox".

size = cdata [CN]

This attribute tells the user agent the initial width of the command. The width is given in pixels except when type attribute has the value "text" or "countersign". In that case, its value refers to the (integer) number of characters.

maxlength = number [CN]

When the type attribute has the value "text" or "password", this attribute specifies the maximum number of characters the user may enter. This number may exceed the specified size, in which case the user agent should offering a scrolling mechanism. The default value for this aspect is an unlimited number.

checked [CI]

When the type attribute has the value "radio" or "checkbox", this boolean attribute specifies that the button is on. User agents must ignore this attribute for other control types.

src = uri [CT]

When the blazon attribute has the value "image", this attribute specifies the location of the image to be used to decorate the graphical submit button.

Attributes defined elsewhere

• id, class (certificate-wide identifiers)
• lang (language information), dir (text direction)
• title (chemical element championship)
• way (inline style data)
• alt (alternate text)
• align (alignment)
• accept (legal content types for a server)
• readonly (read-merely input controls)
• disabled (disabled input controls)
• tabindex (tabbing navigation)
• accesskey (access keys)
• usemap (customer-side image maps)
• ismap (server-side image maps)
• onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

17.4.one Control types created with INPUT

The control type divers by the INPUT element depends on the value of the type attribute:

text

Creates a single-line text input control.

countersign

Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a series of asterisks). This control type is ofttimes used for sensitive input such as passwords. Note that the current value is the text entered by the user, non the text rendered by the user agent.

Note. Awarding designers should note that this mechanism affords simply calorie-free security protection. Although the password is masked past user agents from coincidental observers, it is transmitted to the server in articulate text, and may exist read by anyone with depression-level access to the network.

checkbox

Creates a checkbox.

radio

Creates a radio button.

submit

Creates a submit push.

image

Creates a graphical submit push button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The 10 value is measured in pixels from the left of the image, and the y value in pixels from the top of the paradigm. The submitted information includes name.x=x-value and name.y=y-value where "name" is the value of the proper name attribute, and x-value and y-value are the 10 and y coordinate values, respectively.

If the server takes different deportment depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternating approaches:

• Use multiple submit buttons (each with its own epitome) in identify of a unmarried graphical submit button. Authors may utilize style sheets to command the positioning of these buttons.
• Apply a client-side prototype map together with scripting.

reset

Creates a reset button.

push

Creates a push button. User agents should utilise the value of the value aspect as the push'southward characterization.

subconscious

Creates a hidden control.

file

Creates a file select command. User agents may use the value of the value attribute equally the initial file name.

17.iv.2 Examples of forms containing INPUT controls

The following sample HTML fragment defines a simple form that allows the user to enter a first proper name, final proper name, e-mail address, and gender. When the submit button is activated, the form will be sent to the program specified past the action attribute.

          <FORM action="http://somesite.com/prog/adduser" method="post">     <P>     Offset name: <INPUT type="text" name="firstname"><BR>     Last name: <INPUT type="text" name="lastname"><BR>     email: <INPUT type="text" name="electronic mail"><BR>     <INPUT type="radio" proper name="sexual practice" value="Male"> Male person<BR>     <INPUT type="radio" name="sexual practice" value="Female"> Female person<BR>     <INPUT type="submit" value="Send"> <INPUT type="reset">     </P>  </Form>        

This form might be rendered as follows:

In the department on the Label element, nosotros discuss mark up labels such as "First name".

In this side by side example, the JavaScript function name verify is triggered when the "onclick" event occurs:

<HEAD> <META http-equiv="Content-Script-Blazon" content="text/javascript"> </Head> <Torso>  <Course action="..." method="mail">     <P>     <INPUT blazon="button" value="Click Me" onclick="verify()">  </Form> </BODY>        

Delight consult the department on intrinsic events for more information nigh scripting and events.

The following example shows how the contents of a user-specified file may exist submitted with a grade. The user is prompted for his or her name and a list of file names whose contents should exist submitted with the class. By specifying the enctype value of "multipart/form-information", each file's contents will exist packaged for submission in a separate section of a multipart document.

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

17.5 The Push element

Commencement tag: required, End tag: required

Aspect definitions

name = cdata [CI]

This aspect assigns the control name.

value = cdata [CS]

This aspect assigns the initial value to the button.

type = submit|button|reset [CI]

This attribute declares the blazon of the button. Possible values:

• submit: Creates a submit button. This is the default value.
• reset: Creates a reset push button.
• button: Creates a push button.

Attributes defined elsewhere

• id, grade (document-wide identifiers)
• lang (linguistic communication information), dir (text direction)
• title (chemical element title)
• style (inline style information)
• disabled (disabled input controls)
• accesskey (access keys)
• tabindex (tabbing navigation)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Buttons created with the BUTTON element function just like buttons created with the INPUT chemical element, but they offer richer rendering possibilities: the Push button element may have content. For case, a BUTTON element that contains an image functions like and may resemble an INPUT chemical element whose type is set to "epitome", but the Push button chemical element blazon allows content.

Visual user agents may render Push buttons with relief and an upward/down move when clicked, while they may return INPUT buttons as "flat" images.

The following example expands a previous case, merely creates submit and reset buttons with Button instead of INPUT. The buttons contain images by way of the IMG chemical element.

          <Class action="http://somesite.com/prog/adduser" method="post">     <P>     First name: <INPUT blazon="text" name="firstname"><BR>     Final name: <INPUT type="text" name="lastname"><BR>     email: <INPUT type="text" name="email"><BR>     <INPUT type="radio" proper noun="sex" value="Male"> Male<BR>     <INPUT type="radio" name="sex" value="Female person"> Female person<BR>     <Push button name="submit" value="submit" blazon="submit">     Transport<IMG src="/icons/wow.gif" alt="wow"></Push button>     <Button name="reset" type="reset">     Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>     </P>  </Grade>        

Recall that authors must provide alternate text for an IMG element.

Information technology is illegal to associate an image map with an IMG that appears every bit the contents of a BUTTON element.

ILLEGAL Instance:
The post-obit is not legal HTML.

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

17.half-dozen The SELECT, OPTGROUP, and Choice elements

Start tag: required, End tag: required

SELECT Attribute definitions

name = cdata [CI]

This attribute assigns the control name.

size = number [CN]

If a SELECT element is presented as a scrolled list box, this attribute specifies the number of rows in the list that should be visible at the same time. Visual user agents are not required to present a SELECT element as a list box; they may utilise any other machinery, such as a drib-downwardly menu.

multiple [CI]

If set, this boolean aspect allows multiple selections. If not set, the SELECT element only permits single selections.

Attributes defined elsewhere

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (chemical element title)
• way (inline style data)
• disabled (disabled input controls)
• tabindex (tabbing navigation)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The SELECT chemical element creates a menu. Each option offered by the menu is represented by an Option element. A SELECT element must contain at least i OPTION chemical element.

The OPTGROUP chemical element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and retrieve than a single long list of options. In HTML 4, all OPTGROUP elements must exist specified directly inside a SELECT element (i.e., groups may non be nested).

17.half-dozen.1 Pre-selected options

Zero or more choices may be pre-selected for the user. User agents should determine which choices are pre-selected as follows:

• If no Choice chemical element has the selected attribute set, user agent behavior for choosing which pick is initially selected is undefined. Note. Since existing implementations handle this case differently, the current specification differs from RFC 1866 ([RFC1866] section eight.i.3), which states:

  The initial state has the start option selected, unless a SELECTED attribute is present on any of the <Option> elements.

  Since user agent behavior differs, authors should ensure that each menu includes a default pre-selected Selection.

• If i OPTION element has the selected attribute set, it should exist pre-selected.
• If the SELECT element has the multiple attribute set up and more than one OPTION element has the selected attribute set, they should all be pre-selected.
• It is considered an error if more than than ane Option chemical element has the selected attribute set and the SELECT element does not accept the multiple attribute set. User agents may vary in how they handle this mistake, but should not pre-select more one choice.

Start tag: required, Finish tag: required

OPTGROUP Aspect definitions

label = text [CS]

This attribute specifies the characterization for the pick group.

Attributes divers elsewhere

• id, class (certificate-wide identifiers)
• lang (linguistic communication information), dir (text direction)
• title (element championship)
• manner (inline mode information)
• disabled (disabled input controls)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Note. Implementors are brash that future versions of HTML may extend the grouping machinery to allow for nested groups (i.e., OPTGROUP elements may nest). This will allow authors to stand for a richer hierarchy of choices.

Start tag: required, Cease tag: optional

Option Attribute definitions

selected [CI]

When set, this boolean aspect specifies that this option is pre-selected.

value = cdata [CS]

This attribute specifies the initial value of the control. If this attribute is not set, the initial value is fix to the contents of the Pick element.

label = text [CS]

This attribute allows authors to specify a shorter characterization for an option than the content of the OPTION element. When specified, user agents should use the value of this attribute rather than the content of the Pick element as the option label.

Attributes defined elsewhere

• id, class (certificate-wide identifiers)
• lang (language information), dir (text direction)
• title (chemical element title)
• style (inline mode information)
• disabled (disabled input controls)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

When rendering a menu choice, user agents should use the value of the characterization aspect of the OPTION element as the choice. If this attribute is not specified, user agents should use the contents of the Pick chemical element.

The label attribute of the OPTGROUP chemical element specifies the label for a group of choices.

In this example, we create a menu that allows the user to select which of seven software components to install. The start and second components are pre-selected but may be deselected by the user. The remaining components are non pre-selected. The size attribute states that the card should only have iv rows fifty-fifty though the user may select from among 7 options. The other options should be made available through a scrolling mechanism.

The SELECT is followed past submit and reset buttons.

<Class action="http://somesite.com/prog/component-select" method="post">    <P>    <SELECT multiple size="four" proper noun="component-select">       <OPTION selected value="Component_1_a">Component_1</Option>       <OPTION selected value="Component_1_b">Component_2</Option>       <OPTION>Component_3</Pick>       <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">    </P> </FORM>        

Simply selected options will be successful (using the control proper name "component-select"). When no options are selected, the control is not successful and neither the proper name nor whatever values are submitted to the server when the form is submitted. Note that where the value attribute is set, information technology determines the command's initial value, otherwise it's the element'southward contents.

In this example we use the OPTGROUP element to grouping choices. The following markup:

<Course action="http://somesite.com/prog/someprog" method="post">  <P>  <SELECT proper noun="ComOS">      <OPTION selected characterization="none" value="none">None</Selection>      <OPTGROUP label="PortMaster 3">        <Selection characterization="iii.7.1" value="pm3_3.seven.one">PortMaster 3 with ComOS three.7.1</Selection>        <OPTION label="3.7" value="pm3_3.seven">PortMaster 3 with ComOS 3.seven</Option>        <OPTION label="iii.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>      </OPTGROUP>      <OPTGROUP label="PortMaster 2">        <Choice label="3.seven" value="pm2_3.seven">PortMaster two with ComOS 3.vii</Selection>        <Option label="3.5" value="pm2_3.5">PortMaster 2 with ComOS iii.5</OPTION>      </OPTGROUP>      <OPTGROUP label="IRX">        <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>        <Selection characterization="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</Selection>      </OPTGROUP>  </SELECT> </Class>        

represents the following grouping:

          None   PortMaster three       3.7.ane       iii.7       3.5   PortMaster 2       3.7       three.five   IRX       3.7R       3.5R        

Visual user agents may allow users to select from pick groups through a hierarchical menu or some other mechanism that reflects the structure of choices.

A graphical user agent might return this every bit:

This image shows a SELECT element rendered equally cascading menus. The summit label of the menu displays the currently selected value (PortMaster 3, 3.seven.1). The user has unfurled 2 cascading menus, simply has non yet selected the new value (PortMaster two, 3.seven). Annotation that each cascading bill of fare displays the label of an OPTGROUP or OPTION element.

17.seven The TEXTAREA element

Get-go tag: required, End tag: required

Attribute definitions

name = cdata [CI]

This aspect assigns the control name.

rows = number [CN]

This attribute specifies the number of visible text lines. Users should be able to enter more than lines than this, and so user agents should provide some ways to ringlet through the contents of the control when the contents extend across the visible expanse.

cols = number [CN]

This attribute specifies the visible width in average character widths. Users should be able to enter longer lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible surface area. User agents may wrap visible text lines to continue long lines visible without the need for scrolling.

Attributes defined elsewhere

• id, form (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information)
• readonly (read-only input controls)
• disabled (disabled input controls)
• tabindex (tabbing navigation)
• onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The TEXTAREA element creates a multi-line text input command. User agents should use the contents of this element as the initial value of the command and should render this text initially.

This example creates a TEXTAREA control that is 20 rows past 80 columns and contains two lines of text initially. The TEXTAREA is followed by submit and reset buttons.

<Class activity="http://somesite.com/prog/text-read" method="postal service">    <P>    <TEXTAREA name="thetext" rows="20" cols="80">    Offset line of initial text.    Second line of initial text.    </TEXTAREA>    <INPUT type="submit" value="Send"><INPUT type="reset">    </P> </Class>        

Setting the readonly attribute allows authors to brandish unmodifiable text in a TEXTAREA. This differs from using standard marked-up text in a document considering the value of TEXTAREA is submitted with the class.

17.8 The ISINDEX element

ISINDEX is deprecated. This element creates a unmarried-line text input control. Authors should employ the INPUT element to create text input controls.

Run into the Transitional DTD for the formal definition.

The ISINDEX chemical element creates a single-line text input command that allows any number of characters. User agents may use the value of the prompt attribute every bit a title for the prompt.

DEPRECATED Instance:
The following ISINDEX declaration:

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

could be rewritten with INPUT as follows:

<Class activeness="..." method="post"> <P>Enter your search phrase: <INPUT type="text"></P> </Class>        

Semantics of ISINDEX. Currently, the semantics for ISINDEX are only well-divers when the base of operations URI for the enclosing certificate is an HTTP URI. In practice, the input string is restricted to Latin-ane as there is no mechanism for the URI to specify a unlike character set.

17.9 Labels

Some grade controls automatically accept labels associated with them (printing buttons) while most do non (text fields, checkboxes and radio buttons, and menus).

For those controls that take implicit labels, user agents should use the value of the value attribute equally the label string.

The LABEL element is used to specify labels for controls that practice not accept implicit labels,

17.9.1 The LABEL chemical element

Start tag: required, Finish tag: required

Attribute definitions

for = idref [CS]

This attribute explicitly associates the characterization being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being divers is associated with the element's contents.

Attributes defined elsewhere

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (chemical element championship)
• style (inline way information)
• accesskey (access keys)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The LABEL element may be used to attach information to controls. Each Characterization element is associated with exactly i course control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same equally the value of the id attribute of the associated control chemical element. More than one Label may be associated with the same control past creating multiple references via the for attribute.

This example creates a table that is used to align 2 text input controls and their associated labels. Each label is associated explicitly with one text input:

<FORM action="..." method="mail service"> <TABLE>   <TR>     <TD><LABEL for="fname">First Name</Label>     <TD><INPUT blazon="text" proper name="firstname" id="fname">   <TR>     <TD><LABEL for="lname">Last Name</LABEL>     <TD><INPUT type="text" proper name="lastname" id="lname"> </TABLE> </Course>        

This case extends a previous example form to include LABEL elements.

          <Grade activity="http://somesite.com/prog/adduser" method="post">     <P>     <LABEL for="firstname">First proper 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" proper noun="sex" value="Male person"> Male<BR>     <INPUT type="radio" name="sex" value="Female"> Female person<BR>     <INPUT type="submit" value="Transport"> <INPUT type="reset">     </P>  </FORM>        

To associate a label with another control implicitly, the control element must be inside the contents of the Characterization element. In this case, the LABEL may only contain one command element. The label itself may be positioned earlier or later the associated control.

In this example, we implicitly associate two labels with two text input controls:

<FORM action="..." method="mail"> <P> <LABEL>    Outset Name    <INPUT type="text" proper noun="firstname"> </Characterization> <LABEL>    <INPUT type="text" proper noun="lastname">    Last Name </Label> </P> </Form>        

Note that this technique cannot exist used when a tabular array is being used for layout, with the label in one cell and its associated control in another cell.

When a LABEL element receives focus, it passes the focus on to its associated control. See the section beneath on access keys for examples.

Labels may be rendered by user agents in a number of ways (east.g., visually, read by speech communication synthesizers, etc.)

17.10 Calculation construction to forms: the FIELDSET and Fable elements

Start tag: required, End tag: required

Legend Attribute definitions

align = superlative|bottom|left|right [CI]

Deprecated. This attribute specifies the position of the legend with respect to the fieldset. Possible values:

• acme: The legend is at the meridian of the fieldset. This is the default value.
• bottom: The legend is at the lesser of the fieldset.
• left: The legend is at the left side of the fieldset.
• right: The legend is at the right side of the fieldset.

Attributes defined elsewhere

• id, class (document-wide identifiers)
• lang (linguistic communication information), dir (text direction)
• title (chemical element title)
• style (inline style information)
• accesskey (access keys)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The FIELDSET element allows authors to grouping thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for spoken language-oriented user agents. The proper utilize of this element makes documents more accessible.

The LEGEND chemical element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.

In this example, we create a form that one might fill out at the doctor'southward office. Information technology is divided into three sections: personal information, medical history, and current medication. Each section contains controls for inputting the appropriate information.

<Grade activeness="..." method="post">  <P>  <FIELDSET>   <Fable>Personal Information</Legend>   Last Proper name: <INPUT name="personal_lastname" type="text" tabindex="1">   First Name: <INPUT proper name="personal_firstname" type="text" tabindex="two">   Accost: <INPUT name="personal_address" type="text" tabindex="3">          ...more personal information...          </FIELDSET>  <FIELDSET>   <Legend>Medical History</LEGEND>   <INPUT proper name="history_illness"           type="checkbox"           value="Smallpox" tabindex="20"> Smallpox   <INPUT proper name="history_illness"           blazon="checkbox"           value="Mumps" tabindex="21"> Mumps   <INPUT name="history_illness"           type="checkbox"           value="Dizziness" tabindex="22"> Dizziness   <INPUT proper name="history_illness"           type="checkbox"           value="Sneezing" tabindex="23"> Sneezing          ...more medical history...          </FIELDSET>  <FIELDSET>   <Fable>Current Medication</Legend>   Are you currently taking any medication?    <INPUT proper noun="medication_now"           blazon="radio"           value="Yes" tabindex="35">Yeah   <INPUT name="medication_now"           type="radio"           value="No" tabindex="35">No    If you are currently taking medication, please indicate   it in the space below:   <TEXTAREA name="current_medication"              rows="20" cols="fifty"             tabindex="twoscore">   </TEXTAREA>  </FIELDSET> </FORM>        

Note that in this example, we might improve the visual presentation of the course by adjustment elements within each FIELDSET (with mode sheets), adding color and font data (with style sheets), adding scripting (say, to just open the "electric current medication" text area if the user indicates he or she is currently on medication), etc.

17.11 Giving focus to an chemical element

In an HTML document, an element must receive focus from the user in order to become active and perform its tasks. For example, users must actuate a link specified by the A element in guild to follow the specified link. Similarly, users must requite a TEXTAREA focus in social club to enter text into it.

There are several ways to requite focus to an chemical element:

• Designate the element with a pointing device.
• Navigate from one element to the next with the keyboard. The document'southward author may define a tabbing order that specifies the order in which elements will receive focus if the user navigates the certificate with the keyboard (see tabbing navigation). In one case selected, an chemical element may be activated past some other key sequence.
• Select an element through an admission key (sometimes called "keyboard shortcut" or "keyboard accelerator").

17.xi.i Tabbing navigation

Attribute definitions

tabindex = number [CN]

This attribute specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767. User agents should ignore leading zeros.

The tabbing order defines the order in which elements will receive focus when navigated past the user via the keyboard. The tabbing order may include elements nested inside other elements.

Elements that may receive focus should be navigated by user agents according to the following rules:

1. Those elements that support the tabindex attribute and assign a positive value to it are navigated first. Navigation proceeds from the element with the lowest tabindex value to the element with the highest value. Values need not be sequential nor must they begin with any particular value. Elements that accept identical tabindex values should be navigated in the order they appear in the character stream.
2. Those elements that exercise not support the tabindex attribute or back up it and assign it a value of "0" are navigated adjacent. These elements are navigated in the gild they announced in the character stream.
3. Elements that are disabled do non participate in the tabbing order.

The following elements support the tabindex attribute: A, Area, Push button, INPUT, OBJECT, SELECT, and TEXTAREA.

In this example, the tabbing club will exist the BUTTON, the INPUT elements in order (note that "field1" and the push button share the same tabindex, simply "field1" appears later in the character stream), and finally the link created past the A element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with FORM</Championship> </Head> <BODY>          ...some text...          <P>Become to the  <A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>          ...some more...          <BUTTON type="button" proper name="get-database"            tabindex="1" onclick="become-database"> Get the current database. </Push>          ...some more...          <FORM activeness="..." method="mail service"> <P> <INPUT tabindex="i" type="text" proper noun="field1"> <INPUT tabindex="2" type="text" name="field2"> <INPUT tabindex="three" blazon="submit" name="submit"> </P> </FORM> </Trunk> </HTML>        

Tabbing keys. The actual primal sequence that causes tabbing navigation or chemical element activation depends on the configuration of the user amanuensis (eastward.g., the "tab" primal is used for navigation and the "enter" key is used to activate a selected element).

User agents may also define cardinal sequences to navigate the tabbing order in reverse. When the end (or beginning) of the tabbing order is reached, user agents may circle dorsum to the beginning (or end).

17.11.ii Access keys

Attribute definitions

accesskey = graphic symbol [CN]

This attribute assigns an access key to an chemical element. An access key is a single grapheme from the certificate character set. Note. Authors should consider the input method of the expected reader when specifying an accesskey.

Pressing an access primal assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined past the A element, the user agent more often than not follows the link. When a user activates a radio push, the user agent changes the value of the radio push. When the user activates a text field, it allows input, etc.

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

This example assigns the access primal "U" to a label associated with an INPUT control. Typing the access key gives focus to the label which in turn gives information technology to the associated control. The user may and so enter text into the INPUT area.

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

In this example, we assign an admission key to a link defined by the A element. Typing this admission key takes the user to another document, in this instance, a table of contents.

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

The invocation of access keys depends on the underlying system. For instance, on machines running MS Windows, one more often than not has to press the "alt" key in addition to the access key. On Apple systems, one by and large has to press the "cmd" cardinal in addition to the access central.

The rendering of access keys depends on the user agent. Nosotros recommend that authors include the access key in label text or wherever the access key is to apply. User agents should render the value of an access key in such a manner as to emphasize its role and to distinguish it from other characters (e.g., by underlining it).

17.12 Disabled and read-just controls

In contexts where user input is either undesirable or irrelevant, it is important to be able to disable a control or return information technology read-but. For example, ane may want to disable a form'due south submit push button until the user has entered some required data. Similarly, an author may want to include a piece of read-only text that must be submitted as a value along with the grade. The following sections draw disabled and read-but controls.

17.12.1 Disabled controls

Attribute definitions

disabled [CI]

When set for a form control, this boolean attribute disables the control for user input.

When ready, the disabled attribute has the following furnishings on an element:

• Disabled controls exercise not receive focus.
• Disabled controls are skipped in tabbing navigation.
• Disabled controls cannot be successful.

The post-obit elements back up the disabled aspect: BUTTON, INPUT, OPTGROUP, Selection, SELECT, and TEXTAREA.

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

How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.

In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor volition its value be submitted with the grade.

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

Note. The only way to alter dynamically the value of the disabled attribute is through a script.

17.12.2 Read-only controls

Attribute definitions

readonly [CI]

When set for a class control, this boolean attribute prohibits changes to the command.

The readonly aspect specifies whether the control may be modified by the user.

When prepare, the readonly attribute has the following effects on an chemical element:

• Read-only elements receive focus but cannot be modified by the user.
• Read-simply elements are included in tabbing navigation.
• Read-only elements may be successful.

The following elements support the readonly attribute: INPUT and TEXTAREA.

How read-merely elements are rendered depends on the user agent.

Note. The simply manner to alter dynamically the value of the readonly attribute is through a script.

17.13 Form submission

The following sections explain how user agents submit course data to grade processing agents.

17.xiii.one Grade submission method

The method attribute of the Class chemical element specifies the HTTP method used to send the grade to the processing amanuensis. This attribute may take two values:

• get: With the HTTP "get" method, the form information set is appended to the URI specified by the action attribute (with a question-mark ("?") as separator) and this new URI is sent to the processing agent.
• post: With the HTTP "post" method, the form data set up is included in the body of the form and sent to the processing agent.

The "get" method should be used when the class is idempotent (i.east., causes no side-furnishings). Many database searches accept no visible side-effects and make ideal applications for the "get" method.

If the service associated with the processing of a form causes side effects (for example, if the form modifies a database or subscription to a service), the "mail" method should exist used.

Notation. The "go" method restricts form data set values to ASCII characters. Only the "post" method (with enctype="multipart/class-data") is specified to cover the entire [ISO10646] character set.

17.13.2 Successful controls

A successful command is "valid" for submission. Every successful control has its control proper name paired with its electric current value as role of the submitted form information gear up. A successful control must exist defined inside a Grade element and must take a command name.

However:

• Controls that are disabled cannot be successful.
• If a form contains more than one submit button, only the activated submit button is successful.
• All "on" checkboxes may exist successful.
• For radio buttons that share the same value of the name attribute, just the "on" radio button may be successful.
• For menus, the control name is provided by a SELECT element and values are provided past OPTION elements. Just selected options may be successful. When no options are selected, the control is non successful and neither the proper name nor whatsoever values are submitted to the server when the course is submitted.
• The current value of a file select is a listing of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the course data. The file contents are packaged co-ordinate to the form's content type.
• The electric current value of an object control is adamant past the object's implementation.

If a control doesn't have a current value when the course is submitted, user agents are not required to treat it as a successful control.

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

• Reset buttons.
• OBJECT elements whose declare attribute has been set.

Hidden controls and controls that are not rendered because of mode sheet settings may even so be successful. For case:

<Grade action="..." method="post"> <P> <INPUT type="password" style="brandish:none"             name="invisible-countersign"           value="mypassword"> </Class>        

volition nevertheless crusade a value to be paired with the name "invisible-countersign" and submitted with the form.

17.13.3 Processing form data

When the user submits a form (e.g., by activating a submit button), the user agent processes it equally follows.

Stride ane: Identify the successful controls

Step two: Build a form data prepare

A form information ready is a sequence of control-proper noun/electric current-value pairs constructed from successful controls

Step three: Encode the class data fix

The grade data set is then encoded according to the content type specified past the enctype attribute of the Class element.

Step four: Submit the encoded form data fix

Finally, the encoded data is sent to the processing amanuensis designated by the activeness attribute using the protocol specified past the method attribute.

This specification does non specify all valid submission methods or content types that may exist used with forms. Even so, HTML 4 user agents must support the established conventions in the following cases:

• If the method is "get" and the action is an HTTP URI, the user agent takes the value of action, appends a `?' to it, then appends the class data fix, encoded using the "awarding/x-www-class-urlencoded" content blazon. The user agent then traverses the link to this URI. In this scenario, form information are restricted to ASCII codes.
• If the method is "post" and the activity is an HTTP URI, the user agent conducts an HTTP "post" transaction using the value of the activity attribute and a message created co-ordinate to the content type specified by the enctype attribute.

For whatsoever other value of action or method, beliefs is unspecified.

User agents should render the response from the HTTP "get" and "mail service" transactions.

17.13.iv Form content types

The enctype attribute of the FORM element specifies the content type used to encode the form information set for submission to the server. User agents must support the content types listed beneath. Behavior for other content types is unspecified.

Please also consult the section on escaping ampersands in URI attribute values.

awarding/10-www-form-urlencoded

This is the default content type. Forms submitted with this content blazon must be encoded as follows:

1. Control names and values are escaped. Space characters are replaced by `+', and then reserved characters are escaped as described in [RFC1738], section 2.ii: Non-alphanumeric characters are replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII lawmaking of the character. Line breaks are represented as "CR LF" pairs (i.eastward., `%0D%0A').
2. The command names/values are listed in the order they appear in the certificate. The name is separated from the value by `=' and name/value pairs are separated from each other past `&'.

multipart/form-information

Note. Delight consult [RFC2388] for additional information most file uploads, including backwards compatibility problems, the relationship between "multipart/form-data" and other content types, performance issues, etc.

Please consult the appendix for data almost security issues for forms.

The content blazon "application/x-www-class-urlencoded" is inefficient for sending large quantities of binary information or text containing non-ASCII characters. The content type "multipart/form-data" should exist used for submitting forms that contain files, not-ASCII data, and binary information.

The content "multipart/grade-data" follows the rules of all multipart MIME information streams as outlined in [RFC2045]. The definition of "multipart/form-data" is available at the [IANA] registry.

A "multipart/form-data" message contains a series of parts, each representing a successful control. The parts are sent to the processing amanuensis in the aforementioned lodge the corresponding controls appear in the document stream. Office boundaries should not occur in any of the information; how this is washed lies outside the telescopic of this specification.

As with all multipart MIME types, each part has an optional "Content-Type" header that defaults to "text/apparently". User agents should supply the "Content-Type" header, accompanied by a "charset" parameter.

Each role is expected to incorporate:

1. a "Content-Disposition" header whose value is "form-data".
2. a name attribute specifying the control name of the corresponding control. Control names originally encoded in non-ASCII character sets may be encoded using the method outlined in [RFC2045].

Thus, for example, for a control named "mycontrol", the respective function would be specified:

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

As with all MIME transmissions, "CR LF" (i.due east., `%0D%0A') is used to separate lines of data.

Each part may be encoded and the "Content-Transfer-Encoding" header supplied if the value of that part does not accommodate to the default (7BIT) encoding (see [RFC2045], section 6)

If the contents of a file are submitted with a grade, the file input should be identified past the appropriate content blazon (e.g., "application/octet-stream"). If multiple files are to exist returned as the result of a unmarried form entry, they should be returned as "multipart/mixed" embedded within the "multipart/form-data".

The user amanuensis should attempt to supply a file name for each submitted file. The file proper name may be specified with the "filename" parameter of the 'Content-Disposition: form-information' header, or, in the example of multiple files, in a 'Content-Disposition: file' header of the subpart. If the file name of the client'due south operating system is non in U.s.a.-ASCII, the file name might exist approximated or encoded using the method of [RFC2045]. This is convenient for those cases where, for example, the uploaded files might incorporate references to each other (east.g., a TeX file and its ".sty" auxiliary fashion description).

The post-obit example illustrates "multipart/grade-data" encoding. Suppose nosotros have the following form:

          <Grade activeness="http://server.com/cgi/handle"        enctype="multipart/grade-data"        method="post">    <P>    What is your name? <INPUT type="text" proper noun="submit-name"><BR>    What files are you sending? <INPUT type="file" name="files"><BR>    <INPUT type="submit" value="Transport"> <INPUT type="reset">  </FORM>        

If the user enters "Larry" in the text input, and selects the text file "file1.txt", the user agent might transport back the following data:

        Content-Type: multipart/course-data; boundary=AaB03x     --AaB03x    Content-Disposition: form-data; name="submit-name"     Larry    --AaB03x    Content-Disposition: form-information; proper noun="files"; filename="file1.txt"    Content-Blazon: text/plain     ... contents of file1.txt ...    --AaB03x--      

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

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

bucherpergersuse.blogspot.com

Source: https://www.w3.org/TR/html401/interact/forms.html

Share this post