HTML Introduction | Getting Started with HTML5 | HTML5 Input Element Attributes

HTML5 form Element Attributes

The form element attributes newly added in HTML5 are as follows.

autocomplete
novalidate

HTML5 input Element Attributes

The input element attributes newly added in HTML5 are as follows.

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern
placeholder
required
step

autocomplete Attribute

The autocomplete attribute specifies whether information entered in a form element or input element should be saved automatically. When this attribute is set to on, the browser automatically saves the information entered by the user. After that, it autocompletes future input values based on the saved information.

This attribute can be used only with the following input types.

text, search, url, tel, email, password, datepickers, range, color

<form action="/" autocomplete="on">
  Name: <input type="text" name="name"><br>
  Email: <input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

Run code

novalidate Attribute

The novalidate attribute is an attribute of the form element, not the input element. This attribute specifies whether the entered information should be validated when the data is submitted. If this attribute is added to an input type that automatically performs validation, such as url or email, validation is not performed. In other words, data submitted through a form element that uses this attribute must always be validated separately on the server side.

<form action="/" novalidate>
  Email: <input type="email" name="email">
  <input type="submit">
</form>

Run code

The novalidate attribute is not supported in Internet Explorer 9 and earlier, or in Safari 10.

autofocus Attribute

The autofocus attribute automatically gives focus to the input element using this attribute when the web page loads.

<form action="/examples/media/request.php">
    User: <input type="text" name="username"><br>
    Password: <input type="password" name="password" autofocus><br><br>
</form>

The autofocus attribute is not supported in Internet Explorer 9 and earlier.

form Attribute

The form attribute specifies which form element the input element belongs to, regardless of where the input element is placed. By separating the id values of form elements with spaces, the input element can belong to two or more form elements.

<form action="/examples/media/request.php" id="user">
    User: <input type="text" name="username"><br><br>
</form>
...
Password: <input type="password" name="password" form="user">

The form attribute is not supported in Internet Explorer.

formaction Attribute

The formaction attribute specifies the server-side file to which the entered data will be sent. In other words, the formaction attribute overrides the action attribute of the form element. By using this attribute, the server-side file that receives the entered information can be changed from the input element.

This attribute can be used only with the submit and image types.

<form action="/examples/media/request.php">
    User: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br><br>
    <input type="submit" value="Submit with administrator privileges" formaction="/examples/media/request_admin.php"><br>
</form>

The formaction attribute is not supported in Internet Explorer 9 and earlier.

formenctype Attribute

The formenctype attribute specifies how the entered data is encoded when it is submitted. In other words, the formaction attribute overrides the enctype attribute of the form element.

The formenctype attribute applies only when the method attribute of the form element is post. This attribute can be used only with the submit and image types.

<form action="/examples/media/request_enctype.php" method="post">
    Enter your user name: <input type="text" name="username"><br><br>
    <input type="submit" value="Submit with encoding" formenctype="multipart/form-data"><br>
</form>

The formenctype attribute is not supported in Internet Explorer 9 and earlier.

formmethod Attribute

The formmethod attribute specifies the HTTP method used when submitting the entered data. In other words, the formmethod attribute overrides the method attribute of the form element.

This attribute can be used only with the submit and image types.

<form action="/examples/media/request.php" method="get">
    Enter your user name: <input type="text" name="username"><br><br>
    <input type="submit" value="Submit with POST" formmethod="post"><br>
</form>

The formmethod attribute is not supported in Internet Explorer 9 and earlier.

formnovalidate Attribute

The formnovalidate attribute specifies that the entered data should not be checked for validity when it is submitted. In other words, the formnovalidate attribute overrides the novalidate attribute of the form element.

This attribute can be used only with the submit type.

<form action="/examples/media/request.php">
    Enter the URL of a website you often visit: <input type="url" name="url"><br><br>
    <input type="submit" value="Submit with novalidate" formnovalidate><br>
</form>

The formnovalidate attribute is not supported in Safari, Internet Explorer 9, or earlier versions.

formtarget Attribute

The formtarget attribute specifies where to display the response page received after the entered data is submitted. In other words, the formtarget attribute overrides the target attribute of the form element.

This attribute can be used only with the submit and image types.


<form action="/examples/media/request.php">
    Enter your user name: <input type="text" name="username"><br><br>
    <input type="submit" value="Show response in a new window" formtarget="_blank"><br>
</form>

The formtarget attribute is not supported in Internet Explorer 9 and earlier.

height and width Attributes

When the type attribute of the <input> tag is "image", you can use the height and width attributes to specify the height and width of the image. Therefore, these attributes can be used only with the image type. Also, when the image is clicked, the x-coordinate and y-coordinate of the clicked position are submitted together with the names x and y.

<form action="/examples/media/request.php">
    User: <input type="text" name="username"><br>
    Password: <input type="password" name="password" autofocus><br><br>
    <input type="image" src="/examples/images/img_penguin.png" alt="Submit" height="26" width="26">
    Click the image to submit!
</form>

list Attribute

The list attribute is related to a datalist element that sets a predefined list of options for the input element. The value of the list attribute on the input element must match the id attribute value of the datalist element for them to be connected.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

The list attribute is not supported in Safari, Internet Explorer 9, or earlier versions.

min and max Attributes

The min and max attributes specify the minimum and maximum values that can be entered in an input element.

These attributes can be used only with the following input types.

number, range, date, time, datetime-local, month, week

<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="Submit">
</form>

The min and max attributes are not supported in Firefox, Internet Explorer 9, or earlier versions.

multiple Attribute

The multiple attribute allows the user to enter more than one value in an input element.

This attribute can be used only with the email and file types.

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="Submit">
</form>

The multiple attribute is not supported in Internet Explorer 9 and earlier.

pattern Attribute

The pattern attribute specifies a regular expression used to validate the value entered in an input element. A regular expression means a search pattern used to find a set of strings that match a specific rule within a string.

This attribute can be used only with the following input types.

text, password, email, tel, url

<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="Email format">
</form>

The regular expression used in the example above means the following.

[a-zA-Z0-9] : Any lowercase letter, uppercase letter, or number can appear any number of times.
[@] : Only the ‘@’ character must appear.
[.] : Only the ‘.’ character must appear.
[.]* : The ‘.’ character may or may not appear.
[a-zA-Z0-9]* : Any lowercase letter, uppercase letter, or number may appear any number of times, or may not appear at all.

Therefore, by using a regular expression like the one above, you can check whether the string matches the email format.

The pattern attribute is not supported in Safari, Internet Explorer 9, or earlier versions.

placeholder Attribute

The placeholder attribute provides a hint about the value that should be entered in an input element. This hint can be an example or an explanation of the input format. The placeholder attribute value is no longer displayed when the input field receives focus.

This attribute can be used only with the following input types.

text, password, email, tel, url, search

<form action="/examples/media/request.php">
    User: <input type="text" name="username" placeholder="John Smith"><br>
    Password: <input type="password" name="password" placeholder="1234"><br><br>
</form>

The placeholder attribute is not supported in Internet Explorer 9 and earlier.

required Attribute

The required attribute specifies an input element that must be filled in. All input elements with this attribute must have values before the form can be submitted to the server.

<form action="/examples/media/request.php">
    Name: <input type="text" name="name" required> (You must enter a name!)<br>
    Age: <input type="number" name="age" min="1" max="99"><br><br>
</form>

The required attribute is not supported in Safari, Internet Explorer 9, or earlier versions.

step Attribute

The step attribute specifies the numeric interval allowed for values entered in an input element. For example, if the step attribute value is 2, the allowed numbers are …, -4, -2, 0, 2, 4, …

This attribute can be used only with the following input types.

number, range, date, time, datetime-local, month, week

<form action="/examples/media/request.php">
    What is your favorite number? (Please choose in steps of 5 from -30 to 30.)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

The step attribute is not supported in Internet Explorer 9 and earlier.