HTML Input Attributes

In this tutorial, I am going to be showing you the different input attributes you can use in forms. I will be dividing it into four (4) sections:

Type (Controls)
Restrictions
Other Attributes
Form Attributes

Type (Controls)

The type attribute is used inside the <input> element. It takes the following values:

TEXT

<input type="text"> - This is used to define a single line text input field.

TRY IT OUT YOURSELF

PASSWORD

<input type="password"> - This is used to define single line password input field. The password input field does not display the characters while typing.

TRY IT OUT YOURSELF

NUMBER

<input type="password"> - This is used to define single line number input field for only numbers to be entered.

TRY IT OUT YOURSELF

EMAIL

<input type="email"> - This is used to define single line email input field that validates email address.

TRY IT OUT YOURSELF

CHECKBOX

<input type="checkbox"> - This is used to define checkbox, which are used to select multiple options.

TRY IT OUT YOURSELF

RADIO

<input type="radio"> - This is used to define radio input, which allows you to select one option from multiple options.

TRY IT OUT YOURSELF

NOTE:

The difference between Checkbox and Radio:
Checkbox - You can select multiple options
Radio - You can only select one option.
Checkbox - name attribute has different values for all.
Radio - name attribute has one value for all

SUMBIT

<input type="submit"> - This is used to define submit button that sends form data.

TRY IT OUT YOURSELF

BUTTON

<input type="button"> - This is used to define a push button that can be used to perform different functions.

TRY IT OUT YOURSELF

DATE

<input type="date"> - This is used to define the date input. It displays the calendar when clicked on.

TRY IT OUT YOURSELF

TIME

<input type="time"> - This is used to define the time input. It displays digital time when clicked on.

TRY IT OUT YOURSELF

DATETIME-LOCAL

<input type="datetime-local"> - This is used to define the time and time input. It displays calendar and digital time when clicked on.

TRY IT OUT YOURSELF

WEEK

<input type="week"> - This is used to define the week input field.

TRY IT OUT YOURSELF

MONTH

<input type="month"> - This is used to define the month input field.

TRY IT OUT YOURSELF

COLOR

<input type="color"> - This is used to define input field that should contain color. It displays a color picker when clicked on.

TRY IT OUT YOURSELF

FILE

<input type="file"> - This is used to define input field which enables you to upload files (pictures, documents, etc).

TRY IT OUT YOURSELF

IMAGE

<input type="image"> - This is used for image submission.

TRY IT OUT YOURSELF

HIDDEN

<input type="hidden"> - This is used to define input field that will not be visible to the user. It is mostly used when web developers don't want users to modify the input value.

TRY IT OUT YOURSELF

RANGE

<input type="range"> - This is used to define a control (slider) for entering a number. The default range is from 0 to 100, but you can set restrictions on what numbers are accepted with the min, max, and step attributes.

TRY IT OUT YOURSELF

RESET

<input type="reset"> - This is used to define a button that resets all input values to their default values.

TRY IT OUT YOURSELF

SEARCH

<input type="search"> - This is used to define a search field input.

TRY IT OUT YOURSELF

TEL

<input type="tel"> - This is used to define input field for entering telephone number.

TRY IT OUT YOURSELF

URL

<input type="url"> - This is used to define input field for URL address. It also validates it.

TRY IT OUT YOURSELF

TYPES	DESCRIPTION
text	Used to define a single line text input field.
password	Used to define single line password input field.
number	Used to define single line number input field for only numbers to be entered.
email	Used to define single line email input field that validates email address.
checkbox	Used to define checkbox.
radio	Used to define radio input.
submit	Used to define submit button that sends form data.
button	Used to define a push button that can be used to perform different functions.
date	Used to define the date input.
time	Used to define the time input.
datetime-local	Used to define the time and time input.
week	Used to define the week input field.
month	Used to define the month input field.
color	Used to define input field that should contain color.
file	Used to define input field which enables you to upload files.
image	Used for image submission.
hidden	Used to define input field that will not be visible to the user.
range	Used to define a control (slider) for entering a number.
reset	Used to define a button that resets all input values
search	Used to define a search field input.
tel	Used to define input field for entering telephone number.
url	Used to define input field for URL address.

Restrictions

In this section, I will be showing you the different input restrictions and how they work.

CHECKED

This attribute is used to pre-select a radio or checkbox input field.

TRY IT OUT YOURSELF

DISABLED

This attribute is used to disable an input field.

TRY IT OUT YOURSELF

MAXLENGTH

This attribute is used to specify the maximum number of characters an input field can take.

TRY IT OUT YOURSELF

MIN

This attribute is used to specify the minimum number of character an input field should have before submission. It works mostly on the number type input field.

TRY IT OUT YOURSELF

MAX

This attribute is used to specify the maximum number of character an input field should have before submission. It works mostly on the number type input field.

TRY IT OUT YOURSELF

TIP:

You can use both min and max in one input field to control allow users enter characters within that range.

PATTERN

This attribute is used to specify the regular expression checking the input value to match a set character.

TRY IT OUT YOURSELF

READONLY

This attribute is used to set an input field to readonly. This input field cannot be edited.

TRY IT OUT YOURSELF

REQUIRED

This attribute is used to specify that an input field must contain values below submission.

TRY IT OUT YOURSELF

SIZE

This attribute is used to specify the width in characters of an input field.

TRY IT OUT YOURSELF

STEP

This attribute is used to set the legal number of intervals of an input field.

TRY IT OUT YOURSELF

VALUE

This attribute is used to set default value for an input field.

TRY IT OUT YOURSELF

ATTRIBUTES	DESCRIPTION
checked	Used to pre-select a radio or checkbox input field.
disabled	Used to disable an input field.
maxlength	Used to specify the maximum number of characters.
min	Used to specify the minimum number of characters.
max	Used to specify the maximum number of characters.
pattern	Used to specify the regular expression.
readonly	Used to set an input field to readonly.
required	Used to specify that an input field must contain values.
size	Used to specify the width in characters of an input field.
step	Used to set the legal number of intervals of an input field.
value	Used to set default value for an input field.

Other Attributes

In this section, let's look at other attributes that always come in handy.

MULTIPLE

This attribute is used to used to allow users to enter more than one value in an input field. It works with email, file and select input types

TRY IT OUT YOURSELF

PLACEHOLDER

This attribute is used to set a hint of what should be entered in the input field (It is usually a short text).

TRY IT OUT YOURSELF

AUTOFOCUS

This attribute is used to set an input field to focus when the page loads up.

TRY IT OUT YOURSELF

HEIGHT AND WIDTH

These attributes are used to set height and width of the image type input field.

TRY IT OUT YOURSELF

LIST

This attribute reference to the <datalist> element that has pre-defined input values.

TRY IT OUT YOURSELF

AUTOCOMPLETE

This attribute is used to suggest input values based on previous inputs that has been entered before. It takes two values: ON or OFF.

TRY IT OUT YOURSELF

NOTE:

Autocomplete works with the <form> element and the following input types: text, search, url, tel, email, password, date pickers, range, and color

ATTRIBUTES	DESCRIPTION
multiple	Used to used to allow users to enter more than one value in an input field.
placeholder	Used to set a hint of what should be entered in the input field.
autofocus	Used to set an input field to focus when the page loads up.
height	Used to set height of the image type input field.
width	Used to set width of the image type input field.
list	Reference to the <datalist> element that has pre-defined input values.
autocomplete	Used to suggest input values based on previous inputs that has been entered before.

Form Attributes

In this section, I will be showing you form attributes that you can use inside the <input> element.

FORMACTION

This attribute is used to set the URL of the file that will process an input when the form is submitted. It overrides the action attribute in that <form> element

TRY IT OUT YOURSELF

FORMENCTYPE

This attribute is used to set how an input data should be encoded; It overrides the enctype attribute in the <form> element. Also, the enctype can only be used when the method attribute is set to POST.

FORMMETHOD

This attribute is used to specify the HTTP method when submitting user data. It overrides the method attribute in the <form> element. It works with only the submit and image input types. The two types of form methods are: GET and POST.

TRY IT OUT YOURSELF

FORMTARGET

This attribute is used to set where the form response will be displayed. It overrides the target attribute in the <form> element. It works with only the submit and image input types. It takes any of these four (4) values:

_blank - display in a new window
_self - display in the same window.
_parent - display in the parent window.
_top - display in the full body of the window.
frame name - display in a specified iframe.

TRY IT OUT YOURSELF

FORMNOVALIDATE

This attribute is a Boolean attribute that is used to specify that the input data should not be validated before submission. It overrides the novalidate attribute in the <form> element. It works with only the submit input type.

TRY IT OUT YOURSELF

ATTRIBUTES	DESCRIPTION
formaction	Used to set the URL of the file that will process an input when the form is submitted.
formenctype	Used to set how an input data should be encoded;
formmethod	Used to specify the HTTP method when submitting user data.
formtarget	Used to set where the form response will be displayed.
formnovalidate	A Boolean attribute that is used to specify that the input data should not be validated before submission.

HTML

BASIC

INTERMEDIATE

ADVANCE

HTML Input Attributes

Type (Controls)

TEXT

PASSWORD

NUMBER

EMAIL

CHECKBOX

RADIO

SUMBIT

BUTTON

DATE

TIME

DATETIME-LOCAL

WEEK

MONTH

COLOR

FILE

IMAGE

HIDDEN

RANGE

RESET

SEARCH

TEL

URL

Restrictions

CHECKED

DISABLED

MAXLENGTH

MIN

MAX

PATTERN

READONLY

REQUIRED

SIZE

STEP

VALUE

Other Attributes

MULTIPLE

PLACEHOLDER

AUTOFOCUS

HEIGHT AND WIDTH

LIST

AUTOCOMPLETE

Form Attributes

FORMACTION

FORMENCTYPE

FORMMETHOD

FORMTARGET

FORMNOVALIDATE

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT