Input elements

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

The <input> element is the most important form element.

input types

An input varies depending on the values of its type attribute. The <input> tag specifies an input field where the user can enter data.

The <input> element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

button

A clickable button with no default behavior displaying the value of the value attribute, by default this button is empty

<input value="button" type="button">

checkbox

The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options from a limited number of choices.

<input type="checkbox">

color

A control for specifying a color; opening a color picker when active in supporting browsers.

<input type="color">

Date

A control for entering a date(year, month, and day, with no time).

<input type="date">

Datetime-local

Defines a date picker. The resulting value includes the year, month, day, and time.

<input type="datetime-local">

Email

A field for editing an email address.

<input type="email">

File

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

<input type="file">

Image

A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.

<input type="image">

Month

A control for entering a month and year, with no time zone.

<input type="month">

Number

Defines a field for entering a number.

<input type="number">

Password

A single-text field whose value is obscured. Will alert the user if the site is not secure.

<input type="password">

Radio

A radio button, allows a single value to be selected out of multiple choices with the same name value.

<input type="radio">

Range

Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.

<input type="range">

Reset

A button that resets the contents of the form to default values.

<input type="reset">

Search

A single-line text field for entering search strings. Line breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field.

<input type="search">

Submit

A button that submits the form.

<input type="submit">

Tel

A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.

<input type="tel">

Text

The default value. A single-text field. Line breaks are automatically removed from the input value. The default width of the text field is 20 characters

<input type="text">

Time

A control for entering a time value with no time zone.

<input type="time">

URL

A field for entering a URL. The input value is automatically validated before the form can be submitted.

<input type="url">

week

This, allows users to select a week and year. A date picker popup is visible whenever you will give a user input to the week input type

<input type="week">