HTML form tag

An HTML form is a section of a web document into which the user can enter information. This information is passed back to a web server where it might be recorded in a database for future use or perhaps used to control what information is returned to the user.

HTML forms can prompt the user to type in some text or choose from a number of options, collect several different items of information at once and can restrict user responses to a se of known values. Including forms in web pages is the most challenging feature for web designers. Forms are used for two-way communication between web pages and web sites.

Common uses of forms include

Comment response – It is generally used as a way to collect comments from web site viewers and have people suggest improvements.

On Line Order Forms – These are now common on the web, provide a way for viewers to order goods from online stores. Order entry forms typically require the user to provide an address, credit card number and other information necessary to facilitate online commerce.

Subscription forms – A subscribe Model is adopted by many sites, particularly those that attempt to generate revenue through direct subscriptions or by selling advertising space.

Registration forms – These are used to collect information about a user and often are tied to an authentication system, which limits access to the site.

Customization forms – Some sites allow the user to select the look and feel for the site itself, literally creating a custom site for each visitor. This form might allow users to specify what topics they are interested in within an online magazine. An HTML form consists of two parts. The first part, the user can see and which he fills out and next one is the part, the users cannot see.

The second part specifies how the server should process the user’s information you should not that HTML forms cannot provide a fully interactive user interface, they can only construct a query or submission to be fetched like any other web page. There is no way of controlling what is typed into forms fields. Forms only prompt the user for information.

To handle the information entered by the user through the form usually requires the provider to write a CGI-based program designed specifically to process submissions from that form.

Form Controls or Widgets

A form is made up of fields or controls as well as the markup necessary to structure the form and control it presentation. The controls are the items filled in or manipulated by the user to indicate the state of the form. Form controls include:

Text Fields – These are areas for brief text input.

Check boxes – That allow visitors to select none, one or several items from a list use them to elicit multiple answers.

Submit and Reset buttons – These send the form information to the server for processing and return the form to its original settings.

Radio buttons –They give visitors an opportunity to choose only one item:

Text Areas – These are areas for lengthy text input, as in open-ended comments or free form responses.

Select lists – These are lists from which visitors can choose one or more items, use them to present long but finite list of choices.

The form tag: <form>....... </form>:

In the HTML source code, a form must start with a <FORM> tag and end with a </FORM>tag. It has mainly two attributes “action” and “method”.

Syntax <Formaction="URL"method= get | post> form elements </Form>

When you have written a form handler (mainly a CGI program) to which the data in the form will be sent, you will be able to add on action= “URL” attributes to specify the location of the handler.

The “method” attribute tells that browser how to send the user’s data to the server. It takes either “get” or “post” as its value. Note that the attributes can appear in any order. So you can put method first and then “action” or vice versa.

The Input Tag

This tag defines an input area within a form. It asks the user to input information in one of several ways. The different ways of input are specified by “type attribute. This attribute can accept text, radio, checkbox, passwords submit, reset, image, hidden, etc. as its value. Each of them will be discussed separately in the coming sections.

Text Fields

The most common “type” of form <INPUT> is text. It presents the user with a prompt for a single line of text. These fields are commonly used for a name address, email address, country, postal code etc. It is a blank area within a form and is the place for visitor-supplied information.

Syntax <INPUTtype="text"name="text-id"value="default-text"size="n"maxlength="m" read only>

Name: To label the content. This name is not visible to the user and must be unique within the form.

Value: To supply initial text to the text field and is optional. The content of this attribute will be shown on the text field, unless the user changes it.

Size: To specify the physical size of the text input box. The default value is usually a length of 20 characters.

Maxlength: To set the number of characters a user can input. This value should not be less than the value of the size attribute otherwise user won’t be able to type to the end of the box and might get confused. The default value of max length is unlimited.

Readonly: To lock the predefined content within the text field and the content won’t be editable further.

Passwords

Password fields are similar to text fields, except the contents of the field are not visible on the screen. It displays * * * * (asterisks) instead or the actual input.

These fields are mainly used for confidential contents, To establish a password field just set type = “password” in the <INPUT> tag

Syntax <INPUTtype="password"name="password-id"Value="default-text"size="n"Maxlength="m"readonly>

Radio Buttons

Radio buttons are mutually exclusive i.e. they allow the user to choose one of the several options. Selecting one turns the other options off. These buttons are viewed in the browser as small circles with a prompt and the selected one appears with a solid dot in it.

Syntax <INPUTtype="radio"name="radio-id"Value="choice-id"checked>

Name: Applies to the collection of buttons, not just to a particular item. Browsers use the name attribute to decide which buttons belong to the same group and therefore which ones are to set and unset as a group.

Value: It is the value assigned by the user. These are predefined and they do not accept other input. Each radio button must be assigned a value.

Checked: It causes the radio button to be on when the form is first created. It is the default selection.

Checkboxes

An INPUT tag with attribute type =”checkbox” offers the user an “on” or “off” switch. Each check box works independently from the others, visitors can select or deselect any combination of checkboxes use of these boxes is appropriate for open questions or questions that have more than one “right” answer. Checkboxes appear as square boxes and contain a checkmark when act as a checkbox is switch on when the form is submitted its value attribute is submitted as the form data for the named form component.

Syntax <INPUTtype="Checkbox"name="box -id"Value="choice-id"checked>

Name: To specify separate name for each checkbox. Unlike radio buttons, each item has a separate label. Although the checkboxes visually appear as a set, logically the items are completely separate.

Value: To provide a descriptive value for each checkbox.

Checked: To specify default selection.

Pull Down Lists

A pull down menu lets the user select one choice out of many possible choices. One nice aspect of pull-down menus is that all choices do not have to be seen on the screen and are normally hidden. They occupy minimal amount of space as it displays only on item of the list. In this kind of input field you use <SELECT>instead of <INPUT> and it has a closing tag.

Syntax  <SELECTname="text-id"size="n"multiple> 
 <OPTION Value="Choice-id"selected> Text Label -1 </OPTION>  
..............  
..............     
<OPTIONValue="Choice id m"selected> TEXT LABEL. - m </OPTION> 
 </SELECT>

Name: To establish a name for the select field and is used for form processing.

Size: The number of options you want to show in the window. By default its value is one, specifying size value greater than one turns the pull down list into a scrolling list. In the SELECT field, by default, the user can select only one field.

Multiple: To set the SELECT field to accept any number of options. To select multiple options press ctrl key and click on the options.

<OPTION> Tag: To include the list items. For each list item there must be an <option> tag “The closing” tag is optional.

Value: Whenever a form is submitted, the options in the pull down list are passed to the form handles using the “Value” attribute. If the “Value” attribute is omitted the contents of the option are used instead.

Selected: This attribute is used to specify the default other than the first option. More than the first option- More than one option can be made default by using this attribute but in that case you just include the multiple attribute, otherwise the last option having selected attribute will be considered as default. The defaults will appear when the form is loaded or reset.

The TEXTAREA tag

This tag is used to set an area within a form in which the user can type a large amount of text. The textarea’s are basically used for giving comments and free form feedback from visitors.

Syntax     <TEXTAREAname="text-id"rows="n"Cols="m"Wrap="Virtual physically off" read only> Initial content </TEXT AREA>

TEXTAREA: Sets an area in a form for lengthy visitor input. Initial content for the text area goes between the opening & closing tags. Rows: This attribute specifies the height of the text area. Cols: This attribute specifies the width of the text area.

Wrap: If you turn wrap off the text is handled as one long sequence of text without line breaks. If you set it to virtual the text appears on your page as if it recognized line breaks but when the form is submitted the line breaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen line breaks included.

Readonly: It prevents the user to alter the initial content.

Reset and Submit Buttons

SUBMIT- After filling up the form, the user needs to submit the information. An <INPUT> tag with type = submit provides a button that submits the information in the completed form to the URL, given as the action attribute of the FORM tag.

The information is submitted using the HTTP request type specified by Form’s method attribute discussed in details in topic entitled (“Processing Forms”)

Syntax     <INPUT type="submit" Value="button label text">

Value: This attribute will change the text mentioned on the button just substitute your text in the value attribute. By default “submit” as written over the button. The button size will be controlled directly by the text length.

RESET: The reset value of the type attribute clears all form entries to the default one or leaves them blank if no defaults are specified Not al HTML forms will use this feature, but it can help users to start afresh or if they want to reconsider the default options.

Syntax     <INPUT type="reset" Value="button label text">

The “Value” attribute again is used to specify the text on the button. These buttons can be placed anywhere in the form. But the best place for them is below all the other input fields.

Special < input> Types

 Files

HTML also supports a special input field, a file field, to allow visitors to upload files. If you want visitors to submit information – say a picture, a spreadsheet, a word-processed document or a scanned document, they can use this field to simply upload the file with the hassle of using FTP or e-mail the file.

Syntax     <INPUTtype="file"name="field-id"size="n"accept="file-type">

Name: To label the field

Size: To specify the physical size of the field’s input box.

Accept: To restrict the file types allowed in a file upload. For example add accept = “image/ gif” to occupy only gif files

To include files of some specific types, just separate them by commas. For example to include BOTH .gif and .jpeg files, the following code can be used.

Accept = "image/gif, image/jpeg"

When the form is loaded or reset, a button labeled “Browse” together with a text box for writing the file name appears on the window. As the user clicks on this button a new window “choose file” will open and the user can select the desired file.

 Hidden Value

The input “type” = hidden is unusual in the respect that they do not appear in the displayed form. By setting the “type” attribute to hidden, it is possible to transmit default or previously specified text that is hidden from the user to the handling program. It is a convenient tool for the web designer. It can be used to hold contextual information, such as the name of the form (useful when the same form handles is used for several different forms), where to send the passed data etc.

A hidden input does not show up anywhere on the web page. The visitors would not be able to see it unless they see your page source. This input is recognized only by the form handler program mainly CGI (scripts) that receives the user’s information from the form.

Syntax     <INPUTtype="hidden"name="data-id"Value="hidden form data">

Name: To label the hidden data

Value: It specifies the destination where the hidden form data is to be sent. The value attribute is passed as the form data for the name attribute, but the user cannot see any representation of this form component on the screen and is not prompted to change the form component contents.

One of the best use of the hidden input is to tell the form handler where to send the processed data and where to send your visitor after he fills out your form.

Examples:  <INPUTtype=hiddenname="send processed data to"Value="ecomputernotes.com">

The FIELDSET and LEGEND Tags

<FIELDSET>tag creates a box around a group of widgets and <LEGEND>tag provides a label to the field set. Both tags require closing tags.

Syntax     <FIELDSET> control 1 control 2.......Control n < /FIELDSET>  
<LEGEND> Group label Text</LEGEND>

 Disabled Attribute

This attribute disables a form element. The element contents are not only unalterable, but also unusable. It can be applied to any INPUT tag, as well as to the SELECT, OPTION, TEXTAREA tags. So to disable the File field.

Navigating Through a Form

Now we will be discussing how to navigate through a particular form. By default, you navigate through the form in the order in which elements appear in the form, using tab index attribute you can change this default order. Just place the tabindex attribute in the input field. Our sample form shows the following fields and they will be accessed in the order they are listed. Using the tabindex attribute the order will change.

If two elements have the same tabindex value, the orders will be same as the default order i.e. in which they appear. You can also remove an input field from the tab navigation order by assigning it a negative tabindex value. This attribute can be used with INPUT, SELECT and TEXTAREA elements.

Access Keys

To access the form elements the user either clicks the mouse or uses the tab key. You can give your visitors a direct keyboard access by using access key attribute. This attribute specifies the character that you assign to the form element as a particular hot key. When the key is pressed together with the “alt” key, the corresponding form element gets activated. When assigning characters for access key, always be careful that they do not override the browser’s own access keys. Also function keys (Fl-F12) cannot be made access keys, as they have already been assigned a function. Otherwise the access key defined by you will get preference over the browser’s access key.