HTML Feedback
Overview: In this document we will talk about HTML Forms and their usage. HTML forms are an essential part of modern web site development irrespective of any technology.
Introduction:
An HTML form on a web page enables a user to provide inputs to an application. The data entered by the user is then sent to the server for further processing or storing in the database. A sample html form is given as under:
Listing 1: Sample HTML Form
[Code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> Sample HTML </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
</head>
<body>
<form name=”input” action=”html_form_action.jsp” method=”get”>
Username: <input type=”text” name=”user”><br>
Password: <input type=”password” name=”pwd”><br>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female<br>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car <br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
[/Code]
The above code produces a basic HTML form having the following fields:
- Text field for providing Username.
- Password field to provide Password.
- Radio button to provide the sex either male or female.
- Check box to indicate the type of vehicle the user owns.
Attributes in HTML form:
HTML form has the following attributes which are most commonly used:
- Method: This can have value either of the two values : ‘get’ or ‘post’. ‘post’ is used when we need to submit some information which needs to be stored in a persistent data storage. ‘get’ is used when we need to retrieve some information based on the input value which is submitted.
- Name: This is used to provide a name to the individual form and is required when we need to access individual components of a form.
- Action: This attribute contains the name of the file which operates on the fields entered by the user. It also holds the functions, hidden fields definitions which are required to perform a task.
Gathering and submitting the form data:
Let us consider the following code snippet
Listing 2: Sample HTML form code snippet
[Code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> Example 2 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
</head>
<body>
<form method=’post’>
NAME: <input type=’text’ name=’name’ id=’name’ /><br />
Email: <input type=’text’ name=’email’ id=’email’ /><br />
Website: <input type=’text’ name=’website’ id=’website’ /><br />
Comment:<br />
<textarea name=’comment’ id=’comment’ /></textarea><br />
<input type=’hidden’ name=’articleid’ id=’articleid’ value='<? echo $_GET[“id”]; ?>’ />
<input type=’submit’ value=’Submit’ />
</form>
</body>
</html>
[/Code]
The above html code snippet is a simple user information form that a user needs to fill out and hit the submit button. Once the submit button is hit by the user, the form gathers all the data and sends it to another script for further processing. Depending upon the business requirement the form can either send the data to some other page for further processing or process the data and produce some output to the user. When the data is passed to a script for processing we use either ‘get’ or ‘post’ method.
HTML Form tags:
HTML form has the following tags used commonly:
- form : used to define an HTML form for user input. The following snippet shows how can we use it :
Listing 3 : Use of html form
[Code]
<form action=”demo.asp” method=”get”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
</form>
[/Code]
This tag is supported in almost all the browsers.
- input: used to define an input control. Sample code listed in listing 3 can be a good example. This tag is supported in almost all the browsers.
- textarea: used to define a multiline text input. The following snippet shows how can we use it :
Listing 4: Use of html form textarea
[Code]
<form action=”demo.asp” method=”get”>
<textarea rows=”4″ cols=”50″>
A quick brown fox jumps right over a lazy dog. </textarea>
</form>
[/Code]
This tag is supported in almost all the browsers.
- label : used to define a label for an input element. The following snippet shows how can we use it :
Listing 5: Use of html form – label
[Code]
<form action=”demo.asp”>
<label for=”male”>Male</label>
<input type=”radio” name=”sex” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”sex” id=”female” value=”female”><br>
<input type=”submit” value=”Submit”>
</form>
[/Code]
This tag is supported in almost all the browsers.
- fieldset : used to group similar information together. The following snippet shows how can we use it :
Listing 6: Use of html form – fieldset
[Code]
<form>
<fieldset>
<legend>Personal Information </legend>
Name: <input type=”text” size=”30″><br>
Email: <input type=”text” size=”30″><br>
Date of birth: <input type=”text” size=”10″>
</fieldset>
</form>
[/Code]
This tag is supported in almost all the browsers.
- legend: used to define the caption of the filedset element. Code snippet given in listing 6 is an example of how to use it. This tag is supported in almost all the browsers.
- select: used to create a drop down list. The following snippet shows how can we use it
Listing 7: Use of html form – select
[Code]
<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</select>
[/Code]
This tag is supported in almost all the browsers.
- optgroup : used to define a group of related options in a dropdown list. The following snippet shows how can we use it :
Listing 8: Use of html form optgroup
[Code]
<select>
<optgroup label=”Swedish Cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
</optgroup>
<optgroup label=”German Cars”>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</optgroup>
<optgroup label=”Japanese Cars”>
<option value=”honda”>Honda</option>
<option value=”hundai”>Hundai</option>
<option value=”suzuki”>Suzuki</option>
</optgroup>
</select>
[/Code]
This tag is supported in almost all the browsers.
- option : used to define an option in a dropdown list. Code snippet given in listing 7 and listing 8 are a good example of how to use it. This tag is supported in almost all the browsers.
- button : used to define a clickable button. The submit button in listing 1 or listing 2 is a good example of its usage. This tag is supported in almost all the browsers.
- datalist : used to specify a list of pre-defined options for input controls. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 9: Use of html form – datalist
[Code]
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
[/Code]
This tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. This is not supported in Internet Explorer 9 or earlier version or on safari browsers.
- keygen : used to define a key-value pair. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 10: Use of html form keygen
[Code]
<form action=”demo.asp” method=”get”>
Username: <input type=”text” name=”usr_name”>
Encryption: <keygen name=”security”>
<input type=”submit”>
</form>
[/Code]
This tag is supported in Firefox, Opera, Chrome and safari browsers.
- output: used to define the output of a calculation. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 11: Use of html form keygen
[Code]
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” id=”a” value=”50″>100
+<input type=”number” id=”b” value=”50″>
=<output name=”x” for=”a b”></output>
</form>
[/Code]
This tag is supported in Firefox, Opera, Chrome and safari browsers.
Summary:
Let us summarize our discussion in the following bullets as under –
- HTML form is used to provide input to an application.
- HTML form has the following attributes –
- method.
- action.
- name.
- HTML form has the following tags –
- form.
- input.
- textarea.
- label.
- fieldset.
- legend.
- select.
- optgroup.
- option.
- button.
- datalist.
- keygen.
- output.
