Welcome to compeducational.com: CREATING FORM IN HTML

The HTML form is the interface of a web page that facilitates the user to enter data (such as name, email id, phone number etc.) that is to be sent to the server for further processing. There are various form elements that help to design a form through textbox, radio buttons, drop down menus, checkboxes, password, list, combo box etc. while writing codes.

Every form must begin with a <FORM> tag, which can be typed inside the body tag of HTML document. Syntax to create HTML form is as follows :

<HTML>

<HEAD>

<TITLE> Form Making</TITLE>

</HEAD>

<BODY>

<FORM>

Form elements

</FORM>

</BODY>

</HTML>

Form Element: In this section we will know about some form elements which are used to make a form.

Input Element:

Input Element is the main tag or element of form, used to make fields to input data from user. We can create different input fields to gather various kinds of information from a user.

Syntax to use <INPUT> tag is as follows:

The input tag has the following attributes :

TYPE : It specifies the type of form element such as text, radio etc.

NAME : It is the name given to form element. This attribute is used to uniquely identify the element in the form.

VALUE : It is used to specify the default value to the control element.

ALIGN : This attribute is used to align the attribute with respect to the form margins.

SIZE : This attribute specifies the horizontal size of the text box.

Adding a Text Box

A text box allows a user to enter data such as any character and number.

For example :

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM>

FIRST NAME :

LAST NAME :

</FORM>

</BODY>

</HTML>

Try it yourself editor


Code <HTML> <HEAD> <TITLE> Form </TITLE> </HEAD> <BODY> <FORM> FIRST NAME : <INPUT Type = "TEXT" Name = "EName1" Size = "30" Value = "Enter First Name"><br><br> LAST NAME : <INPUT Type = "TEXT" Name = "EName2" Size = "30" Value = "Enter Last Name"> </FORM> </BODY> </HTML>	Output

Adding a Radio Button : Radio buttons are used when the user has to make selection among multiple choices or options. It is generally used for selection of gender, Yes or No, True or False, etc. For example, for accepting the gender, the programmers need to specify two radio buttons "Male" and "Female", but not both. For example:

<INPUT Type = "Radio" Name = "Gender" Value = "Male" Checked> Male
<INPUT Type = "Radio" Name = "Gender" Value = "Female" > Female
Type = "Radio" indicates that the form element is radio button.

Name = "Gender" is the name of the radio button group.

Value = "Male" and Value = "Female" signifies that one radio button has value "Male and the other has the value "Female"

Checked attribute selects the specific radio button by default. Here "Male" radio button is checked by default.

Try it yourself editor

Output

Adding a Check Box : A check box is like a toggle switch where a user can select the desired choice by clicking on the check box.

Foe example :

<INPUT Type = "Checkbox" Name = "Hobbies" Value = "Reading" Checked> Reading.

Type = "Checkbox" indicates that the form element is Checkbox.

Name = "Hobbies" is the name of the checkbox group.

Value = "Reading" signifies that the checkbox is ticked.

Checked attribute selects the specific checkbox button by default.

Try it yourself editor

Output

Adding a Password Field : This is also a single line text input but it masks the character as soon as a user enters into it. The password is not visible to the user in password field control. For example:

password field isn't showing the characters entered

Combo Box : A combo box provides option to list down various options in the form of drop down list, from where a user can select desired option. <SELECT> Tag is used to start the combo box. It is a container tag. <OPTION> Tag is used to create the combo drop down list. It is an empty tag.

For example :

<OPTION>Option1

<OPTION>Option2

</SELECT>

Try it yourself editor

Code

Output

Now Assignment and Activity related to this topic

Q. Create an HTML Form give below:

Ans. Type the HTML coding in text editor as follows:

<! DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Form </TITLE>
</HEAD>
<BODY>
<H1 Align="Center"> <U> Application Form </U></H1>
<FONT SIZE = "5">
<FORM>
User ID :
<INPUT Type="TEXT" Name="EName3" Size="30" Value="Enter User ID"><br><br>
Password :
<INPUT Type = "Password" Name = "Salary" Size = "10"><br><br>
Gender :
<INPUT Type = "Radio" Name = "Gender" Value = "Male" Checked> Male
<INPUT Type = "Radio" Name = "Gender" Value = "Female" > Female <br><br>
Hobbies :<br>
<INPUT Type="Checkbox"Name="Hobbies" Value="Reading"Checked>Reading<br>
<INPUT Type="Checkbox"Name="Hobbies" Value="Reading">Travelling<br>
<INPUT Type="Checkbox"Name="Hobbies" Value="Reading">Playing Games<br>
<INPUT Type="Checkbox"Name="Hobbies" Value="Reading">Singing&Dancing<br>
Select Stream :
<SELECT NAME="List Name">
<OPTION>Science
<OPTION>Commerce
<OPTION>Humanities
</SELECT><br><br><br><br>
<INPUT Type="Submit" Name="Submit" Value="Submit">
</FORM>
</FONT>
</BODY>
</HTML>