HTML Form Elements

HTML form elements are used to store user input. There are different types of
form elements such as the text box, check box, drop-down, submit button, etc.
For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<input type="submit" value="Submit">
</form>

Browser Output

Here, <input> and <label> are all HTML Form Elements.

 HTML Form Elements
There are various HTML form elements for various input types. The form
elements available in HTML5 are as follows:

 HTML <input> tag

 HTML <label> tag
 HTML <button> tag
 HTML <select> , <option> and <optgroup> tags
 HTML <textarea> tag
 HTML <fieldset> tag
 HTML <legend> tag
 HTML <datalist> tag
 HTML <output> tag

HTML <input> tag

The HTML <input> tag defines the field where the user can enter data. For
example,

<input type="text" name="firstname">

Browser Output
 Here,

 type - determines the type of input the <input> tag takes

 name - specifies the name of the input
To learn more about the HTML input tag and its types, visit HTML Input Tag.

HTML <label> tag

The HTML label tag is used to create a caption for a form element. The text
inside the <label> tag is shown to the user.

<label for="firstname">First Name</label>

<input type="text" name="firstname" id="firstname">

Browser Output
The for attribute is used to associate a label with the form element. The value
for the for attribute is set as the id of the form element which is firstname in
the above example.
HTML Label is mainly used for accessibility as screen-readers read out the
label associated with the field and it also improves user experience as clicking
on the label also focuses on the input field.

This is also greatly helpful in small screens as it makes it easier to perform

actions like focusing on input, selecting a checkbox, selecting a radio box, etc.

HTML <button> tag

The HTML <button> element is an interactive element that is activated by a
user with a mouse, keyboard, finger, voice command, or other assistive
technology.
It performs a programmable action, such as submitting a form or opening a
dialog when clicked. For example,

<button type="button">Click me</button>

Browser Output
The type attribute determines the action performed by clicking the button. It
has 3 possible values:
 submit
If the value of type is submit , the button click action submits the form. For
example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="submit">Submit</button>
</form>

Browser Output

 reset
If the value of type is reset , the button click action resets the value of all form
elements to their initial value. For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="reset">Reset</button>
</form>
Browser Output (before reset)

AD

Browser Output (after reset)

 button
If the value of type is button , the button click action does not have a default
function. Generally, javascript is used to add functionality to such buttons. For
example,

<button type="button">Click me</button>

Browser Output
HTML <select>, <option> and <optgroup> tags
The HTML <select> tag is used to create a menu of options. Each of the
options is represented by the <option> tag. For example,

<label for="pets">Pets:</label>
<select id="pets">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>

Browser Output

Browser Output
Additionally, we can also group option elements inside the <optgroup> tag to
create a group of options. For example,

<label for="pets">Pets:</label>
<select id="pets">
<optgroup label="Mammals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</optgroup>
<optgroup label="Insects">
<option value="spider">Spider</option>
<option value="ants">Ants</option>
</optgroup>
<optgroup label="Fish">
<option value="goldfish">Goldfish</option>
</optgroup>
</select>

Browser Output
HTML <textarea> tag
The HTML <textarea> tag is used to define a customizable multiline text input
field. For example,

<textarea rows="10" cols="30"> Type something…</textarea>

Browser Output
Here, the rows and cols attributes represent the rows and columns of the text
field.

HTML <fieldset> tag

The HTML <fieldset> tag is used to group similar form elements. It is a
presentational tag and does not affect the data in the form. For example,

<form >
<fieldset>
<label for="firstname">First name:</label><br>
<input type="text" id="firstname" name="fname"><br>
<label for="lastname">Last name:</label><br>
<input type="text" id="lastname" name="lname"><br>
</fieldset>
</form>

Browser Output
Here, the border is from the <fieldset> element.

HTML <legend> tag

The HTML <legend> tag is another presentational tag used to give a caption to
a <fieldset> element. It acts similarly to an HTML <label> tag. For example,

<form>
<fieldset>
<legend>Name</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
</fieldset>
</form>

Browser Output
HTML <datalist> tag
The <datalist> tag defines a list of pre-defined options for
an <input> element. It is used to provide autocomplete options to the form
elements that show up as recommended options when the user fills in the
form. For example,

<label for="country-choice">Choose a country:</label>

<input list="country-options" id="country-choice" name="country-choice">
<datalist id="country-options">
<option value="Australia">
<option value="Austria">
<option value="America">
<option value="Nepal">
</datalist>

Browser Output
Here, when the user types au , the browser suggests options with the letters to
the user as a recommendation.

HTML <output> tag

The HTML < output > tag is a container element that is used to store the output
of a calculation usually performed using javascript. For example,

<form>
<input type="number" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b"></output>
</form>
<script>
const output = [Link]("result")[0]
const inputA = [Link]('a')
const inputB = [Link]('b')
[Link] = Number([Link]) + Number([Link])
</script>

Browser Output
The for attribute of the <output> tag accepts a space-separated value of all
the inputs used in the calculation. You can notice we have used a b inside
the for . This is to denote that the output inside the <output> tag was
generated using inputs a and b .
The value inside the <output> is generally generated from Javascript and filled
inside the element. Here, we have calculated the sum of both inputs and
inserted it inside the <output> element.

HTML Input Tag

The HTML <input> tag defines the field where the user can enter data. The type
attribute determines what type of user input is taken.

<input type="text" name="firstname">

Browser Output
 Here,

 type - determines the type of input the <input> tag takes

 name - specifies the name of the input which is what the data is named as when
submitting the data to a server.

Different Input Types

The various types of input tags available in HTML5 are:

1. text - creates a single-line text fields (default)

2. button - creates a button with no default functionality
3. checkbox - creates a checkbox
4. color - creates a color picker
5. date - creates a date picker
6. datetime-local - creates a date and time picker
7. email - creates an input field that allows the user to input a valid email address
8. file - creates an input field that lets the user upload a file or multiple files
9. hidden - creates an invisible input field
[Link] - creates a button using an image
[Link] - creates an input field that lets the user enter month and year
[Link] - creates an input field that lets the user enter information securely
[Link] - creates a radio button
[Link] - creates a range picker from which the user can select the value
[Link] - creates the button which clears all the form values to their default value
[Link] - allows user to enter their search queries in the text fields
[Link] - allows user to submit form to the server
[Link] - defines the field to enter a telephone number
[Link] - creates an input field that accepts time value
[Link] - lets the user enter and edit a URL
[Link] - lets the user pick a week and a year from a calendar

1. Input Type text

The input type text is used to create single-line text fields. It is the default input type.

<label for="name">Search: </label>

<input type="text" id="name">

Browser Output

The input type text can also contain minlength , maxlength , and size attributes. For
example,
<label for="name">Name</label>
<input type="text" id="name" minlength="4" maxlength="8">

Browser Output

In the above example, values are only allowed between the length of 4 to 8 characters.

Note: If the type attribute is not provided, the tag becomes the type of text.

2. Input Type button

The input type button is used to create a button with no default functionality. For
example,

<input type="button" value="Click Me!">

Browser Output
The text inside the value attribute is displayed in the button.

Note: Generally, javascript is used to add functionality to such buttons.

3. Input Type checkbox

The input type checkbox is used to create a checkbox input. For example,

<input type="checkbox" id="subscribe" value="subscribe">

<label for="subscribe">Subscribe to newsletter!</label><br>

Browser Output (checkbox unselected)

The checkbox can be toggled between selected and not selected.

Browser Output (checkbox selected)

The value of the checkbox is included in the form data only if the checkbox is selected
and is omitted if the checkbox is not selected.

4. Input Type color

The input type color is used to create an input field that lets the user pick a color. For
example,

<input type="color" id="background">

<label for="background">Background Color</label>

Browser Output (before expanding)

Browser Output (after expanding)

The color picker is inbuilt into the browser. Users can also manually enter the hex
code of the color instead. The UI for the color picker differs from browser to browser.

5. Input Type date

The input type date is used to create an input field that lets the user input a date using
the date picker interface from the browser. For example,

<label for="birthday">Birthday:</label>
<input type="date" id="birthday">
Browser Output (before expanding)

Browser Output (after expanding)

6. Input Type datetime-local
The input type datetime-local is used to create an input field that lets the user pick a
date and time using a date-time-picker from the browser. The time selected from the
input does not include information about the timezone. For example,

<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time" >

Browser Output (before expanding)

Browser Output (after expanding)

7. Input Type email
The input type email is used to create an input field that allows the user to input a
valid email address.

<label for="email">Enter your email:</label>

<input type="email" id="email">
Browser Output

This input field throws an error if the value provided is not a valid email. For
example,

Browser Output

8. Input Type file

The input type file is used to create an input field that lets the user upload a file or
multiple files from their device. For example,

<input type="file" name="file">

Browser Output
9. Input Type hidden
The input type hidden is used to create an invisible input field. This is used to supply
additional value to the server from the form that cannot be seen or modified by the
user. For example,

<input type="hidden" name="id" value="123" >

10. Input Type image

The input type image is used to create a button using an image.

<input type="image" src="/[Link]" alt="submit" >

Browser Output
Let's see an example of how we can use it in a form.

<form>
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last name: </label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="image" src="/[Link]" alt="submit" >
</form>

Browser Output

11. Input Type month

The input type month is used to create an input field that lets the user enter month and
year using a visual interface from the browser. For example,

<label for="start">Select Month:</label>

<input type="month" id="start" >

Browser Output (before expanding)

Browser Output (after expanding)

12. Input Type password
The input type password is used to create an input field that lets the user enter
information securely. For example,

<label for="password">Password:</label>
<input type="password" id="password">

Browser Output

The browser displays all the characters the user types using an asterisk (*).

13. Input Type radio

The input type radio is used to define a radio button. Radio buttons are defined in a
group. Radio buttons let users pick one option out of a group of options.

<form>
<input type="radio" id="cat" name="animal" value="cat">
<label for="cat">cat</label>
<input type="radio" id="dog" name="animal" value="dog">
<label for="dog">dog</label>
</form>

Browser Output
From the above example, we can see that all the radio buttons share the
same name attribute. It allows the user to select exactly one option from the group of
radio buttons.
When submitting the form data, the key for the input will be the name attribute, and
the value will be the radio button selected.

Note: The name attribute is used as the key for the data when submitting the form.

14. Input Type range

The input type range is used to create a range picker from which the user can select
the value. User can select a value from the range given. It has a default range
from 0 to 100. For example,

<label for="range">Select value: </label>

<input type="range" id="range" value="90">

Browser Output
15. Input Type reset
The input type reset defines the button which clears all the form values to their
default value. For example,

<form>
<label for="name">Name:</label>
<input id="name" type="text" /><br />
<input type="reset" value="Reset" />
</form>

Browser Output

Browser Output (after reset)

16. Input Type search
The input type search allows user to enter their search queries in the text fields. It is
similar to input type text. For example,

<label for="search">Search: </label><input type="search" id="search" >

Browser Output

Note: The search input does not work as a search unless we use some JavaScript to do
the search calculation.
17. Input Type submit
The input type submit is used when the user submits the form to the server. It is
rendered as a button. For example,

<input type="submit" value="submit">

Browser Output

Here, The text provided in the value attribute of the input is shown in the button.

18. Input Type tel

The input type tel is used to define the field to enter a telephone number. The
telephone number is not automatically validated to a particular format as telephone
formats differ across the world. It has an attribute named pattern used to validate the
entered value. For example,

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Browser Output

The pattern in the above example allows numbers in the format XXX-XX-XXX
where X is a number between 0 and 9.

19. Input Type time

The input type time attribute creates an input field that accepts time value. It allows
users to add time in hours, minutes, and seconds easily. For example,

<label for="time">Select Time:</label>

<input type="time" id="time">

Browser Output (before expanding)

Browser Output (after expanding)

20. Input Type url
The input type url is used to let the user enter and edit a URL. For example,

<label for="url">URL:</label>
<input type="url" id="url" placeholder="[Link]
pattern="[Link]

Browser Output
Here, placeholder is a hint that specifies the expected value of an input field, and
the pattern defines what type of value is accepted. The above pattern means that only
text beginning with https:// will be valid.

21. Input Type week

The input type week lets the user pick a week and a year from a calendar. For
example,

<label for="week">Week</label>
<input type="week" id="week" >

Browser Output