Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX

19/01/2014 Categories: HTML. No Comments on Forms

A form is a collection of GUI controls like textboxes, checkboxes, radio buttons etc which allows the user to send data to the server. After entering the data into the form, a special program is used to process that data. Such programs are called as form handlers.

Inserting a Form

To insert a form into the web page, we can use the <form> tag. The syntax for the <form> tag is shown below:

<form action=”url_to_send_data” method=”get/post”>

The action attribute is used to specify the formal handler as a URL. The method attribute is used to specify how the data is sent to the server. Valid values for method attribute are GET, POST etc… The <form> tag supports the following attributes:

27-form-tag-attributes

Form Controls

Control Name Description Output/View on Web Page
Field Label Used to provide textual labels for form fields.Syntax:<label for=”id_of_related_tag”>text_label</label>  28-field-label
 Text Field Allows the user to submit single line of text.Syntax:<input type=”text” id=”id_of_field” value=”initial_value”size=”size_of_field” maxlength=”max_characters_allowed” />  29-text-field
 Password Field Allows the user to enter sensitive data which is rendered as asterisks or small dots.Syntax:<input type=”password” id=”id_of_field” value=”initial_value”size=”size_of_field” maxlength=”max_characters_allowed” />  30-password-field
 Radio Button Allows the user to select a single option in a set of available options.Syntax:<input type=”radio” id=”control_id” name=”group_name” [checked=”checked”]value=”value_if_selected” /> Descriptive Text for Button  31-radio-buttons
 Check Box Allows the user to select multiple options in a set of available options.Syntax:<input type=”checkbox” id=”id_of_field” [checked=”checked”] value=”value_if_selected” />  32-check-boxes
List Box or Combo Box Allows the user to select one or more options in a list of available options.Syntax:<select id=”id_of_field” size=”items_to_show” [multiple=”multiple”] ><option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

 33-combo-box
 Text Area Allows the user to enter text as input in multiple lines.Syntax:<textarea id=”id_of_field” name=”name_of_field” cols=”number_of_columns”rows=”number_of_rows”></textarea>  34-text-area
 Hidden Field Allows the user to send data across multiple pages without actually displaying the data in the browser.Syntax:<input type=”hidden” id=”id_of_field” name=”name_of_field”value=”value_of_field” />  No Ouput
 Button Allows the user to display a custom button in the web page.Syntax:<input type=”button” id=”id_of_field” name=”name_of_field”value=”text_for_button” />  35-button
 Image Button Provides the functionality of a normal button along with an image.Syntax:<input type=”image” id=”id_of_field” name=”name_of_field”src=”url_to_image_file” />  36-image-button
 File Field Allows the user to send a file as an attachment along with other data in the form.Syntax:<input type=”file” id=”id_of_field” name=”name_of_field”size=”display_size_of_field” />  37-file-field
Submit and Reset These UI elements provide control mechanisms for submitting the data in the form to the handler and for resetting the controls in the form.Syntax (Submit button):<input type=”submit” id=”id_of_field” name=”name_of_field” [value=”text_for_button”] />Syntax (Reset button):

<input type=”reset” id=”id_of_field” name=”name_of_field” [value=”text_for_button”] />

 38-submit-and-reset
 Fieldset Used as a container for grouping related form elements.Example:<fieldset><p>Gender: <br /><input type=”radio” id=”gender” value=”male” /> Male <br><input type=”radio” id=”gender” value=”female” /> Female</p>

</fieldset>

 39-fieldset
 Legend Provides a caption for the fieldset.Example:<fieldset><p><legend> Gender </legend></p>

<input type=”radio” name=”gender” value=”male”/ > Male <br /><input type=”radio” name=”gender” value=”female” /> Female</p>

</fieldset>

 40-legend
Suryateja Pericherla

Suryateja Pericherla

Hello, I am Suryateja Pericherla working as an Asst. Professor in CSE department at Vishnu Institute of Technology. I write articles to share my knowledge and make people knowledgeable regarding certain topics.
Suryateja Pericherla

Latest posts by Suryateja Pericherla (see all)

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Scroll Up
Thank you for visiting startertutorials.com! If you like this website do share with your friends by clicking on the social icons available on the left hand side.

As the domain name is quite large to remember, use this short domain to visit this site. Short domain: stuts.me