<input> Attributes

The <input> element supports many attributes that control its behavior and improve the user experience. These attributes let you restrict, customize, or prefill the fields.

name

The 'name' attribute specifies the key under which the field's value will be submitted. The backend also uses this name to access the data.

value

The 'value' attribute pre-fills the field with a default value. If omitted, the field starts empty.

placeholder

The 'placeholder' displays helper text inside the field until the user starts typing. It's a visual guide, not a real value.

required

The 'required' attribute marks the field as mandatory. The browser won’t allow the form to be submitted unless the field is filled.

readonly

With 'readonly', the field’s value can’t be modified by the user, but it will still be submitted with the form.

disabled

Fields with the 'disabled' attribute are completely inactive. They can’t be interacted with and are not included in the form submission.

maxlength

The 'maxlength' attribute limits how many characters can be entered. Useful when your database has fixed-length fields.

pattern

The 'pattern' attribute uses a regular expression to define the allowed format. It enables pattern-based validation.

autocomplete

The 'autocomplete' attribute lets the browser suggest values based on previously entered data. It can be 'on' or 'off'.

autofocus

The 'autofocus' attribute automatically sets the focus on the specified input field when the page loads. It should only be used on one field per page.