What is HTML Input Element

HTML < input > Element is an input control which is used to create web-based form in order to accept data from the user. generally input element is used within the < form > Tag.

Syntax : -

< input type="value"  name=" " .............   >

Example :-

Some Attributes of Input Element: -

• type :- It specify the type of input element.
• value :- It specify the value of input element.
• name:- It specify the name of input element.
• height: It specify the height of an input element (only for type=”image”)
• width: It specify the width of an input element (only for type=”image”)
• required: It specify that an input field must be filled out before submitting the form.
• disabled: It specify that the element should be disabled. The disabled attribute can be set to keep a user from using the < input > element until some other condition has been met.

Input Types

< input > works varies according to the value of its type attribute.

Button

< input > type button is used to create push button in form(web-page).

Example: -

text

It used to create single-line text field. Example:-

email

It is used to create input fields that should contain an e-mail address.

Example: -

number

It is used to create numeric type input field. We can also set restrictions on what numbers are accepted.

Example:-

password

It is used to create password field in form, where user can enter password securely.

Example:-

radio buttons

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

Example :-

checkbox

It used to create check box in form. checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example: -

color

It is used to create color input filed which let user to select color, using visual color picker interface .

Example:-

date

It is used to create date input filed which let the user to enter date in form(web-page).

Example:-

time

It used to create time input filed which let user to enter time (hours and minutes, and optionally seconds).

Example:-

datetime-local

It used to create input field that let the user to enter both date and time, including the year, month, day as well as the time in hours and minutes.

Example:-

file

It is used to create file type input field which let user to select files from their devices.

Example:-

We can also restrict the file type using accept=" " attribute

range

it is used to create range input field, using range input type user can create numeric range between min and max number.

Example:-

hidden

It is used to defines a hidden input field (not visible to a user). A hidden field lets developers include data that cannot be seen or modified by users when a form is submitted.

Example:-

image

Image input type is used to create graphical submit buttons.

Example:-

  <label for="name">Name</label>
  <input type="text" id="name" name="name">
</div>

<input type="image" id="image" alt="Login"
       src="./myfoldeer/img01.png">

Output:-

Submit

submit input type is rendered as a button which used to create submit button.

Example:-

reset

reset input type rendered as button and it is used for resets all inputs in the form to their initial values.

Example:-