Types of input forms

Introduction to HTML input

In HTML we use input tags to collect user inputs. Input tags are one of the most powerful tags in HTML considering their combinations of input types and attributes.

Input tag attributes

  1. placeholder

  2. value

  3. readonly

  4. Disabled

  5. name

  6. size

  7. maxlength

  8. autofocus

  9. min

  10. max

  11. multiple

  12. type

Placeholder

To provide some hint on what must be entered in the input box we use an input tag with the placeholder attribute. Placeholder value is displayed only when the input tag is not holding any value. As soon as the user starts entering data, the placeholder disappears.

Value

It defines the initial value and later can be changed by the user.

Readonly

On having the readonly attribute the users cannot change the value of the input field but can have a look at the value for information or review purposes.

Disabled

The disabled attribute is used to specify to the users that the input tag or field is no longer accepting changes in its value and the value is displayed just for review or information purposes.

name

The name attribute specifies the name of an <input> element. We use the name attribute as a reference to collect data from an input field when the form is submitted. It's a mandatory attribute for a form to work.

size

The size attribute specifies the visible area/width of the input field.

autofocus

The autofocus attribute specifies that an <input> element should automatically get focused when the page loads.

min

The min attribute specifies the minimum value the input field should contain.

max

The max attribute specifies the maximum value the input field will accept.

multiple

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element. This attribute works only with input type file and email.