Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating User Feedback HTML Form

In this article 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

<!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>

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

<!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>

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

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

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

	<form action="demo.asp" method="get">
 		<textarea rows="4" cols="50">
		A quick brown fox jumps right over a lazy dog. </textarea>	
   </form>
	

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

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

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

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

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

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
      

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

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

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

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

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

<form action="demo.asp" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form> 

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

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

This tag is supported in Firefox, Opera, Chrome and safari browsers.

Screenshots

Here we can see some form examples:

Form example 1

Figure 1: Form example 1

Form example 2

Figure 2: Form example 2

Conclusion:

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.


Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login