HOME HTML 5 CSS 3 JAVASCRIPT MySQL PHP Python Pure CSS WordPress MS AD* Linux* Blog Howto Tools Online Editor »
Home » HTML » HTML Input Type

HTML Input Types

The HTML input types element is used to create interactive controls for web-based forms to accept data from the user. Data can be entered by the user in various forms, like in alphabets, in digits or a combination of both like an email. These different kind of HTML input type elements in HTML defines the type of data a user would enter in the input field. It makes easier for the browser to understand what data is valid to be entered in a particular field and what is not.

The different types of HTML input type are specified by its ‘type’ attribute, each input type has a different ‘type’ attribute value associated with it. Let’s see the common values of ‘type’ attribute:

HTML Input Type

Here is a list of some common HTML Form input types.

Type Description
text It defines a one-line text input field.
password Defines a one-line password input field.
submit It specifies a submit button to submit the form to server.
reset The reset button reset all values in the form.
radio A Radio button allows select one option.
checkbox Checkboxes allow selecting multiple options form.
button Defines a clickable button, which can perform a task on an event.
file It defines to select the file from device storage.
image It Defines a graphical submit button.

HTML Input Type Text

The <input type="text"> defines a single line text input field. By default a field text can take 20 Characters.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Text Attribute Examples
First name: Last name:

HTML Input Type Password

The <input type="password"> defines a password field. It will show bullets in place of actual characters during input.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">
User password:
<input type="password" name="psw">
</form>
</body>
</html>

Output

HTML Form Input Type Password Attributes
User name: User password:

HTML Input Type Submit

The <input type="submit"> defines a Submit button that submit form data to a form-handler. The form-handler is a type of server page with a script for processing form input data and It is specified in the form's action attribute

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output

HTML Form Input Type Submit Button Attribute
First name: Last name:

HTML Input Type Reset

The <input type="reset"> defines a Reset button.
If you want to change the input values then click the "Reset" button, the form data will be reset to the default values.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

Output

HTML Form Input Type Reset Button Examples
First name: Last name:

HTML Input Type Radio

The <input type="radio"> defines a Radio button. It is used where only one option out of many has to be selected. The name attribute in all the buttons should have the same value, then only a distinct value will get selected. The Radio buttons let a user select ONLY ONE of a limited number of choices.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Radio Button </title>
</head>
<body>
<form action="action-page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Radio Button Attribute
Male
Female
Other

HTML Input Type Checkbox

The <input type="checkbox"> defines a checkbox. It can be used to select multiple options at a time.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Checkbox </title>
</head>
<body>
<form action="action-page.php">
<input type="checkbox" name="vehicle1" value="Bike">Samsung
<input type="checkbox" name="vehicle2" value="Car">Google Pixel>
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Checkbox
Samsung Google Pixel

HTML Input Type Button

The <input type="button"> defines a button.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Button </title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>

Output

HTML Form Input Type Button Attribute

HTML Input Type Number

The <input type="number"> defines a numeric input field. The number attribute set restrictions on what numbers are accepted. You can set the min or max number.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Number </title>
</head>
<body>
<form action="action-page.php">
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Number Attribute
Quantity (between 1 and 10):

HTML Form Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5).

Attribute
New
 Description
disabled It specifies to disabled the input field.
max
It specifies maximum value for an input field.
maxlength It specifies the maximum number of character for an input field.
min
It specifies the minimum value for an input field.
pattern
It specifies a regular expression to check the input value against.
readonly It specifies that an input field is read only that cannot be changed.
required
It specifies that an input field is require.
size It specifies the width (in characters) of an input field.
step
It specifies the legal number intervals for an input field.
value It specifies the default value for an input field.

HTML5 Input Types

The HTML5 introduced 13 diferent "types" attributes. Let’s see the different values of ‘type’ attribute:

Email Fields

The value "email" is used for creating an input field for email address. This HTML input type is specifically used to validate the email address entered by the user. It uses the standard email address format and the user violates it then it shows error. Syntax: <input type=email>

Number Fields

The value "number" will create an input field to enter only numbers, if you enter alphabets or symbols or anything other than numbers, it will show an error, however decimal points numbers are allowed. Syntax:<input type=number>

Search Fields

It is used to create a search box. You can even add placeholder in the search box by using the ‘placeholder’ attribute. Syntax: <input type="search">

URL Fields

Specifically used to enter a URL. Syntax: <input type="url">

Number Fields

This HTML input type provides controls to enter numbers. It has small buttons on the right side to increase or decrease the value of the number. In your smartphones this input type automatically opens the numeric keyboard during entering the data. Syntax:<input type="number">

Telephone Number Fields

It is a special HTML input type field to enter phone numbers only. Syntax:<input type="tel">

Range Fields

It creates a slider to select a value in within a range of two values. Syntax: <input type="range" min="0" max="10">

Date Fields

This type is used to create an input area to enter date. You can manually enter the date or can select value from a graphical calendar. Syntax:<input type="date">

Month Fields

It only provide options of Month and year. Syntax:<input type="month">

Week Fields

Allows you to pick the week and year. Syntax:<input type="week">

Time Fields

Allows you to enter time of the day. It can be entered manually or by the help of a digital clock format. Syntax:<input type="time">

Datetime-local Fields

Enter Date and time together in a single input field. Syntax:<input type="datetime-local">

Color Fields

If you want to enter any RGB color information on the database then use this input type. Syntax:<input type="color">

Recommended :
1 .  Creating a Footer in HTML
2 .  Html Paragraph Tag
3 .  Use of Quotation in HTML
4 .  HTML Unorder List
5 .  how to embed YouTube video in HTML
6 .  HTML Meta Tag use for SEO purpose
7 .  BootStrap 4 Photography Snippets
8 .  Create Simple Login Form




Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors





Follow Us: