This chapter describes the different attributes for the HTML <input> element.
HTML provides very strong support to build web forms using built-in elements. Web forms are often the most used functionality at the client-side or user end. The HTML provides <form> element, which is mainly used to design the forms. It’s the main or parent element from which the overall form will be designed. Then various attributes are available to design the form as a whole document. In this HTML Form Attribute article, we will design a simple form and see the <form> element along with various attributes that we can use with it.
HTML form element can be used in various ways, It can be used along with the many existing available HTML elements like <button>, <input>, <fieldset>, <select>, etc. Also, there are various attributes available to use along with the <form> element. Let’s see them by designing the simple web form step by step.
The value Attribute
The input value attribute specifies an initial value for an input field:
Example
<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>
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>
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>
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a max length 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>
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>
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>
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>The placeholder Attribute
The input placeholder attribute specifies a short 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>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>
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>
The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
Example
<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>
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>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>
Attributes
| Attribute | Value | Description |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | Specifies a filter for what file types the user can pick from the file input dialog box (only for type=”file”) |
| alt | text | Specifies an alternate text for images (only for type=”image”) |
| autocomplete | on off | Specifies whether an <input> element should have autocomplete enabled |
| autofocus | autofocus | Specifies that an <input> element should automatically get focus when the page loads |
| checked | checked | Specifies that an <input> element should be pre-selected when the page loads (for type=”checkbox” or type=”radio”) |
| dirname | inputname.dir | Specifies that the text direction will be submitted |
| disabled | disabled | Specifies that an <input> element should be disabled |
| form | form_id | Specifies the form the <input> element belongs to |
| formaction | URL | Specifies the URL of the file that will process the input control when the form is submitted (for type=”submit” and type=”image”) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the server (for type=”submit” and type=”image”) |
| formmethod | get post | Defines the HTTP method for sending data to the action URL (for type=”submit” and type=”image”) |
| formnovalidate | formnovalidate | Defines that form elements should not be validated when submitted |
| formtarget | _blank _self _parent _top framename | Specifies where to display the response that is received after submitting the form (for type=”submit” and type=”image”) |
| height | pixels | Specifies the height of an <input> element (only for type=”image”) |
| list | datalist_id | Refers to a <datalist> element that contains pre-defined options for an <input> element |
| max | number date | Specifies the maximum value for an <input> element |
| maxlength | number | Specifies the maximum number of characters allowed in an <input> element |
| min | number date | Specifies a minimum value for an <input> element |
| minlength | number | Specifies the minimum number of characters required in an <input> element |
| multiple | multiple | Specifies that a user can enter more than one value in an <input> element |
| name | text | Specifies the name of an <input> element |
| pattern | regexp | Specifies a regular expression that an <input> element’s value is checked against |
| placeholder | text | Specifies a short hint that describes the expected value of an <input> element |
| readonly | readonly | Specifies that an input field is read-only |
| required | required | Specifies that an input field must be filled out before submitting the form |
| size | number | Specifies the width, in characters, of an <input> element |
| src | URL | Specifies the URL of the image to use as a submit button (only for type=”image”) |
| step | number any | Specifies the interval between legal numbers in an input field |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week | Specifies the type <input> element to display |
| value | text | Specifies the value of an <input> element |
| width | pixels | Specifies the width of an <input> element (only for type=”image”) |
Conclusion
So we have seen most of the available and important HTML form attributes that we can use while building the web forms. We have seen form attributes such as action, method, autocomplete, etc. These HTML form attributes make it easy to implement various kinds of features to develop and design intuitive web forms. They allow flexibility so that forms can be designed in a required way. The web forms can be designed in various possible ways, and HTML form elements are their backbone.
