Lesson 19 – HTML Forms

Html forms can let you store information from the site visitors. For example, you may want to collect information regarding his name, email and address etc. This information collected is then passed on to back end application for further processing. We use html <form> tag to create forms on a web page.

There are different input elements of a html form:-

  • Text fields,
  • Radio buttons,
  • Drop down menu
  • Check box
  • File upload
  • Submit button

Let’s learn how to create a html form using input elements.

Html input element

Html input <input> element lets you collect information in variety of different ways.  e.g.

TypeDescription
<input type = “text”>Will display text input field
<input type = “radio”>Will display radio button field
<input type = “submit”>Will display submit button
<input type = “checkbox”>Will display checkbox button
<input type = “file”>Will display file upload button
  • Text input element:

As the name indicate, text input element lets you display a text field in a form. There are three different types of text element.

(i) Single line text input element

(ii) Password input element

(iii) Multi line text input element

(i) Single line text input:- We use single line text input element when information required is 1 -2 sentences long. let’s see the below example:

<!DOCTYPE html>
<html>
<head>
<title>Single line text input element</title>
</head>
<body>
<form >
First name:  <input type=”text” name=”firstname” />
<br>
Last name:  <input type=”text” name=”lastname” />
</form>
</body>
</html>

The result displayed will be as follows:

Single line text input element
First name:
Last name:

We can use following attributes for single line text input element:

AttributeDescription
typeType attribute indicate the field element to be used e.g. text field or radio button
nameName attribute is used to indicate value for  backend processing
sizeSize attribute is used to specify maximum width of box
maxlengthMaxlength attribute is used to specify maximum number of character a user can enter into the field

 

(ii) Password input element: We use password input element to store information in a  password protected manner. Text entered is masked as soon as it is entered in to the box. You just have to set attribute type = “password” to display this field.  Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Password input element</title>
</head>
<body>
<form >
Username:  <input type=”text” name=”username” />
<br>
Password:  <input type=”password” name=”password” />
</form>
</body>
</html>

The result displayed will be as follows:

Password input element
Username:
Password:

We can use following attributes for password input element:

AttributeDescription
typeType attribute indicate the field element to be used e.g. text field or radio button
nameName attribute is used to indicate value for  backend processing
sizeSize attribute is used to specify maximum width of box
maxlengthMaxlength attribute is used to specify maximum number of character a user can enter into the field

 

(iii) Multi line text input: We use multi line text input element when information required from user is 2 -3 lines long. Html tag <textarea> is used insert multi line text input field. Lets learn with following example how:

<!DOCTYPE html>
<html>
<head>
<title>Multiple Line text Input element</title>
</head>
<body>
<form>
Text box : <br />
<textarea rows=”6″ cols=”45″ name=”description”>
Type your text here…
</textarea>
</form>
</body>
</html>

The result will be displayed as:

Multiple Line text Input element
Text box :

We can use following attributes for multi line text input element:

AttributeDescription
nameName attribute is used to indicate value for  backend processing
rowspecify the number of rows to be used for text box
colspecify the number of columns to be used for text box

 

  • Radio input element:

We make use of radio buttons when out of many options user is required to select only one option. Let’s learn with following example how to create a radio button.

<!DOCTYPE html>
<html>
<head>
<title>Radio button element</title>
</head>
<body>
<form>
<input type=”radio” name=”Gender” value=”Male”> Male
<input type=”radio” name=”Gender” value=”Female”> Female
</form>
</body>
</html>

The result will be displayed as:

Radio button element
Male Female

We can make use of following attributes for radio input element:

AttributeDescription
typeType attribute indicate the field element to be used e.g. checked button or radio button
nameName attribute is used to indicate value for  backend processing
valueValue to be used when box is selected

 

  • Checkbox input element:

We make use of checkbox input element when user is given an option to choose from multiple options. Here attribute is set to checkbox. Lets see the example:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox input element</title>
</head>
<body>
<form>
<input type=”checkbox” name=”Colors” value=”on”> Orange
<input type=”checkbox” name=”Colors” value=”on”> Pink
</form>
</body>
</html>

The result will be displayed as:

Checkbox input element
Orange Pink

We can make use of following attributes for radio input element:

AttributeDescription
typeType attribute indicate the field element to be used e.g. checked button or radio button
nameName attribute is used to indicate value for  backend processing
valueValue to be used when box is selected

 

  • Drop down input element:

As the name indicate, drop down input element can be used to list down your options. User is given an option to choose one out of them. Let’s see this with following example:

<!DOCTYPE html>
<html>
<head>
<title>Drop down input element</title>
</head>
<body>
<form>
<select name=”dropdown”>
<option value=”White” selected>White</option>
<option value=”Black”>Black</option>
<option value=”Pink”>Pink</option>
</select>
</form>
</body>
</html>

The result will be displayed as:

Drop down input element

We can make use of following attributes for drop down input element:

AttributeDescription
nameName attribute is used to indicate value for  backend processing
sizeSize attribute is used to specify maximum width of box
multipleMultiple attributes lets you choose multiple options

 

  • File upload input element:

File upload box is used to upload document files to your server. This can also be created using <input> element where attribute is set as File. Let’s learn with following example how:

<!DOCTYPE html>
<html>
<head>
<title>File Upload  example</title>
</head>
<body>
<form>
<input type=”file” name=”Browse” accept=”.doc” />
</form>
</body>
</html>

The result will be displayed as:

File Upload example

We can make use of following attributes for file upload input element:

AttributeDescription
nameName attribute is used to indicate value for  backend processing
acceptAccept attribute defines which type of file to be accepted

 

Chapter Summery:

  • Use html <form> tag to create html forms.
  • Use html <input type = “text”> tag to create text input box.
  • Use html <input type = “radio”> tag to create radio button.
  • Use html <input type = “submit”> tag to create submit button.
  • Use html <input type = “checkbox”> tag to create to create checkbox button.
  • Use html <input type = “file”> tag to create file upload button.

 

Interview Question:

  • How can you create a html button which can act like a hyperlink?

We can create html hyperlink button in two ways:

Method 1: –

<FORM ACTION=”[Your link]” METHOD=get>
<INPUT TYPE=submit VALUE=”Here type your text you want on button”>
</FORM>

Method 2 :-

<INPUT TYPE=”submit” VALUE=” Link location”
ONCLICK=” http://www.freetutorialpoint.com/;” />

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title> Example</title>
</head>
<body>

</body>
</html>

In above html code:

  • Create a drop down list with ‘name  = fruits’ in form. Option to be included are Orange, Apple, Banana
  • Create a text box with name = Type here
  • Create a button with text click here.
  • Create a input text box up to 50 character limit.

Click here to practice above exercise in real time HTML code editor

Leave a Reply

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

− 5 = 3