Table of Contents

HTML Form

The HTML <form> element is used to collect user input data.
For example, during the user registration you would like to collect information such as name, father name, mother name, date of birth email, address, credit card, etc.

syntax:-
<form>
.
form elements
.
</form>

There are different types of forms are used in HTML are.

Text Input Controls
Check boxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Clickable Buttons

Text Input Controls

There are three types of text input used on forms.

Single-line text input controls
Password input controls
Multi-line text input controls

Single-line text input controls

They are created using HTML <input> tag. Type attribute is text.

First Program in HTML

<!DOCTYPE html>
<html>
<body>
<h2>HTML Form Single-line text input controls/h2>
<form>
<label>Enter first name:</label>
<input type="text" name="firstname"><br><br>
<label>Enter last name:</label>
<input type="text" name="lastname">
</form>
</body>
</html>

Password input controls

They are also created using HTML <input> tag. Type attribute is password.

Example of Password input controls

<!DOCTYPE html>
<html>
<body>
<h2>Input "password" type:</h2>
<form>
<label>Enter User name</label><br>
<input type="text" name="firstname" ><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
</body>
</html>

Multi-line text input controls

Multi-line input controls are created using HTML <textarea> tag.

Example of Multi-line input controls

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>HTML Form Multi-line text input controls</h2>
<form>
Enter your address:<br>
<textarea rows="2" cols="20">
</textarea>
</form>
</body>
</html>

Checkbox Control

Check box controls are used when more than one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to checkbox.

Example of checkbox

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2> Checkboxes</h2>
<p>The input type="checkbox" defines a checkbox:</p>
<form>
Choose your favorite Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="singing" name="singing" value="singing"/>
<label for="singing">singing</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

Example of Radio Button Control

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Radio Button</h2>
<form>
<label for="gender">Gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male<br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="other"/>Other <br/>
</form>
</body>
</html>

Drop down box

A drop down box, also called Select Box Control which provides option to list down various options in the form of drop down list, from where a user can select one or more options.

Example of drop down box

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Drop Down Box</h2>
<form>
<label>Choose your Favorite courses</label>
<select>
<option>ADCA</option>
<option>DCA</option>
<option>DFA</option>
<option>'O'LEVEL</option>
<option>TALLY</option>
<option>BCA</option>
<option>CCC</option>
</select>
</form>
</body>
</html>

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box.
This is also created using the <input> element but type attribute is set to file.

Example of File Upload

<!DOCTYPE html>
<html>
<body>
<h2>File upload</h2>
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="newfile" name="newfile"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button.

Example of Submit Button Controls

<!DOCTYPE html>
<html>
<body>
<h2>Button Control</h2>
<h3>Input "submit" type:</h3>
<form>
<label >First name:</label>
<input type="text" id="name" name="name"><br><br>
<label >Last name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Example of Reset Button Controls

<!DOCTYPE html>
<html>
<body>
<h2>Button Control</h2>
<h3>Input "reset" type:</h3>
<form>
<label >First name:</label>
<input type="text" id="name" name="name"><br><br>
<label >Last name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="reset" value="Reset">
</form>
</body>
</html>

Example of Clear Button Controls

<!DOCTYPE html>
<html>
<body>
<h2>Button Control</h2>
<h3>Input "button" type:</h3>
<form>
<label >First name:</label>
<input type="text" id="name" name="name"><br><br>
<label >Last name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="button" value="Clear">
</form>
</body>
</html>