Additional attributes - HTML

The <form> tag has many additional attributes. These attributes are listed.

Additional attributes

Although you may not need these attributes in simple forms, these attributes can be very useful. The accept, accept-charset, and enctype attributes are invaluable for processing nontextual and International data. The id attribute (formerly the name attribute) should be used to uniquely identify a form in your document, especially if you use more than one form in the same document.

Field Labels

The <label> tag defines textual labels for form fields. The <label> tag has the following format:

<label for=“id_of_related_tag”>text_label</label>

For example, the following code defines a label for a text box:

The role of the <label> tag is accessibility-related. Most users can rely upon the layout of your forms to determine what labels go with what fields. However, if the user agent does not have a visual component, or if the user is visually impaired, the visual layout of the form cannot be relied upon to match labels and fields. The <label> tag’s for attribute ensures that the user agent can adequately match labels with fields.

Text Input Boxes
One of the most used fields of HTML forms is the simple text field. This field allows for the input of small pieces of text—names, addresses, search terms, and so on. The text input field tag has the following format:

<input type=“text” name=“field_name” value=“initial_value” size=“size_of_field” maxlength=“max_characters_allowed”>

Although all the attributes previously listed are not required, they represent the minimum attributes that you should always use with your text boxes. The following sample text box is designed to accept a name, appears 30 characters long, accepts a maximum of 40 characters, and has no initial value:

<p>Name: <input type=“text” name=“username” value=“” size=“30” maxlength=“40”></p>

The following code example defines a text box to accept an e-mail address. It appears 40 characters wide, only accepts 40 characters, and has an initial value:

<p>Email: <input type=“text” name=“email” value=“” size=“40” maxlength=“40”></p>

Password Input Boxes
The password input box is similar to the text box, but visually obscures data entered into the box by displaying asterisks instead of the actual data entered into the field. The following example displays a password field that accepts 20 characters.

<p>Password: <input type=“password” name=“password” value=“” size=“20” maxlength=“20”></p>

Caution: The password field only visibly obscures the data to help stop casual snoops from seeing what a user inputs into a field. It does not encode or in any way obscure the information at the data level. As such, be careful how you use this field.

Radio Buttons
Radio buttons are groups of small, round buttons that allow a user to choose one option in a group. The name “radio” button comes from how old-fashioned radios used to be tuned—you pushed one of many buttons to tune to a preset station. When one button was pushed, the rest were reset to the out position. Like those buttons, form radio buttons are mutually exclusive—only one of the group can be set. When one is selected, the others in the group are deselected.

The radio button field has the following format:

<input type=“radio” name=“group_name” [checked=“checked”] value=“value_if_selected”>

Note that the value attribute defines what value is returned to the handler if the button is selected. This attribute should be unique between buttons in the same group.

The following example code defines a group of radio buttons that allows a user to select their gender:

If you want a button selected by default, add the checked attribute to the appropriate button’s tag.

Tip:XML and its variants do not allow attributes without values. HTML will allow the checked attribute to be used with or without a value. To ensure your code remains as compliant as possible, it is suggested that you specify a checked box with the checked attribute as checked=“checked” instead of just checked.

Check Boxes
Check boxes are small, square boxes that are used to select non–mutually exclusive choices. They are so named because, when selected, they display a checkmark (or more commonly an “X”) in the box like the check boxes in paper lists.

The checkbox field has the following format:

<input type=“checkbox” name=“field_name” [checked=“checked”] value=“value_if_selected”>

As you can see, other than the mutually exclusive issue, check boxes are very similar in definition to radio buttons. The following example displays a check box allowing the user to select whether they receive solicitous e-mails:

<p><input type=“checkbox” name=“spam_me” checked=“checked” value=“spam_me”> Add me to your email list</p>

Note that the checked attribute can be used to preselect check boxes in your forms. Also, just like radio buttons, the value attribute is used as the value of the check box if it is selected. If no value is given, selected check boxes are given the value of “on.”

List Boxes
List boxes are used to allow a user to pick one or more textual items from a list. The list can be presented in its entirety, with each element visible or as a pull-down list where the user can scroll to their choices.

List boxes are implemented using <select> and <option> tags, and optionally the <optgroup> tag.

The <select> tag provides the container for the list and has the following format:

<select name=“name_of_field” size=“items_to_show” [multiple=“multiple”]>

The <option> tag defines the items for the list. Each item is given its own <option> tag. This tag has the optional attributes.

List Boxes

An example of a minimum of <option> tags follows:

Occasionally, you might want to group options of a list together for clarity. For this you use <optgroup> tags. The <optgroup> tag encapsulates items that should be in that group. For example, the following code defines two groups for the preceding list of options, weekend and weekday:

Different user agents display option groups differently, but the default behavior is to display the option group labels above the options to which they apply.

Option groups are displayed in the list as nonselectable items.

Option groups are displayed in the list as nonselectable items.

Combining all three tags to create a list would resemble the following code:

Large Text Areas
For large pieces of text, you can use the <textarea> tag. This tag can accept textual input of up to 1,024 characters and uses a multiline text box for input. The <textarea> tag has the following format:

<textarea name=“name_of_field” cols=“number_of_columns” rows=“number_of_rows”></textarea>

Note that the <textarea> tag is one of the few form tags that has an open and a close tag. If you want the field to have default content, the content should be placed between the tags. For example, the following code results in the initial form shown in Figure:

<textarea cols=“50” rows=“6”> John Doe 123 Main Street Anywhere, USA</textarea>

Tip: Whatever is placed between the <textarea> tags appears verbatim in the text box when the form is first displayed. Therefore, it is important to carefully watch the formatting of your HTML code. For example, if you want the field to be initially blank, you cannot place the open and close tags on separate lines in the code:


This would result in the field containing a newline character—it would not be blank.

You can set a default value for the <textarea> tag by placing content between the open and close tags.

You can set a default value for the <textarea> tag by placing content between the open and close tags.

Note that the text entered into the <textarea> field wraps within the width of the box, but the text is sent verbatim to the handler. That is, where the user enters line breaks, those breaks are also sent to the handler. However, the wrapped text (without hard line breaks) is sent without breaks.

Note:Previous versions of HTML supported a wrap attribute for the <textarea> tag. This attribute could be used to control how text wrapped in the text box as well as how it was sent to the handler. Unfortunately, user agent support for this attribute was inconsistent—you could not rely on a browser to follow the intent of the attribute. As such, the attribute has been deprecated and should not be used.

Hidden Fields
Hidden fields are used to add data to the form without displaying it to the user. The hidden field has the following format:

<input type=“hidden” name=“name_of_field” value=“value_of_field”>

Other than not being visibly displayed, hidden fields are like any other field. Hidden fields are used mostly for tracking data. For example, in a multipage form, a userid field can be hidden in the form to ensure that subsequent forms, when submitted, are tied to the same user data.

Keep in mind that hidden fields do not display on the user agent but are still visible in the code of the document. As such, hidden fields should never be used for sensitive data.

Occasionally, you might have need for additional, custom buttons on your form. For those cases, you can use the button field. This field has the following format:

<input type=“button” name=“name_of_field” value=“text_for_button”>

This tag results in a standard graphical button being displayed on the form. The following code example results in the button:

You can use the button field to add custom buttons to your form.

You can use the button field to add custom buttons to your form

<input type=“button” name=“BuyNow” value=“Buy Now!”>

Buttons by themselves, however, are useless on a form. To have the button actually do something, you will need to link it to a script via the onclick or other attribute. For example, the following code results in a button that, when clicked, runs the script “buynow”:

<input type=“button” name=“BuyNow” value=“Buy Now!” onclick=“JavaScript:buynow()”>

Images provide a graphical means to convey a message. Using the image type of the <input> tag you can add images to your form, an image that can be used along with other form elements to gather data. The image field has the following format:

<input type=“image” name=“name_of_field” src=“url_to_image_file”>

However, like the button field, image fields by themselves do not provide any actual form controls. To use the image for input purposes, it must be linked to a script. The following example causes the image buynow.jpg to be displayed on a form. When the image is clicked, the script buynow is run:

<input type=“image” name=“buynow” src=“buynow.jpg” onclick=“JavaScript:buynow()”>

File Fields
File fields allow a user to browse for a local file and send it as an attachment to the form data. The file field has the following format:

<input type=“file” name=“name_of_field” size=“display_size_of_field”>

The file field results in a text box with a button that enables the user to browse for a file using their platform’s file browser. Alternately, the user can simply type the path and name of the file in the text box. file field in Internet Explorer. However, in order to use this control in your forms you must do the following:

  • Specify your form as multipart, which allows the file to be attached to the rest of the data.
  • Use the POST, not the GET, method of form delivery.

The file field allows a user to send a local file.

The file field allows a user to send a local file

This means your <form> tag should resemble the following:

<form action=“form_handler” method=“post” enctype=“form/multipart”>

Submit and Reset Buttons
Submit and reset buttons provide control mechanisms for users to submit the data entered to a handler and reset the form to its default state. These buttons have the following format:

Submit button

<input type=“submit” [value=“text_for_button”] >

Reset button

<input type=“reset” [value=“text_for_button”] >

The value attribute for both tags is optional—if this attribute is omitted, the buttons will display default text (usually “Submit” and “Reset,” but is ultimately determined by the user agent).

The submit button, when clicked, causes the form to be submitted to the handler specified in the <form> tag’s action attribute. Alternately, you can use the onclick attribute to call a script to preprocessing the form data. The reset button, when clicked, causes the form to be reloaded and its fields reset to their default values. You can also use the onclick attribute to change the button’s behavior, calling a script instead of reloading the form.

Tip: Use of onclick to change the reset button’s behavior is not recommended. Using onclick to cause the submit button to run a script for preprocessing is an expected process, but the reset button should always simply reset the form. If you need a button to perform some other function, use a custom button field that is appropriately labeled.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics