HTML Form Tag with Example

: Written by: Pavani

The HTML <form> tag is used for creating a form for user input.

Syntax :

<form>
form content goes here...
</form>

A Form can contain textfields, checkboxes, radio-buttons and more. Text field creates a single line text.

input name="name" type="text" id="name"

Here, type is a text that means it takes input in the form of text.

HTML FORM TAG EXAMPLE:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Example</title>
</head>

<body bgcolor="#CCFF66">
<form align="center">

<h3 style="color:#F00">Personal Details</h3>
Name:
<input type="text" name="name" id="name"><br><br>
Password:
<input type="password" name="password" id="password"><br><br>

E-mail id: <input type="text" name="name" id="name"><br><br>
Gender: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Male
<input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Female<br><br>
Contact#: <input type="text" name="mobile" id="mobile">

<h3 style="color:#F00">Educational Qualification</h3>

Degree: <select name="degree" id="degree">
        <option selected>-- Select Group --</option>
        <option>B.Com</option>
        <option>B.sc</option>
        <option>B.com Computers</option>
        <option>B.A</option>
      </select><br>
      <br>
Engineering: <select name="eng" id="eng">
        <option selected>-- Select Group --</option>
        <option>CSE</option>
        <option>ECE</option>
        <option>CIVIL</option>
        <option>EEE</option>
      </select><br><br>
Hobbies: <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1">Playing chess
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup2">Reading Books<br><br>
<h3 style="color:#F00">Address</h3>
<textarea name="textarea" cols="35" rows="5" id="textarea"></textarea><br>
<br>
Attch Resume: <input type="file" name="fileField" id="fileField"><br><br>

<input type="image" src="/images/submit_btn.png">
</form>
</body>
</html>

For Password field the input text is rendered in such a way as to hide the characters (E.g: A series of asterisks). To hide the characters by asterisks means we need to use input type="password".

Radio Buttons are used to choose any one option from given choices, that is specified in the above example as gender. The name should be same for the both Male and Female. But id is a Unique, so it should be specified with the different name.

Drop down menu will allows the user to choose one value from a list.

select element defines a drop down list. option element defines the options to select. Check-box allow users to select several values. Hobbies in the above example represented with check-boxes.

OUTPUT:

form

Note: Submit button image should be in images folder under your current current HTML working folder.