HTML input type

<input> element defines an input field in a form. type attribute defines the type of data that the input field is to contain.

There are many values of type attribute. type attribute values play an important role in making the form.

Attribute values include text, number, password, email, tel, radio, checkbox etc.

type attribute values will be described one by one.

type=text

text value indicates that the data in the input field is plain text.

Candidate's name: <input type="text" name="name">
Father's name: <input type="text" name="fname">

Try </>

type=tel

tel value represents that the input field consists of telephone numbers.

Tel: <input type="tel" name="number">

Try </>

type=email

It indicates that the input field will contain email type data.

Email: <input type="email" name="email">

Try </>

type=password

password value represents that the data of input field consists of password.

Password: <input type="password" name="password">

Try </>

type=radio

radio keyword represents that it is a radio button.

<input type="radio" name="session">Morning

Try </>

type=checkbox

checkbox represents the checkbox buttons.

Which subject is liked most?
<input type="checkbox" name="subject">Physics

Try </>

type=color

It represents the RGB color.

You can choose any color?
Color:<input type="color" name="color">

Try </>

type=date

date value indicates that input field contains date (that consists of year, month, day) without data zone.

The date will be displayed in month,date and year.
Date:<input type="date" name="date">

Try </>

type=time

time value defines the time (hours, minutes, seconds) without time zone.

you will see the hours and minutes.
Time:<input type="time" name="time">

Try </>

type=search

search value represents a field where search queries are made.

Google: <input type="search" name="q">


Try </>

type=url

URL value indicates the absolute URL in an input field.

Enter URL:<input type="url" name="URL">

Try </>

type=number

It describes that the data consists of numerical value.

Enter Value:<input type="number" name="temperature">

Try </>

type=range

It indicates the range of numerical value. The min and max attributes can be used to specify the minimum and maximum values.

Range:<input type="range" name="range" >

Try </>

type=file

file value defines that the data consists of files to upload. These files may be images, media, HTML or CSS etc.

Upload File:<input type="file" name="uploaded-file" >

Try </>

type=submit

It represents a button that submits the data of the form to a specific address.

<input type="submit" name="login">

All the above example use the send button to submit the data.

type=reset

It resets the data that is already present in the input controls.

<input type="reset" name="reset">

Try </>