OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES HTML
HTML - Input Attributes

HTML

BASIC

Introduction to HTML Getting Started Basic Structure HTML Syntax HTML Tags HTML Elements HTML Attributes HTML Formatting HTML Links HTML Quotation Element HTML Citation Element HTML Address Element HTML Abbreviation Element HTML Bi-Directional Element HTML Comments HTML Lists HTML Styles HTML Images HTML Favicon Basic Projects

INTERMEDIATE

HTML Meta Tag Attributes HTML Tables HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Form Examples HTML Inline Elements HTML Block Elements HTML Div HTML Id HTML Class HTML iFrame

ADVANCE

HTML Graphics HTML Multimedia HTML Video HTML Audio HTML Plugins HTML YouTube HTML Entities HTML Emojis HTML Layouts HTML Semantics HTML URL HTML Validation HTML Conclusion

HTML Input Attributes

PREVIOUS NEXT

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
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
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
tips
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
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.


PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT