The value Attribute
The value attribute is used to specify the initial value of an input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
The readonly Attribute
The readonly attribute is used to specify that the input field is read only (which cannot be changed or modified):
Example
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
value is not need for the readonly attribute. It can be written as same as readonly="readonly".
The disabled Attribute
The disabled attribute is used to disable the input field.
A disabled element cannot be used i.e they are un-usable and un-clickable.
submission of Disabled elements cannot be done too.
Example
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
value is not needed for the disabled attribute. It can be written as same as readonly="disabled".
The size Attribute
The size attribute is used to specify input field size(for the characters):
Example
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
The maxlength Attribute
The maxlength attribute is used to specify the input fields maximum allowed length:
Example
<form action="">
First name:<br>
<input type="text" name="firstname"
maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
when a maxlength attribute is specified, the input control will not be accepting more than the characters allowed number.
The attribute will not be providing any feedback. If the user needs to be alerted regarding something, JavaScript code must be written.
Note : Input restrictions cannot be considered to be foolproof. JavaScript gives many number of ways to give illegal input. for safely restricting the input, restrictions should also be checked at the receiver end (the server) as well.
HTML5 Attributes
the following attributes has been added for HTML5 for<input>:
and the following attributes are added for <form>:
The autocomplete Attribute
The autocomplete attribute is used to specify if a form or input field must be having autocomplete on or off.
When autocomplete is switched on, the browser will complete values automatically based on the values that the user has entered in the past.
Tip: Autocomplete can be in "on" status for the form, and "off" status for specific input fields, or vice versa.
The autocomplete attribute works along with <form> and the <input> types as the following: text, search, url, tel, range, email, datepickers, password, and color.
Example
An HTML form with autocomplete on (and off for one input field):
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Try it Yourself
Tip: In few browsers you will have to activate the autocomplete function for this to work.
The novalidate Attribute
The novalidate attribute belongs to the <form> attribute.
if it is present, novalidate indicated that during submission, form data must not be validated.
Example
Indicates that during submission the form is not to be validated:
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
Try it Yourself
The autofocus Attribute
The autofocus attribute belongs to a boolean attribute.
if it is present, it indicated that an <input> element should automatically receive focus when the page is loading.
Example
the "First name" input field should be automatically getting focus when the page loads:
First name:<input type="text" name="fname"
autofocus>
Try it Yourself
The form Attribute
The form attribute is used to specify one or more forms an <input> element is belonging to.
Tip: For refering more than one form, using a space-separated list of form ids is required.
Example
A HTML form has an input field which is located outside (but the input field is a part of the form):
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
Try it Yourself
The formaction Attribute
The formaction attribute is used to specify the file URL which will process the input control during the submission of the form.
the action attribute of the <form> element is overrided by the formaction attribute overrides
The formaction attribute consists of type="submit" and type="image".
Example
An HTML form with two submit buttons, with different actions:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
Try it Yourself
The formenctype Attribute
The formenctype attribute is used to specify how the form-data needs to be encoded during submition to the server (applicable for forms with method="post").
the enctype attribute of the <form> element is overridden by the formenctype attribute
The formenctype attribute is utilised with type="submit" and type="image".
Example
Send form-data which is default encoded (the first submit button), and is also encoded as "multipart/form-data" (the second submit button):
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
Try it Yourself
The formmethod Attribute
The formmethod attribute is used to define the HTTP method inorder to send form-data to the action URL.
the method attribute of the <form> element is overridden by the formmethod attribute overrides .
The formmethod attribute is used with type="submit" and type="image".
Example
the HTTP method of the form is overridden by the second submit button.
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
Try it Yourself
The formnovalidate Attribute
The novalidate attribute is known as a boolean attribute.
If it is, it is used to specify that the <input> element must not be validated during submission.
the novalidate attribute of the <form> element is overridden by the formnovalidate attributes.
The formnovalidate attribute is used with the type="submit".
Example
A form having two submit buttons i.e with and without validation:
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without
validation">
</form>
Try it Yourself
The formtarget Attribute
The formtarget attribute is used tospecify a name or a keyword which indicates the response display which is received after form submission.
the target attribute of the <form> element is overridden by the formtarget attribute.
The formtarget attribute is utilised with type="submit" and type="image".
Example
A form that is having two submit buttons, having different target windows:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
Try it Yourself
The height and width Attributes
The height and width attributes is used for specifing the height and width of an <input> element.
The attributes - height and width are utilised only used with <input type="image">.
The size of images should be always indicated. If the size is known properly by the browser, flickering will occur while loading of the images.
Example
Defining of an image for the submit button, with height and width attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
Try it Yourself
The list Attribute
The list attribute indicated to a <datalist> element that is having pre-defined options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Try it Yourself
The min and max Attributes
The min and max attributes is used to specify the maximum and minimum value for an <input> element.
The max and min attributes are used with the following input types: number, range, date, datetime, datetime-local, month, time and week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
Try it Yourself
The multiple Attribute
The multiple attribute is known a boolean attribute.
if it is present, it will specify that the user can be allowed to enter more than one value in the <input> element.
The multiple attribute is used with the following input types: email, and file.
Example
A file upload field which will accept multiple values:
Select images: <input type="file" name="img" multiple>
Try it Yourself
The pattern Attribute
The pattern attribute is used to specify a regular expression which is checked against the <input> element's value.
The pattern attribute uses the following input types: text, search, url, tel, email, and password.
Tip:The global title attribute needs to be used for describing the pattern that will help the user.
Tip: To know more about regular expressions please refer to our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special characters):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">
Try it Yourself
The placeholder Attribute
The placeholder attribute is used to specify a hint which describes inputs field's expected valueb (a sample value or a short description of the format).
The hint will be displayed in the input field when the user is going to enter a value.
The placeholder attribute will work with the input types as follows: text, search, url, tel, email, and password.
Example
An input field having a placeholder text:
<input type="text" name="fname" placeholder="First name">
Try it Yourself
The required Attribute
The required attribute is known as a boolean attribute.
if it is present, it is used to specify that an input field should be filled before form submition.
The required attribute will work with the input types as follows: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input type="text" name="usrname" required>
Try it Yourself
The step Attribute
The step attribute is used to specify intervals of the legal number for an <input> element.
Example: if step="3", legal numbers that can be used are -3, 0, 3, 6, etc.
Tip: The step attribute is also used along with the max and min attributes for creating a range of legal values.
The step attribute can work with the input types as follows: number, range, date, datetime, datetime-local, month, time and week.
Example
An input field given using a specified legal number intervals:
<input type="number" name="points" step="3">
Try it Yourself