Forms

Introduction

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

Suryateja Pericherla

Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.

He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.

He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.