Input Element in HTML

Input Element in HTML

What is Input Element

The HTML element is used to accept data from the user this tag is used in < form> to declare input controls and allow users to input data. The Input tag is an empty element that only contains attributes.The element is one of the best elements in HTML there are so many types of input elements.

Some input attributes.

There are so many input attributes but some of the most imp which we use most of the time. ex :

  • type: This attribute is used to specify the type of the input element and Its default value is text.

  • value: The value attribute is used for the value of the input element.

  • alt: we use the alt attribute for providing alternate text for the user if they are not able to view the image.

  • placeholder: This attribute is used to specify a hint that describes the expected value of an input field.

  • name: This is used to specify the name of the input element.

    Types of input element

    button

    A push button with no default behavior and empty by default.

 <input type="button" >

Output image.png

checkbox

checkbox is rendered by default as boxes that are checked (ticked)

<input type="checkbox"  >

Output

image.png

week

entering a date consisting of a week-year

<input type="week"  >

Output

image.png

text

A single-line text field. Line-breaks are automatically removed.

<input type="text"  >

Output

image.png

color

A control for specifying a color;

<input type="color"  >

Output

image.png

date

This is for entering a date (year, month, and day, with no time).

<input type="date"  >

Output

image.png

email

In this box we can enter an email that looks like a text box but we can't submit without an email id.

<input type="email"  >

Output image.png

datetime-local

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

<input type="datetime-local"  >

Output

image.png

file

the user can submit file here.

<input type="file"  >

Output

image.png

hidden

this is not displayed what ever you have given the value is hidden.

<input type="hidden">

Output

image.png

image

Displays an image defined by the src attribute. alt attribute displays if the image src is missing.

<input type="Image">

Output

image.png

month

A control for entering a month and year.

<input type="month">

Output

image.png

password

here user can set his password.

<input type="passward">

Output

image.png

range

Displays as a range widget defaulting to the middle value.

<input type="range">

Output

image.png

reset

A rest button by using it user can reset his information.

###

<input type="reset">

Output

image.png

Search is designed for the user to search his query on it.

<input type="search">

Output

image.png

submit

A button that submits the form.
<input type="submit">

Output

image.png

URL

it looks like a text but browser will support only URL in this input element .

<input type="url">

Output image.png