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.

Example

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.

Example

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

Try </>

type=email

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

Example

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

Try </>

type=password

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

Example

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

Try </>

type=radio

radio keyword represents that it is a radio button.

Example

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

Try </>

type=checkbox

checkbox represents the checkbox buttons.

Example

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

Try </>

type=color

It represents the RGB color.

Example

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.

Example

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.

Example

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.

Example

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


Try </>

type=url

URL value indicates the absolute URL in an input field.

Example

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

Try </>

type=number

It describes that the data consists of numerical value.

Example

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.

Example

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.

Example

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.

Example

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

Try </>


Was this article helpful?

 

Email:

Message: