# Input Elements

# 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

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671682948243/syUXoXCuP.png align="center")

## 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.

```xml
<input type="checkbox">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671683338988/wKDhDemLs.png align="center")

## color

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

```xml
<input type="color">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671684408753/y9OOysBoY.png align="center")

## Date

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

```xml
<input type="date">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671803613091/0cd12202-f52b-4287-8b06-ad302835c5f5.png align="center")

## Datetime-local

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

```xml
<input type="datetime-local">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671803825521/12553c4c-71f9-4c2f-9e1a-5262b1961e55.png align="center")

## Email

A field for editing an email address.

```xml
<input type="email">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671804460430/03b71615-cf98-4988-bbb5-80e8fb61e179.png align="center")

## 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.

```xml
<input type="file">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806198026/d8064540-21cb-49a8-b44e-896e57fa008b.png align="center")

## Image

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

```xml
<input type="image">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806424034/8b3eb1b2-9aa7-42f8-8c67-d58165707ede.png align="center")

## Month

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

```xml
<input type="month">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806571074/764b63ae-8c02-45ce-8265-5df0dfd81144.png align="center")

## Number

Defines a field for entering a number.

```xml
<input type="number">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806621804/5965c91c-527a-4981-b4b5-75c5d5258f26.png align="center")

## Password

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

```xml
<input type="password">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806646507/0866be2e-b85f-4fe5-ba2c-10358167e5c3.png align="center")

## Radio

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

```xml
<input type="radio">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806750233/565e24bd-5a1a-4916-aae6-9f6c0082b388.png align="center")

## Range

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

```xml
<input type="range">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806831143/f4b61e13-864c-403c-b80b-47ebf61b507f.png align="center")

## Reset

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

```xml
<input type="reset">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671806955259/2899c48b-71be-4417-ae89-5f8d8669f199.png align="center")

## 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.

```xml
<input type="search">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807013422/bbafe9c9-4a5f-496b-b425-6ee253582e5a.png align="center")

## Submit

A button that submits the form.

```xml
<input type="submit">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671776484841/0a3e5748-2b0f-4c8c-9a37-ce59207baefb.png align="center")

## Tel

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

```xml
<input type="tel">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807066456/ed382fe6-bc2f-40ac-953d-dba58a1902b7.png align="center")

## 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

```xml
<input type="text">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807104969/492e1bdc-1fe0-4a49-bfba-593684584995.png align="center")

## Time

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

```xml
<input type="time">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807206422/563f6ba8-11d3-43e0-9697-759bc21eed41.png align="center")

## URL

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

```xml
<input type="url">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807335563/400a32ce-8bd3-4d60-b595-6a4afd57523c.png align="center")

## 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

```xml
<input type="week">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671807360305/6c24f6c3-28c5-43df-affd-822554dcb159.png align="center")