HTML Input Attributes with Examples :- Infinity4Education
HTML Input Attributes
This
chapter describes the different attributes for the HTML <input> element.
The value Attribute
The
input value attribute specifies an initial value for an
input field:
Example
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The readonly
Attribute
The
input readonly attribute specifies that an input field is
read-only.
A
read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).
The
value of a read-only input field will be sent when submitting the form!
Example
A read-only input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The disabled
Attribute
The
input disabled attribute specifies that an input field
should be disabled.
A
disabled input field is unusable and un-clickable.
The
value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The size Attribute
The
input size attribute specifies the visible width, in
characters, of an input field.
The
default value for size is 20.
Note: The size attribute works with the following input
types: text, search, tel, url, email, and password.
Example
Set a width for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The maxlength
Attribute
The
input maxlength attribute specifies the maximum number of
characters allowed in an input field.
Note: When a maxlength is set, the input field will not
accept more than the specified number of characters. However, this attribute
does not provide any feedback. So, if you want to alert the user, you must
write JavaScript code.
Example
Set a maximum length for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The min and max
Attributes
The
input min and max attributes specify the minimum and maximum
values for an input field.
The min and max attributes work with the
following input types: number, range, date, datetime-local, month, time and
week.
Tip: Use the max and min attributes together to
create a range of legal values.
Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>>
The multiple
Attribute
The
input multiple attribute specifies that the user is allowed
to enter more than one value in an input field.
The multiple attribute works with the
following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
The pattern Attribute
The
input pattern attribute specifies a regular expression that
the input field's value is checked against, when the form is submitted.
The pattern attribute works with the
following input types: text, date, search, url, tel, email, and password.
Example
An input field that can contain only three letters
(no numbers or special characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
The placeholder
Attribute
The
input placeholder attribute specifies short a hint that
describes the expected value of an input field (a sample value or a short
description of the expected format).
The
short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the
following input types: text, search, url, tel, email, and password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The required
Attribute
The
input required attribute specifies that an input field must
be filled out before submitting the form.
The required attribute works with the
following input types: text, search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The step Attribute
The
input step attribute specifies the legal number
intervals for an input field.
Example:
if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the
max and min attributes to create a range of legal values.
The step attribute works with the
following input types: number, range, date, datetime-local, month, time and
week.
Example
An input field with a specified legal number
intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Note: Input
restrictions are not foolproof, and JavaScript provides many ways to add
illegal input. To safely restrict input, it must also be checked by the
receiver (the server)!
The autofocus
Attribute
The
input autofocus attribute specifies that an input field
should automatically get focus when the page loads.
Example
Let the "First name" input field
automatically get focus when the page loads:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The height and width
Attributes
The
input height and width attributes specify the height and width of
an <input type="image"> element.
Tip: Always
specify both the height and width attributes for images. If height and width
are set, the space required for the image is reserved when the page is loaded.
Without these attributes, the browser does not know the size of the image, and
cannot reserve the appropriate space to it. The effect will be that the page
layout will change during loading (while the images load).
Example
Define an image as the submit button, with height
and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
The list Attribute
The
input list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
Example
An <input> element with pre-defined values in
a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The autocomplete
Attribute
The
input autocomplete attribute specifies whether a form or an
input field should have autocomplete on or off.
Autocomplete
allows the browser to predict the value. When a user starts to type in a field,
the browser should display options to fill in the field, based on earlier typed
values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on, and off for one
input field:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
HTML Form and Input Elements
Tag
|
Description
|
<form>
|
Defines an HTML form for user input
|
<input>
|
Defines an input control
|
Comments
Post a Comment