Introduction

The input element represents a typed data field, which allows the user to add some data.

In the input tag with the help of type attribute define the type of data inserted into the field.

Types of <input>

checkbox

A check box allowing single values to be selected/deselected.

<input type="checkbox">

radio

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

<input type="radio">

text

A single-line text field.

<input type="text">

search

A single-line text field for entering search strings.

<input type="search">

url

A field for entering a URL.

<input type="url">

password

A field for entering secure details.

<input type="password">

tel

A field for entering a phone number.

<input type="tel">

number

A field for entering a number.

<input type="number">

hidden

Used to hide the input field.

<input type="hidden">

date

A field for selecting a date.

<input type="date">

week

A field for selecting week.

<input type="week">

month

A field for selecting the month.

<input type="month">

time

A field for selecting time.

<input type="time">

datetime-local

A field for selecting date and time.

<input type="datetime-local">

file

A field for selecting single or multiple files.

<input type="file">

range

A field for selecting between a range.

<input type="range" min="0" max="100" value="70" step="10" >

image

<input type="image" src="https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white">

color

<input type="color value="#f6b543">

button

A button without any default behaviour

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