HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element
can be various types, which defines information field. Such as <input type="text" name="name"> gives a
text box.

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

HTML5 added new types on <input> element. Following is the list of types of elements of HTML5

type=" " Description

color Defines an input field with a specific color.

date Defines an input field for the selection of date.

datetime-local Defines an input field for entering a date without a time zone.

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

week Defines a field to enter the date with week-year, without time zone.

search Defines a single-line text field for entering a search string.

tel Defines an input field for entering the telephone number.

Following is the description about types of <input> element with examples.

1. <input type="text">:
Example:
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p><strong>Note:</strong>The default maximum cahracter lenght is
20.</p>
</form>

2. <input type="password">:
The <input> element of type "password" allow a user to enter the
password securely in a webpage. The entered text in password filed
converted into "*" or ".", so that it cannot be read by another user.

Example:
<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>
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit
the form to the server when the "click" event occurs.

Example:
<form action="https://www.javatpoint.com/html-tutorial">
<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>

4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user
performs a click event, it by default resets the all inputted values.

Example:
<form>
<label>User id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing
an option between a set of related options. At a time only one radio
button option can be selected at a time.

Example:
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
<input type="submit" value="submit">
</form>
6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can
be checked or unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an

important difference between both types: radio buttons allow the user to
select only one option at a time, whereas checkbox allows a user to
select zero to multiple options at a time.
Example:
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favourite sports</p>
<input type="checkbox" name="sport1"
value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3"
value="football">Football<br>
<input type="checkbox" name="sport4"
value="baseball">Baseball<br>
<input type="checkbox" name="sport5"
value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>
7. <input type="button">:
The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:
<form>
<input type="button" value="Clcik me " onclick="alert('you are
learning HTML')">
</form>

8. <input type="file">:
The <input> element with type "file" is used to select one or more files
from user device storage. Once you select the file, and after submission,
this file can be uploaded to the server with the help of JS code and file
API.

Example:
<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
9. <input type="image">:
The <input> type "image" is used to represent a submit button in the
form of image.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Input "image" type.</h2>
<p>We can create an image as submit button</p>
<form>
<label>User id:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="login.png" width="100px">
</form>

</body>
</html>
HTML5 newly added <input> types element

1. <input type="color">:
The <input> type "color" is used to define an input field which contains a colour. It allows a user to specify the colour by the
visual colour interface on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the default value is #000000 (black).
<form>
Pick your Favorite color: <br><br>
<input type="color" name="upclick" value="#a52a2a">
Upclick<br><br>
<input type="color" name="downclick" value="#f5f5dc"> Downclick
</form>

2. <input type="date">:

The <input> element of type "date" generates an input field, which

allows a user to input the date in a given format. A user can enter the
date by text field or by date picker interface.

Example:
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
3. <input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which
allow a user to select the date as well as local time in the hour and
minute without time zone information.

Example:
<form>
<label>
Select the meeting schedule: <br><br>
Select date & time: <input type="datetime-local"
name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>
4. <input type="email">:
The <input> type "email" creates an input filed which allow a user to
enter the e-mail address with pattern validation. The multiple attributes
allow a user to enter more than one email address.

Example:
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email
addresses separating by comma or whitespace as following: </p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>
5. <input type="month">:

The <input> type "month" creates an input field which allows a user to
easily enter month and year in the format of "MM, YYYY" where MM
defines month value, and YYYY defines the year value. New

Example:
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
6. <input type="number">:
The <input> element type number creates input filed which allows a user
to enter the numeric value. You can also restrict to enter a minimum and
maximum value using min and max attribute.

Example:
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
7. <input type="url">:
The <input> element of type "url" creates an input filed which enables
user to enter the URL.

Example:
<form>
<label>Enter your website URL: </label>
<input type="url" name="website"
placeholder="http://example.com"><br>
<input type="submit" value="send data">
</form>
8. <input type="week">:
The <input> type week creates an input field which allows a user to
select a week and year form the drop-down calendar without time zone.

Example:
<form>
<label><b>Select your best week of year:</b></label><br><br>
<input type="week" name="bestweek">
<input type="submit" value="Send data">
</form>
9. <input type="search">:
The <input> type "search" creates an input filed which allows a user to
enter a search string. These are functionally symmetrical to the text input
type, but may be styled differently.

Example:
<form>
<label>Search here:</label>
<input type="search" name="q">
<input type="submit" value="search">
</form
10. <input type="tel">:
The <input> element of type ?tel? creates an input filed to enter the
telephone number. The "tel" type does not have default validation such
as email, because telephone number pattern can vary worldwide.

Example:
<form>
<label><b>Enter your Telephone Number(in format of xxx-xxx-
xxxx):</b></label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-
9]{4}" required>
<input type="submit"><br><br>
</form>
HTML form Attribute
HTML <form> element attributes
In HTML there are various attributes available for <form> element which are given below:

HTML action attribute

The action attribute of <form> element defines the process to be performed on form when form is
submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc.
or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page.

Example:
<form action="action.html" method="post">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>

HTML method attribute

The method attribute defines the HTTP method which browser used to submit the form. The possible
values of method attribute can be:

post: We can use the post value of method attribute when we want to process the sensitive data as it does
not display the submitted data in URL.
Example:
<form action="action.html" method="post">

get: The get value of method attribute is default value while submitting the form. But this is not secure as
it displays data in URL after submitting the form.
Example:
<form action="action.html" method="get">

When submitting the data, it will display the entered data in the form of:
file:///D:/HTML/action.html?name=JavaTPoint&pass=123

HTML target attribute

The target attribute defines where to open the response after submitting the form. The following are the
keywords used with the target attribute.

_self: If we use _self as an attribute value, then the response will display in current page only.
Example:
<form action="action.html" method="get" target="_self">

_blank: If we use _blank as an attribute it will load the response in a new page.
Example:
<form action="action.html" method="get" target="_blank">

HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to
complete automatically. It can have two values "on" and "off" which enables autocomplete either ON or
OFF. The default value of autocomplete attribute is "on".

Example:
<form action="action.html" method="get" autocomplete="on">

Example:
<form action="action.html" method="get" autocomplete="off">
Note: it can be used with <form> element and <input> element both.
HTML enctype attribute
The HTML enctype attribute defines the encoding type of form-content while submitting the form to the
server. The possible values of enctype can be:

application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is not included in

the form. All characters are encoded before submitting the form.
Example:
<form action="action.html" method="post" enctype="application/x-www-form-
urlencoded" >

multipart/form-data: It does not encode any character. It is used when our form contains file-upload
controls.
Example:
<form action="action.html" method="post" enctype="multipart/form-data">

text/plain (HTML5): In this encoding type only space are encoded into + symbol and no any other special
character encoded.
Example:
<form action="action.html" method="post" enctype="text/plain" >

HTML novalidate attribute HTML5

The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this attribute in form
then it does not perform any type of validation and submit the form.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Fill the form</h2>
<form action = "action.html" method = "get" novalidate>
Enter name:<br><input type="name" name="name"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
<p><b>Try to change the form detials with novalidate atttribute and without novalidate attribute and see
the difference.</b></p>
</body>
</html>

HTML <input> element attribute

HTML name attribute

The HTML name attribute defines the name of an input element. The name and value attribute are
included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP request includes
both name-value pair and if name is not available it will not process that input field.

Example:
<form action = "action.html" method = "get">
Enter name:<br><input type="name" name="uname"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email"><br>
<input type="submit" value="Submit">
</form>
HTML value attribute
The HTML value attribute defines the initial value or default value of an input field.

Example:
<form>
<label>Enter your Name</label><br>
<input type="text" name="uname" value="Enter Name"><br><br>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" value="Enter email"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
</form>

HTML required attribute HTML5

HTML required is a Boolean attribute which specifies that user must fill that filed before submitting the
form.

Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>

HTML autofocus attribute HTML5

The autofocus is a Boolean attribute which enables a field automatically focused when a webpage loads.

Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" autofocus><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>

HTML placeholder attribute HTML5

The placeholder attribute specifies a text within an input field which informs the user about the expected
input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.
Example:
<form>
<label>Enter your name</label><br>
<input type="text" name="uname" placeholder="Your name"><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="[email protected]"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>

HTML disabled attribute

The HTML disabled attribute when applied then it disable that input field. The disabled field does not
allow the user to interact with that field.

The disabled input filed does not receive click events, and these input value will not be sent to the server
when submitting the form.

Example:
<!DOCTYPE html>
<html>
<body>
<h3>Registration form</h3>
<form>
<label>Enter User name</label><br>
<input type="text" name="uname" value="USER" disabled><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="[email protected]"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>

</body>
</html>

HTML size attribute

The size attribute controls the size of the input field in typed characters.

Example:
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<label>Account number</label><br>
<input type="text" name="an" size="30" required><br><br>
<label>CVV</label><br>
<input type="text" name="cvv" size="1" required><br><br>
HTML form attribute
HTML form attribute allows a user to specify an input filed outside the form but remains the part of the
parent form.

Example:
User email: <br><input type="email" name="email" form="fcontrol" required><br>
<input type="submit" form="fcontrol">