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:




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>


 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”] />

 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>


 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>



Related Links:

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

Your email address will not be published. Required fields are marked *

Scroll Up