HTML Input Attributes

Input Attributes are used to give more information about HTML form inputs.

The type Attribute

The type attribute defines the type of input field to be used.
This attribute can have values like text, password, hidden, checkbox, radio, submit, button, and so on.

Example

<form action"landing_page.html">
<input type="text" />
</form>

This provides a text input field.

When the type attribute is not defined, a text field is also displayed by default.
  Do It Yourself

The value Attribute

The value attribute defines the value of an input field.

Example

<form action"landing_page.html">
<input type="text" value="Hello Lyty!" />
</form>

Do It Yourself

Tip: Try change Hello Lyty! to another word and click on 'Run' to see results.

The size Attribute

The size attribute defines the character size of the input field.

Example

<form action"landing_page.html">
<input type="text" value="Erisan" size="6" />
<input type="text" value="Olasheni" size="8" />
</form>

  Do It Yourself

The readonly Attribute

The readonly attribute defines whether an input field should be readonly (cannot be edited).

Example

<form action"landing_page.html">
<input type="text" value="Input 1" readonly="readonly" />
</form>

  Do It Yourself

The maxlength Attribute

The maxlength attribute defines the maximum length of characters allowed in the input field.

Example

<form action"landing_page.html">
<input type="text" maxlength="30" />
</form>

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to define input fields with different type attributes.
  • You should be able to define the maximum length of characters in an input field.
  • You should be able to tell briefly what Input Attributes are.