How to Upload a Content of Text Documnet Into Html Text Area

17 Forms

Contents

1. Introduction to forms
2. Controls
   1. Command types
3. The FORM element
4. The INPUT element
   1. Control types created with INPUT
   2. Examples of forms containing INPUT controls
5. The BUTTON element
6. The SELECT, OPTGROUP, and Choice elements
   1. Pre-selected options
7. The TEXTAREA chemical 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-only controls
    1. Disabled controls
    2. Read-only controls
13. Form submission
    1. Form submission method
    2. Successful controls
    3. Processing class data
       • Step one: Place the successful controls
       • Step two: Build a form data set
       • Step three: Encode the form data set
       • Step four: Submit the encoded form information set
    4. Form content types
       • application/10-www-form-urlencoded
       • multipart/form-data

17.ane Introduction to forms

An HTML class is a department of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a class by modifying its controls (entering text, selecting card items, etc.), before submitting the form to an agent for processing (eastward.g., to a Web server, to a mail server, etc.)

Here'south a simple class that includes labels, radio buttons, and push buttons (reset the class or submit it):

          <FORM action="http://somesite.com/prog/adduser" method="postal service">     <P>     <Label for="firstname">First name: </Characterization>               <INPUT blazon="text" id="firstname"><BR>     <Label for="lastname">Terminal proper noun: </LABEL>               <INPUT type="text" id="lastname"><BR>     <LABEL for="email">email: </LABEL>               <INPUT type="text" id="email"><BR>     <INPUT type="radio" name="sex activity" value="Male person"> Male<BR>     <INPUT type="radio" name="sexual activity" value="Female"> Female person<BR>     <INPUT type="submit" value="Send"> <INPUT blazon="reset">     </P>  </FORM>        

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

17.2 Controls

Users collaborate with forms through named controls.

A control's "control proper name" is given by its name attribute. The scope of the proper noun attribute for a control inside a Grade element is the Form element.

Each control has both an initial value and a current value, both of which are grapheme strings. Delight consult the definition of each command for information about initial values and possible constraints on values imposed by the control. In general, a control's "initial value" may exist specified with the control element's value attribute. Yet, the initial value of a TEXTAREA chemical element is given past its contents, and the initial value of an OBJECT chemical element in a form is determined past the object implementation (i.east., information technology lies exterior the scope of this specification).

The command'due south "electric current value" is beginning ready to the initial value. Thereafter, the control's current value may exist modified through user interaction and scripts.

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

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

17.two.ane Control types

HTML defines the following control types:

buttons

Authors may create three types of buttons:

• submit buttons: When activated, a submit push button submits a course. A class may contain more than than one submit button.
• reset buttons: When activated, a reset button resets all controls to their initial values.
• push buttons: Push buttons have no default behavior. Each push may have client-side scripts associated with the element's event attributes. When an event occurs (e.g., 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 declaration (with the META element).

Authors create buttons with the BUTTON element or the INPUT element. Delight consult the definitions of these elements for details near specifying dissimilar button types.

Note. Authors should note that the Push button element offers richer rendering capabilities than the INPUT element.

checkboxes

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

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

radio buttons

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

If no radio button in a prepare sharing the same control proper name is initially "on", user agent behavior for choosing which command is initially "on" is undefined. Note. Since existing implementations handle this instance differently, the current specification differs from RFC 1866 ([RFC1866] section 8.1.ii.iv), which states:

At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a ready of radio buttons specifies `CHECKED', and so the user agent must bank check the starting time radio button of the set initially.

Since user amanuensis behavior differs, authors should ensure that in each set of radio buttons that i is initially "on".

menus

Menus offer users options from which to cull. The SELECT element creates a menu, in combination with the OPTGROUP and Selection elements.

text input

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

file select

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

hidden controls

Authors may create controls that are not rendered but whose values are submitted with a form. Authors by and large utilize this command type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP (see [RFC2616]). The INPUT element is used to create a hidden command.

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 Class element, merely may also announced exterior of a Class element annunciation when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

17.3 The Grade chemical element

Start tag: required, Stop tag: required

Attribute definitions

action = uri [CT]

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

method = go|mail service [CI]

This attribute specifies which HTTP method will be used to submit the grade data set. Possible (case-insensitive) values are "get" (the default) and "post". Encounter the section on form submission for usage data.

enctype = content-type [CI]

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

take-charset = charset listing [CI]

This aspect specifies the listing of graphic symbol encodings for input data that is accepted past the server processing this form. The value is a space- and/or comma-delimited list of charset values. The client must interpret this list equally an exclusive-or listing, i.e., the server is able to accept any unmarried character encoding per entity received.

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

accept = content-type-listing [CI]

This attribute specifies a comma-separated list of content types that a server processing this grade volition handle correctly. User agents may apply this information to filter out non-befitting files when prompting a user to select files to be sent to the server (cf. the INPUT element when blazon="file").

name = cdata [CI]

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

Attributes defined elsewhere

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

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

• The layout of the form (given by the contents of the element).
• The program that will handle the completed and submitted grade (the activity attribute). The receiving programme must be able to parse proper name/value pairs in order to make use of them.
• The method by which user data will be sent to the server (the method attribute).
• A character encoding that must be accepted by the server in guild to handle this form (the accept-charset attribute). 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 tin can contain text and markup (paragraphs, lists, etc.) in improver to course controls.

The following case shows a form that is to be candy by the "adduser" program when submitted. The form will be sent to the programme using the HTTP "mail service" method.

          <FORM action="http://somesite.com/prog/adduser" method="mail service">          ...form contents...          </Grade>        

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

Note. Further discussion on the behavior of servers that receive form data is across the scope of this specification.

17.iv The INPUT element

<!ENTITY % InputType   "(TEXT | PASSWORD | CHECKBOX |     RADIO | SUBMIT | RESET |     FILE | HIDDEN | Epitome | 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 check boxes --          disabled          (disabled)     #IMPLIED  -- unavailable in this context --          readonly          (readonly)     #Unsaid  -- 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 clarification --          usemap          %URI;          #IMPLIED  -- apply customer-side image map --          ismap          (ismap)        #Unsaid  -- utilize server-side image map --          tabindex          NUMBER         #IMPLIED  -- position in tabbing society --          accesskey          %Character;    #IMPLIED  -- accessibility fundamental grapheme --          onfocus          %Script;       #IMPLIED  -- the element got the focus --          onblur          %Script;       #IMPLIED  -- the element lost the focus --          onselect          %Script;       #Unsaid  -- some text was selected --          onchange          %Script;       #IMPLIED  -- the element value was inverse --          accept          %ContentTypes; #Implied  -- list of MIME types for file upload --   >        

Start tag: required, End tag: forbidden

Aspect definitions

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

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

name = cdata [CI]

This attribute assigns the command proper name.

value = cdata [CA]

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

size = cdata [CN]

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

maxlength = number [CN]

When the type aspect 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 machinery. The default value for this attribute is an unlimited number.

checked [CI]

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

src = uri [CT]

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

Attributes divers elsewhere

• id, form (document-broad identifiers)
• lang (language data), dir (text direction)
• title (chemical element title)
• way (inline style information)
• alt (alternate text)
• marshal (alignment)
• have (legal content types for a server)
• readonly (read-only input controls)
• disabled (disabled input controls)
• tabindex (tabbing navigation)
• accesskey (access keys)
• usemap (client-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.1 Control types created with INPUT

The control blazon defined by the INPUT chemical element depends on the value of the blazon attribute:

text

Creates a single-line text input command.

password

Similar "text", simply the input text is rendered in such a way as to hide the characters (e.thou., a series of asterisks). This control type is often used for sensitive input such equally passwords. Note that the current value is the text entered by the user, not the text rendered by the user agent.

Annotation. Awarding designers should notation that this mechanism affords merely low-cal security protection. Although the password is masked past user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level admission to the network.

checkbox

Creates a checkbox.

radio

Creates a radio push.

submit

Creates a submit button.

epitome

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

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x 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 name attribute, and ten-value and y-value are the x and y coordinate values, respectively.

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

• Use multiple submit buttons (each with its own image) in place of a unmarried graphical submit button. Authors may use style sheets to control the positioning of these buttons.
• Use a client-side image map together with scripting.

reset

Creates a reset button.

push button

Creates a push. User agents should utilize the value of the value attribute equally the button'southward label.

subconscious

Creates a hidden control.

file

Creates a file select control. User agents may utilize the value of the value attribute every bit the initial file name.

17.4.2 Examples of forms containing INPUT controls

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

          <Form activity="http://somesite.com/prog/adduser" method="mail">     <P>     First name: <INPUT blazon="text" name="firstname"><BR>     Last proper name: <INPUT type="text" name="lastname"><BR>     electronic mail: <INPUT type="text" proper name="electronic mail"><BR>     <INPUT type="radio" name="sex" value="Male"> Male<BR>     <INPUT type="radio" proper name="sex" value="Female person"> Female<BR>     <INPUT type="submit" value="Transport"> <INPUT type="reset">     </P>  </FORM>        

This class might be rendered every bit follows:

In the section on the Characterization element, we discuss marking upwards labels such as "Outset proper name".

In this adjacent example, the JavaScript function proper noun verify is triggered when the "onclick" event occurs:

<HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> </Head> <BODY>  <FORM action="..." method="mail">     <P>     <INPUT type="push" value="Click Me" onclick="verify()">  </FORM> </Torso>        

Please consult the section on intrinsic events for more data virtually scripting and events.

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

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

17.v The Push button element

Start tag: required, End tag: required

Attribute definitions

name = cdata [CI]

This attribute assigns the control proper name.

value = cdata [CS]

This attribute assigns the initial value to the push button.

type = submit|button|reset [CI]

This attribute declares the type of the push button. Possible values:

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

Attributes defined elsewhere

• id, grade (document-wide identifiers)
• lang (language information), dir (text management)
• title (element title)
• fashion (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 Push button chemical element function simply like buttons created with the INPUT element, merely they offer richer rendering possibilities: the Button element may take content. For example, a BUTTON chemical element that contains an image functions like and may resemble an INPUT element whose blazon is gear up to "epitome", but the Push chemical element type allows content.

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

The following example expands a previous example, only creates submit and reset buttons with BUTTON instead of INPUT. The buttons incorporate images by mode of the IMG element.

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

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

It is illegal to acquaintance an image map with an IMG that appears every bit the contents of a Push button element.

ILLEGAL EXAMPLE:
The following is non legal HTML.

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

17.half dozen The SELECT, OPTGROUP, and OPTION elements

Start tag: required, Cease tag: required

SELECT Attribute definitions

name = cdata [CI]

This aspect assigns the control name.

size = number [CN]

If a SELECT element is presented as a scrolled list box, this aspect 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 use any other mechanism, such as a drop-down menu.

multiple [CI]

If prepare, this boolean attribute allows multiple selections. If non set, the SELECT element only permits unmarried selections.

Attributes defined elsewhere

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

The SELECT element creates a menu. Each option offered past the menu is represented by an Pick chemical element. A SELECT element must contain at to the lowest degree ane Option element.

The OPTGROUP element allows authors to grouping choices logically. This is particularly helpful when the user must choose from a long listing of options; groups of related choices are easier to grasp and remember than a unmarried long list of options. In HTML iv, all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not 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 Pick 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 8.1.iii), which states:

  The initial country has the beginning option selected, unless a SELECTED attribute is present on any of the <Selection> elements.

  Since user agent behavior differs, authors should ensure that each bill of fare includes a default pre-selected OPTION.

• If one OPTION chemical element has the selected attribute gear up, it should be pre-selected.
• If the SELECT element has the multiple aspect set and more than one OPTION element has the selected attribute set up, they should all be pre-selected.
• Information technology is considered an error if more than one OPTION element has the selected attribute fix and the SELECT element does non take the multiple attribute set up. User agents may vary in how they handle this mistake, but should not pre-select more than than one pick.

Get-go tag: required, Finish tag: required

OPTGROUP Attribute definitions

label = text [CS]

This attribute specifies the label for the pick group.

Attributes defined elsewhere

• id, class (certificate-broad identifiers)
• lang (language information), dir (text direction)
• title (element title)
• manner (inline manner 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 let for nested groups (i.due east., OPTGROUP elements may nest). This will allow authors to represent a richer hierarchy of choices.

Start tag: required, Terminate tag: optional

Option Aspect 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 non set, the initial value is set to the contents of the Pick element.

characterization = text [CS]

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

Attributes divers elsewhere

• id, class (document-broad identifiers)
• lang (language information), dir (text management)
• title (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 bill of fare selection, user agents should use the value of the label aspect of the Choice element as the pick. If this aspect is not specified, user agents should employ the contents of the Selection element.

The characterization aspect of the OPTGROUP 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 first and second components are pre-selected but may be deselected past the user. The remaining components are not pre-selected. The size attribute states that the card should only take 4 rows even though the user may select from among 7 options. The other options should be made bachelor through a scrolling mechanism.

The SELECT is followed past 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">Component_1</OPTION>       <Selection selected value="Component_1_b">Component_2</OPTION>       <Selection>Component_3</OPTION>       <OPTION>Component_4</OPTION>       <OPTION>Component_5</OPTION>       <OPTION>Component_6</OPTION>       <OPTION>Component_7</Pick>    </SELECT>    <INPUT type="submit" value="Send"><INPUT blazon="reset">    </P> </Class>        

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

In this example nosotros use the OPTGROUP element to group choices. The following markup:

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

represents the following grouping:

          None   PortMaster 3       3.vii.1       three.7       3.5   PortMaster 2       three.seven       3.v   IRX       3.7R       iii.5R        

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

A graphical user agent might return this as:

This image shows a SELECT element rendered as cascading menus. The acme label of the card displays the currently selected value (PortMaster iii, 3.7.i). The user has unfurled ii cascading menus, but has not yet selected the new value (PortMaster 2, 3.seven). Note that each cascading menu displays the label of an OPTGROUP or Choice element.

17.7 The TEXTAREA element

Outset tag: required, Stop tag: required

Aspect definitions

name = cdata [CI]

This attribute assigns the control name.

rows = number [CN]

This aspect specifies the number of visible text lines. Users should exist able to enter more than 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.

cols = number [CN]

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

Attributes defined elsewhere

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline fashion data)
• 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 chemical element creates a multi-line text input control. User agents should use the contents of this element as the initial value of the command and should render this text initially.

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

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

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

17.8 The ISINDEX chemical element

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

See the Transitional DTD for the formal definition.

The ISINDEX element creates a unmarried-line text input command that allows any number of characters. User agents may use the value of the prompt attribute as a championship for the prompt.

DEPRECATED EXAMPLE:
The following ISINDEX declaration:

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

could be rewritten with INPUT equally follows:

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

Semantics of ISINDEX. Currently, the semantics for ISINDEX are just well-defined when the base of operations URI for the enclosing document is an HTTP URI. In do, the input string is restricted to Latin-1 every bit in that location is no mechanism for the URI to specify a different character set.

17.9 Labels

Some form controls automatically take labels associated with them (printing buttons) while most practice not (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 as the label string.

The LABEL element is used to specify labels for controls that do not have implicit labels,

17.9.1 The Label element

First tag: required, End tag: required

Attribute definitions

for = idref [CS]

This attribute explicitly assembly the label beingness defined with another command. When present, the value of this attribute must be the same equally the value of the id attribute of some other command in the same certificate. When absent, the label being defined is associated with the element'south contents.

Attributes defined elsewhere

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

The Label element may exist used to attach information to controls. Each Characterization element is associated with exactly one form control.

The for aspect associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than 1 Characterization may exist associated with the same control past creating multiple references via the for attribute.

This case creates a tabular array that is used to align two text input controls and their associated labels. Each characterization is associated explicitly with one text input:

<FORM activity="..." method="post"> <Table>   <TR>     <TD><LABEL for="fname">First Name</Characterization>     <TD><INPUT blazon="text" name="firstname" id="fname">   <TR>     <TD><LABEL for="lname">Terminal Name</Label>     <TD><INPUT type="text" name="lastname" id="lname"> </TABLE> </Grade>        

This example extends a previous example course to include LABEL elements.

          <Grade action="http://somesite.com/prog/adduser" method="mail">     <P>     <Label for="firstname">Starting time name: </LABEL>               <INPUT type="text" id="firstname"><BR>     <Label for="lastname">Concluding name: </Label>               <INPUT type="text" id="lastname"><BR>     <LABEL for="email">email: </Characterization>               <INPUT type="text" id="email"><BR>     <INPUT type="radio" name="sex" value="Male"> Male person<BR>     <INPUT type="radio" name="sexual practice" value="Female"> Female<BR>     <INPUT type="submit" value="Ship"> <INPUT type="reset">     </P>  </Form>        

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

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

<Form activity="..." method="mail service"> <P> <Characterization>    First Name    <INPUT type="text" proper noun="firstname"> </LABEL> <LABEL>    <INPUT type="text" name="lastname">    Last Name </Label> </P> </FORM>        

Note that this technique cannot be used when a table is existence used for layout, with the label in one cell and its associated control in another jail cell.

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

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

17.x Adding structure to forms: the FIELDSET and LEGEND elements

Start tag: required, Stop tag: required

LEGEND Aspect definitions

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

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

• top: The legend is at the elevation of the fieldset. This is the default value.
• bottom: The legend is at the lesser of the fieldset.
• left: The fable is at the left side of the fieldset.
• right: The legend is at the right side of the fieldset.

Attributes defined elsewhere

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

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

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

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

<Course action="..." method="post">  <P>  <FIELDSET>   <Fable>Personal Information</Legend>   Last Proper noun: <INPUT name="personal_lastname" type="text" tabindex="1">   Kickoff Name: <INPUT name="personal_firstname" blazon="text" tabindex="2">   Address: <INPUT name="personal_address" blazon="text" tabindex="iii">          ...more than personal information...          </FIELDSET>  <FIELDSET>   <LEGEND>Medical History</LEGEND>   <INPUT name="history_illness"           blazon="checkbox"           value="Smallpox" tabindex="twenty"> Smallpox   <INPUT proper noun="history_illness"           blazon="checkbox"           value="Mumps" tabindex="21"> Mumps   <INPUT proper noun="history_illness"           type="checkbox"           value="Dizziness" tabindex="22"> Dizziness   <INPUT name="history_illness"           blazon="checkbox"           value="Sneezing" tabindex="23"> Sneezing          ...more than medical history...          </FIELDSET>  <FIELDSET>   <Fable>Current Medication</Fable>   Are you currently taking any medication?    <INPUT name="medication_now"           blazon="radio"           value="Yes" tabindex="35">Aye   <INPUT name="medication_now"           type="radio"           value="No" tabindex="35">No    If you lot are currently taking medication, please indicate   it in the space below:   <TEXTAREA name="current_medication"              rows="20" cols="l"             tabindex="40">   </TEXTAREA>  </FIELDSET> </FORM>        

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

17.11 Giving focus to an element

In an HTML document, an element must receive focus from the user in order to become agile and perform its tasks. For instance, users must activate a link specified past the A element in club to follow the specified link. Similarly, users must give a TEXTAREA focus in order to enter text into it.

There are several means to requite focus to an element:

• Designate the element with a pointing device.
• Navigate from ane chemical element to the next with the keyboard. The certificate's writer may define a tabbing guild that specifies the society in which elements will receive focus if the user navigates the document with the keyboard (see tabbing navigation). One time selected, an chemical element may be activated past some other key sequence.
• Select an element through an access key (sometimes called "keyboard shortcut" or "keyboard accelerator").

17.xi.1 Tabbing navigation

Attribute definitions

tabindex = number [CN]

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

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

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

1. Those elements that support the tabindex attribute and assign a positive value to information technology are navigated commencement. Navigation gain from the element with the lowest tabindex value to the chemical element with the highest value. Values need non exist sequential nor must they brainstorm with whatsoever particular value. Elements that have identical tabindex values should exist navigated in the lodge they appear in the graphic symbol stream.
2. Those elements that exercise not support the tabindex aspect or support it and assign it a value of "0" are navigated adjacent. These elements are navigated in the order they appear in the character stream.
3. Elements that are disabled do not participate in the tabbing guild.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://world wide web.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with FORM</TITLE> </HEAD> <BODY>          ...some text...          <P>Get to the  <A tabindex="ten" href="http://www.w3.org/">W3C Web site.</A>          ...some more...          <BUTTON type="button" name="get-database"            tabindex="1" onclick="get-database"> Get the electric current database. </BUTTON>          ...some more than...          <FORM action="..." method="post"> <P> <INPUT tabindex="i" type="text" proper name="field1"> <INPUT tabindex="ii" blazon="text" name="field2"> <INPUT tabindex="three" blazon="submit" proper name="submit"> </P> </FORM> </Trunk> </HTML>        

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

User agents may also define key sequences to navigate the tabbing order in reverse. When the end (or offset) of the tabbing order is reached, user agents may circumvolve back to the beginning (or end).

17.11.2 Admission keys

Attribute definitions

accesskey = character [CN]

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

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For case, when a user activates a link defined by the A element, the user agent more often than not follows the link. When a user activates a radio push, the user amanuensis changes the value of the radio button. When the user activates a text field, information technology allows input, etc.

The following elements support the accesskey attribute: A, Area, BUTTON, INPUT, Label, and Legend, and TEXTAREA.

This example assigns the access key "U" to a label associated with an INPUT control. Typing the access cardinal gives focus to the label which in turn gives it to the associated control. The user may then enter text into the INPUT area.

<FORM activity="..." method="postal service"> <P> <LABEL for="fuser" accesskey="U"> User Proper noun </LABEL> <INPUT blazon="text" name="user" id="fuser"> </P> </Course>        

In this example, nosotros assign an admission fundamental to a link divers by the A element. Typing this access fundamental takes the user to some other certificate, in this example, a tabular array 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 organisation. For instance, on machines running MS Windows, one generally has to press the "alt" key in addition to the access fundamental. On Apple systems, one generally has to press the "cmd" key in addition to the admission fundamental.

The rendering of access keys depends on the user agent. We recommend that authors include the access cardinal in label text or wherever the access key is to utilize. User agents should return the value of an admission primal in such a way as to emphasize its role and to distinguish it from other characters (e.thou., by underlining it).

17.12 Disabled and read-only controls

In contexts where user input is either undesirable or irrelevant, information technology is important to be able to disable a command or render it read-only. For example, one may desire to disable a form's submit push until the user has entered some required information. Similarly, an author may want to include a piece of read-just text that must be submitted every bit a value forth with the course. The post-obit sections depict disabled and read-only controls.

17.12.i Disabled controls

Attribute definitions

disabled [CI]

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

When fix, the disabled attribute has the following effects on an element:

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

The following elements support the disabled attribute: Button, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

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

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

In this example, the INPUT element is disabled. Therefore, information technology cannot receive user input nor will its value be submitted with the form.

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

Notation. The only fashion to modify dynamically the value of the disabled aspect is through a script.

17.12.2 Read-only controls

Attribute definitions

readonly [CI]

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

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

When gear up, the readonly attribute has the following effects on an element:

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

The following elements back up the readonly attribute: INPUT and TEXTAREA.

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

Note. The but manner to modify dynamically the value of the readonly aspect is through a script.

17.13 Form submission

The following sections explicate how user agents submit form data to class processing agents.

17.thirteen.1 Form submission method

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

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

The "get" method should be used when the form is idempotent (i.due east., causes no side-effects). Many database searches have 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 service" method should be used.

Note. The "become" method restricts form data fix values to ASCII characters. Just the "mail" method (with enctype="multipart/form-data") is specified to cover the entire [ISO10646] character set.

17.thirteen.2 Successful controls

A successful command is "valid" for submission. Every successful control has its control name paired with its current value every bit part of the submitted form information set. A successful control must be defined within a FORM chemical element and must have a control name.

Nevertheless:

• Controls that are disabled cannot be successful.
• If a grade contains more than 1 submit push button, only the activated submit button is successful.
• All "on" checkboxes may exist successful.
• For radio buttons that share the aforementioned value of the name attribute, only the "on" radio button may exist successful.
• For menus, the command name is provided by a SELECT element and values are provided by Option elements. Only selected options may be successful. When no options are selected, the control is not successful and neither the proper noun nor any values are submitted to the server when the form is submitted.
• The current value of a file select is a list of 1 or more than file names. Upon submission of the course, the contents of each file are submitted with the residue of the class information. The file contents are packaged according to the course's content type.
• The current value of an object control is determined by the object'southward implementation.

If a control doesn't accept a electric current value when the form is submitted, user agents are not required to treat information technology as a successful control.

Furthermore, user agents should non consider the post-obit controls successful:

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

Hidden controls and controls that are not rendered considering of style sheet settings may all the same be successful. For example:

<FORM action="..." method="mail"> <P> <INPUT type="password" fashion="brandish:none"             name="invisible-password"           value="mypassword"> </Course>        

volition still cause a value to be paired with the proper name "invisible-countersign" and submitted with the form.

17.13.3 Processing form information

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

Stride one: Identify the successful controls

Step ii: Build a course information set

A form data set is a sequence of control-name/current-value pairs constructed from successful controls

Stride 3: Encode the form data prepare

The class data set is then encoded according to the content blazon specified by the enctype attribute of the Course element.

Pace four: Submit the encoded form data fix

Finally, the encoded information is sent to the processing amanuensis designated by the activity attribute using the protocol specified by the method aspect.

This specification does not specify all valid submission methods or content types that may exist used with forms. However, 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 amanuensis takes the value of activity, appends a `?' to it, then appends the form information set, encoded using the "awarding/x-www-form-urlencoded" content type. The user agent so traverses the link to this URI. In this scenario, form data are restricted to ASCII codes.
• If the method is "post" and the action is an HTTP URI, the user agent conducts an HTTP "post" transaction using the value of the activity aspect and a message created according to the content type specified by the enctype attribute.

For whatever other value of action or method, behavior is unspecified.

User agents should render the response from the HTTP "go" and "post" transactions.

17.13.4 Grade content types

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

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

application/x-world wide web-form-urlencoded

This is the default content type. Forms submitted with this content type must exist encoded equally follows:

1. Control names and values are escaped. Infinite characters are replaced by `+', and and then reserved characters are escaped as described in [RFC1738], section ii.2: Not-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.e., `%0D%0A').
2. The control names/values are listed in the order they announced in the document. The name is separated from the value by `=' and name/value pairs are separated from each other by `&'.

multipart/course-data

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

Please consult the appendix for information about security bug for forms.

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

The content "multipart/class-data" follows the rules of all multipart MIME data streams as outlined in [RFC2045]. The definition of "multipart/grade-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 order the respective controls appear in the document stream. Part boundaries should non occur in any of the data; how this is washed lies outside the scope of this specification.

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

Each part is expected to contain:

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

Thus, for instance, for a control named "mycontrol", the corresponding part would be specified:

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

As with all MIME transmissions, "CR LF" (i.e., `%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 adapt to the default (7BIT) encoding (see [RFC2045], section 6)

If the contents of a file are submitted with a class, the file input should be identified past the advisable content type (e.g., "application/octet-stream"). If multiple files are to be returned as the issue of a single course entry, they should be returned every bit "multipart/mixed" embedded within the "multipart/form-data".

The user agent should attempt to supply a file name for each submitted file. The file proper noun may exist specified with the "filename" parameter of the 'Content-Disposition: form-data' header, or, in the case of multiple files, in a 'Content-Disposition: file' header of the subpart. If the file proper name of the customer'south operating system is not in US-ASCII, the file name might be approximated or encoded using the method of [RFC2045]. This is convenient for those cases where, for case, the uploaded files might contain references to each other (e.g., a TeX file and its ".sty" auxiliary style description).

The following instance illustrates "multipart/course-data" encoding. Suppose we have the following grade:

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

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

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

If the user selected a 2d (image) file "file2.gif", the user amanuensis might construct the parts equally follows:

        Content-Type: multipart/course-information; 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: file; filename="file1.txt"    Content-Type: text/evidently     ... 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--      

mayoweact1987.blogspot.com

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