HTML Input Attributes

Content

  1. value
  2. readonly
  3. disabled
  4. size
  5. maxlength
RightArrow

Input Types (HTML5)

 RightArrow

Input Attributes (HTML5)

value Attribute

The value attribute specifies the initial value for an input field.

HTML Code:

<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>

Result:

First name:

Last name:

readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed).

HTML Code:

<form action=""> First name:<br> <input type="text" name="firstname" value ="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>

Result:

First name:

Last name:

disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form.

HTML Code:

<form action=""> First name:<br> <input type="text" name="firstname" value ="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>

Result:

First name:

Last name:

size Attribute

The size attribute specifies the size (in characters) for the input field.

HTML Code:

<form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>

Result:

First name:

Last name:

maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field.

With a maxlength attribute, the input field will not accept more than the allowed number of characters.

The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must be checked by the receiver (the server) as well!

HTML Code:

<form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>

Result:

First name:

Last name:

HTML Index

References

  1. W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.