An HTML tutorial for beginners | Input Attributes with Examples
In this article, we will learn about HTML input attributes in detail.{alertSuccess}
{tocify} $title={Table of Contents}
The Value Attributes
The input value attribute determines 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>{codeBox}
The readonly Attribute
The input readonly attribute determines that an input field is read-only.
A read-only input field cannot be changed (however, a user can tab to it, highlight it, and copy the text from it).
When you submit the form, then the read only value of the input field is sent.
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>{codeBox}
The disabled Attribute
The input disabled attribute defines that an input field should be disabled.
A disabled input field is useless and un-clickable.
The value of a disabled input field will not be mailed 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>{codeBox}
The size Attribute
The input size attribute determines the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute functions with the following input types: text, search, tel, URL, email, and password.{alertInfo}
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>{codeBox}
The max length Attributes
With input maxlength attributes, the maximum number of characters to be allowed in the input field can be specified.
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>{codeBox}
The min and max Attributes
The input min and max attributes specify an input field's minimum and maximum values.
The min and max attributes function with the following input types:
“Number, range, date, datetime-local, month, time and week.”
Bonus: Utilize the max and min attributes together to make a range of legal values.{alertInfo}
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>{codeBox}
The Multiple Attributes
The input multiple attribute determines that the user is permitted to enter more than one value in an input field.
The multiple attribute functions 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>{codeBox}
The pattern Attribute
The input pattern attribute determines a regular expression in which the input field's value is checked against when the form is submitted.
The pattern attribute functions 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>{codeBox}
The placeholder Attribute
The input placeholder attribute determines a short hint that represents the expected value of an input field (a sample value or a short explanation of the expected format).
The short hint is shown in the input field before the user enters a value.
The placeholder attribute functions 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>{codeBox}
The required Attribute
The input required attribute determines that an input field must be filled out before submitting the form.
The required attribute functions 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>{codeBox}
The step Attribute
The input step attribute determines the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Suggestion: This attribute can be utilized together with the max and min attributes to make a range of legal values.
The step attribute functions 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>{codeBox}
The autofocus Attribute
The input autofocus attribute determines 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>{codeBox}
The height and width Attributes
The input height and width attributes determine the height and width of an <input type="image"> element.
Advice: Always determine both the height and width attributes for images. If height and width are set, the space needed for the image is reserved when the page is loaded.
Without these attributes, the browser does not understand the size of the image and cannot reserve the appropriate space.
The effect will be that the page layout will adjust 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>{codeBox}
The list Attribute
The input list attribute refers to an <datalist> element that includes 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>{codeBox}
The autocomplete Attribute
The input autocomplete attribute determines whether a form or an input field should include autocompleting on or off.
Autocomplete authorizes the browser to predict the value. When a user starts to type in a field, the browser should show options to fill in the field based on before-typed values.
The autocomplete attribute functions 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.html" 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>{codeBox}
Note: In some browsers, you may require to activate an autocomplete process for this to work (Look under "Preferences" in the browser's menu).{alertInfo}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “<html>: Hypertext Markup Language (Forms Input Attributes).” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.