HTML Input Types - Learn HTML Form Input Type

HTML Input Types

The  HTML input type is used to control the web-based forms to accept data from the user.
Users can enter data using forms and these input types elements in HTML help to send data
to the server and makes it easier for the browser to understand that the data is valid or not.

There are so many input types in HTML like HTML input email, date, button, etc.. let’s see the
most common HTML input type attributes.

Common HTML form input types

• Text Field: It is used for one-line text input fields.
• Password: It is used for one-line Password input fields.
• Submit: Specifies a submit button to submit the form to the server.
• Reset: Reset all values in the form.
• Radio: Allows select one option.
• Checkbox: Allow selecting multiple options form.
• Button: A clickable button to perform Task.
• File: Defines to select the file from device storage.
• Image: Defines a graphical submit button. (form html upload file)

You can try all these examples on your PC, laptop or using an online HTML Editor.

Form Input Restrictions

• Disabled: disabled the input field.
• Max: maximum value for an input field.
• Maxlength: maximum number of characters for an input field.
• Min: minimum value for an input field.
• Pattern: the regular expression to check the input value against.
• Readonly: specifies that an input field is read-only that cannot be changed.
• Size: defines the width (in characters) of an input field.
• Value: specifies the default value for an input field.

HTML5 Input Types

HTML5 introduced 13 new input types attributes. Here is the list of all attributes.
HTML Input type email

The HTML input type email is used to create an input field for email addresses.

Syntax: <input type=”email”> 

HTML Number Fields

The HTML input type Number is used to create input fields to enter numbers only. If you try
to enter an alphabet or symbols then it will show errors.

Syntax: <input type=”number”>

HTML Search Fields

The HTML input type search is used to create a search box by using the placeholder attribute.

Syntax: <input type=”search”>

HTML URL Fields

The HTML input type URL is used to enter URLs of any web-based link.

Syntax: <input type=url>

HTML Telephone Number Fields

The HTML input type Telephone Number is used for phone numbers only.

Syntax: <input type="tel">

HTML Range Fields

The HTML input type Range is used to create a slider to select a value within a range of two
values. 

Syntax: <input type=type=”range” min=”0” max=”10”>

HTML Date Fields

The HTML input type Date is used to create an input area to enter the date.

Syntax: <input type=”date”>

HTML Month Fields

The HTML input type month is used to provide month options.

Syntax: <input type=”month”>

HTML Week Fields

The HTML input type week is used to provide week options.

Syntax: <input type=”week”>

HTML Time Fields

The HTML input type time is used to provide time options.

Syntax: <input type=”time”>

HTML Datetime-local Fields

The HTML input type Datetime-local is used to Enter Date and time together in a single input
field.

Syntax: <input type=”datetime-local”>

HTML Color Fields

The HTML input type color is used Enter Date and time together in a single input field.

Syntax: <input type=”color”>