Page 1 of 15
Home Whiteboard Online Compilers Practice Articles Tools
HTML - Form Controls
HTML form controls (elements) are the elements used within the <form> element to
collect the user information.
Form Controls (Elements)
The form elements create controls for the user interaction within the webpage; these
elements are also termed as form controls. The form elements enable users to enter
information for the server-side processing. The nature of interaction with the server can
vary depending on the type of control used while creating the form. For example, radio
buttons are typically used to accept gender information.
We have used several common form controls in previous discussions; we will now dive
into a more detailed exploration of these elements.
There are different types of form controls that we can use to collect data using HTML
form:
Text Input Controls
Checkboxes Control
Radio Buttons Control
Select Box Control
File Select Box
Button Control
Hidden Form Control
Datetime Controls
Date Control
Month Control
Week Control
Time Control
[Link] 1/15
Page 2 of 15
Number Control
Range Control
Email Control
URL Control
Let us look at these controls one by one −
Text Input Controls
The text input controls are further divided into three main categories −
Single-line Text Input Control
Password Input Control
Multi-line Text Input Control
Single-line Text Input Control
The single-line text input control is used for items that require only one line of user
input, such as search boxes or names. They are created using the <input> tag.
Example
The following example illustrates how to take a single-line text input:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br><br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
[Link] 2/15
Page 3 of 15
On running the above code, two single-line text input fields will be displayed.
Password Input Control
The password input control is also a single-line text input, but it masks the character
as soon as a user enters it. They are also created using the HTML <input> tag, but the
type attribute is set to password:
Example
In the following example, we will demonstrate how to take password input from users.
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br><br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
The above HTML code will display one text input field and one password input field.
Multiple-line Text Input Control
The multiple-line text input control is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using the
HTML <textarea> tag.
Example
The following example demonstrates how to use multi-line text input to take item
descriptions:
[Link] 3/15
Page 4 of 15
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
The above code will produce a text area where users can provide multiple lines of text.
Checkboxes Control
Checkboxes are used when more than one option is required to be selected. They are
also created using the <input> tag, but the type attribute is set to checkbox.
Example
In this HTML code, we are creating a form with two checkboxes:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
[Link] 4/15
Page 5 of 15
</body>
</html>
On executing the above code, it will create two checkboxes.
Radio Buttons Control
Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using the <input> tag, but the type attribute is set to
radio.
Example
In this example code, we are creating a form with two radio buttons:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
On running the above HTML code, it will produce two radio buttons.
Select Box Control
A select box provides features to list down various options in the form of drop-down
list, from where a user can select one or more options.
Example
The following HTML code illustrates how to create a form with a drop down box:
[Link] 5/15
Page 6 of 15
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
<option value = "Chemistry">Chemistry</option>
</select>
</form>
</body>
</html>
The above HTML code will create a dropdown menu with three values.
File Select Box
If we want to allow a user to upload a file to our website, we will need to use a file
upload box, also known as a file select box. This is also created using the <input>
element, but the type attribute is set to file.
Example
In the following example, we will create a form with one file upload box that accepts only
images:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
[Link] 6/15
Page 7 of 15
</form>
</body>
</html>
Button Control
There are various ways in HTML to create clickable buttons. We can create a clickable
button using the <input> tag by setting its type attribute to button.
Example
In this HTML code, we are creating a form with three different types of buttons:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/[Link]"
/>
</form>
</body>
</html>
Hidden Form Control
Thehidden form controls are used to hide data inside the page, which later on can be
pushed to the server. This control hides inside the code and does not appear on the
actual page. For example, the following hidden form is being used to keep the current
page number. When a user clicks next page, then the value of the hidden control will be
sent to the web server, and there it will decide which page will be displayed next based
on the passed current page.
[Link] 7/15
Page 8 of 15
Example
The following example shows the usage of hidden control:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Datetime Controls
In HTML, the datetime control represents date and time (year, month, day, hour,
minute, second, and fractions of a second) together, encoded according to ISO 8601 with
the time zone set to UTC. If we use the datetime-local, it will display date and time
with no time zone information.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Date and Time : <input type = "datetime" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
[Link] 8/15
Page 9 of 15
</body>
</html>
Date Control
The HTML date control is used to specify a date (year, month, day) encoded according
to ISO 8601.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Date : <input type = "date" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Month Control
In HTML, the month control is used to display a date consisting of only a year and a
month encoded according to ISO 8601.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Month : <input type = "month" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
[Link] 9/15
Page 10 of 15
</body>
</html>
Week Control
As the name suggests, the week control displays a date consisting of only a year and a
week number encoded according to ISO 8601.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Week : <input type = "week" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Time Control
The HTML time control specifies the hours, minutes, seconds, and fractional seconds
encoded according to ISO 8601.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Time : <input type = "time" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
[Link] 10/15
Page 11 of 15
</body>
</html>
Number Control
The number control accepts only numerical values. The step attribute specifies the
precision, and its default value is 1.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Select Number : <input type = "number" min = "0" max = "10" step "1"
value = "5" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Range Control
The range type is used for input fields that should contain a value from a range of
numbers.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Select Range : <input type = "range" min = "0" max = "10" step "1"
value = "5" name = "newinput" />
<input type = "submit" value = "submit" />
[Link] 11/15
Page 12 of 15
</form>
</body>
</html>
Email Control
The email control accepts only email value. This type is used for input fields that should
contain an e-mail address. If you try to submit a simple text, it forces you to enter only
an email address in email@[Link] format.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
Enter email : <input type = "email" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>
URL Control
The HTML URL control accepts only URL values. This type is used for input fields that
should contain a URL address. If you try to submit a simple text, it forces you to enter
only a URL address, either in the [Link] format or in the
[Link] format.
Example
<!DOCTYPE html>
<html>
<body>
<form action = "/cgi-bin/[Link]" method = "get">
[Link] 12/15
Page 13 of 15
Enter URL : <input type = "url" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>
TOP TUTORIALS
Python Tutorial
Java Tutorial
C++ Tutorial
C Programming Tutorial
C# Tutorial
PHP Tutorial
R Tutorial
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
SQL Tutorial
TRENDING TECHNOLOGIES
Cloud Computing Tutorial
Amazon Web Services Tutorial
Microsoft Azure Tutorial
Git Tutorial
Ethical Hacking Tutorial
Docker Tutorial
Kubernetes Tutorial
DSA Tutorial
Spring Boot Tutorial
SDLC Tutorial
Unix Tutorial
CERTIFICATIONS
Business Analytics Certification
[Link] 13/15
Page 14 of 15
Java & Spring Boot Advanced Certification
Data Science Advanced Certification
Cloud Computing And DevOps
Advanced Certification In Business Analytics
Artificial Intelligence And Machine Learning
DevOps Certification
Game Development Certification
Front-End Developer Certification
AWS Certification Training
Python Programming Certification
COMPILERS & EDITORS
Online Java Compiler
Online Python Compiler
Online Go Compiler
Online C Compiler
Online C++ Compiler
Online C# Compiler
Online PHP Compiler
Online MATLAB Compiler
Online Bash Terminal
Online SQL Compiler
Online Html Editor
ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |
PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S
[Link] 14/15
Page 15 of 15
Tutorials Point is a leading Ed Tech company striving to provide the best learning material on
technical and non-technical subjects.
© Copyright 2025. All Rights Reserved.
[Link] 15/15