Introduction to HTML Forms
Introduction to HTML Forms
HTML Form
HTML Form is a document that stores information of a user on a web server using interactive
controls. An HTML form contains different kinds of information such as username, password, contact
number, email id, etc.
Although forms could simply be used to display information, HTML provides them in order to supply
a way for the user to interact with a Web server. The most widely used method to process the data
submitted through a form is to send it to server-side software typically written in a scripting
language, although any programming language can be used.
2. The user reads the Web page and interacts with the form it contains.
3. Submitting the form sends the form data to the server for processing.
5. The CGI software may use database information or store data in a server-side database.
6. The CGI software may generate a new Web page for the server to return to the user.
7. The user reads the new Web document and may interact with it.
The elements used in an HTML form are the check box, input box, radio buttons, submit buttons, etc.
Using these elements the information of a user is submitted on a web server.
<html>
<body>
<form>
Username:<br>
1
<input type="text" name="username">
<br>
Email id:<br>
<br><br>
</form>
</body>
</html>
Output in a browser:
The text field is a one-line input field allowing the user to input text. Text Field input controls are
created using the “input” element with a type attribute having the value as “text”.
<html>
<body>
2
<h3>Example Of Text Field</h3>
<form>
</form>
</body>
</html>
Output:
<html>
<body>
<form>
<label for="Age">Age:</label><br>
</form>
</body>
</html>
Output:
3
• Password Field in HTML Forms :
Password fields are a type of text field in which the text entered is masked using asterisks or dots for
the prevention of user identity from another person who is looking at the screen. Password Field
input controls are created using the “input” element with a type attribute having the value as
“password”.
<html>
<body>
<form>
<label for="user-password">Password:
</label><br>
id="user-password">
</form>
</body>
</html>
Output in a browser:
4
• Radio Buttons in HTML Form :
Radio Buttons are used to let the user select exactly one option from a list of predefined options.
Radio Button input controls are created using the “input” element with a type attribute having the
value as “radio”
<html>
<body>
<form>
SELECT GENDER
<br>
<label for="male">Male</label><br>
<label for="female">Female</label>
</form>
</body>
</html>
Output in a browser:
5
• Checkboxes in HTML Form :
Checkboxes are used to let the user select one or more options from a pre-defined set of options.
Checkbox input controls are created using the “input” element with a type attribute having the value
as “checkbox”.
<html>
<body>
<form>
<b>SELECT SUBJECTS</b>
<br>
<label for="maths">Maths</label>
<label for="science">Science</label>
<label for="english">English</label>
</form>
</body>
</html>
Output in a browser:
6
File select boxes are used to allow the user to select a local file and send it as an attachment to the
web server. It is similar to a text box with a button that allows the user to browse for a file. Instead
of browsing for the file, the path and the name of the file can also be written. File select boxes are
created using the “input” element with a type attribute having the value as “file”.
<html>
<body>
<form>
<label for="fileselect">Upload:</label>
</form>
</body>
</html>
Output in a browser:
Text Area is a multiple-line text input control that allows the user to provide a description or text in
multiple lines. A Text Area input control is created using the “textarea” element.
<html>
<body>
<form>
<label for="Description">Description:</label>
7
id="Description"></textarea>
</form>
</body>
</html>
Output in a browser:
Select boxes are used to allow users to select one or more than one option from a pull-down list of
options. Select boxes are created using two elements which are “select” and “option”. List items are
defined within the select element.
<html>
<body>
<form>
<label for="country">Country:</label>
<option value="India">India</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
8
</html>
Output :
The action to be performed after the submission of the form is decided by the action attribute.
Generally, the form data is sent to a webpage on the web server after the user clicks on the submit
button.
Example :
<html>
<body>
<label for="username">Username:</label>
</form>
</body>
</html>
9
If you click the submit button, the form data
The Target attribute is used to specify whether the submitted result will open in the current window,
a new tab or on a new frame. The default value used is “self” which results in the form submission in
the same window. For making the form result open in a new browser tab, the value should be set to
“blank”.
<html>
<body>
Username:<br>
<br>
Password:<br>
<br><br>
</form>
</body>
</html>
The name attribute is required for each input field. If the name attribute is not specified in an input
field then the data of that field would not be sent at all.
10
<html>
<body>
Username:<br>
<input type="text">
<br>
Password:<br>
<br><br>
</form>
</body>
</html>
In the above code, after clicking the submit button, the form data will
be sent to a page called /test.php. The data sent would not include the
It is used to specify the HTTP method used to send data while submitting the form. There are two
kinds of HTTP Methods, which are GET and POST.
<html>
<body>
11
<form action="/test.php" target="_blank" method="GET">
Username:<br>
<br>
Password:<br>
<br><br>
</form>
</body>
</html>
In the GET method, after the submission of the form, the form values
<html>
<body>
Username:<br>
<br>
Password:<br>
12
<br><br>
</form>
</body>
</html>
In the post method, after the submission of the form, the form values
will not be visible in the address bar of the new browser tab as it was
13