HTML5 Form Attributes

The required attribute is an boolean attribute which may be specified on zero or more form elements in a form. When the user submits the form, any required field that has been left blank or invalid will cause the browser to stop the submission and focus will move to the first invalid form element. Opera, Firefox, and Chrome provide the user with error messages; for example, “Please fill out this field” or “You have to specify a value” if left empty.

The required attribute can be set on any input type except button, range, color, and hidden, all of which generally have a default value.

The syntax is either simply required, or required="required" if you’re using XHTML syntax.

<input type="text" id="email" name="email" required aria-required="true">

For improved accessibility, add the ARIA attribute aria-required="true". Adding the WAI-ARIA roles could let a user know that the field is required.

Required form elements can be styled using css with the

:required

input: required {
    background - image: url('../images/required.png');
}
input: focus: invalid {
    background - image: url('../images/invalid.png');
}
input: focus: valid {
    background - image: url('../images/valid.png');
}

For older browser that do not support :required pseudo-class, provide targeted styles using the attribute selector:

input: required,
    input[required] {
        background - image: url('../images/required.png');
    }

The placeholder attribute places a short hint to be displayed inside the form element, telling the user what data should be entered in that field.

The placeholder text disappears when the field gets focus, and reappears when the field leaves focus and if no data was entered.

<input type="text" id="url" name="url" placeholder="http://example.com">

The pattern attribute enables you to provide a regular expression that the user’s input must match in order to be considered valid. It can be used to validate an email or url entered by the user.

1. Validating an email:

<input pattern="[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}" title="check valid email">

2. Match a ZIP code in the format of 99999 or 99999-9999:

<input pattern=”[0-9]{5}(\-[0-9]{4})?” title=”A zip code in the format of 99999 or 99999-9999”>

3. Validate Password:

<input type="password" id="password" name="password" required pattern="\S{6,}">

\S refers to “any non-whitespace character,” and {6,} means “at least six times.” If you wanted to stipulate the maximum amount of characters, the syntax would be, for example, \S{6,10} for between six and ten characters.

The Boolean disabled attribute can be used with any form control except the new output element. Unlike previous versions of HTML, HTML5 allows you to set the disabled attribute on a fieldset and have it apply to all the form elements contained in that fieldset.

Form elements with the disabled attribute will be grayed out in the browser and prohibit the user from focusing on a form control that has the disabled attribute set. This attribute is often used to disable the submit button until all fields are correctly filled out, for example.

Form controls with the disabled attribute aren’t submitted along with the form; so their values will be inaccessible to your form processing code on the server side.

To style disabled form controls use the :disabled pseudo-class in your CSS.

<button type="submit" disabled>Submit</button>

The readonly attribute is similar to the disabled attribute: it makes it impossible for the user to edit the form field. Unlike disabled, however, the field can receive focus, and its value is submitted with the form.

<label for="about">Article Title</label>
<input type="text" name="about" id="about" readonly>

The multiple attribute, indicates that multiple values can be entered in a form control. Before HTML, it only applied to the select element. In HTML5, it can be added to email and file input.

User can select more than one file, or include several comma-separated email addresses.

<input type=file multiple>

<input type=email multiple>

So now we can associate a fieldset or form control with any other form in the document. The form attribute takes as its value the id of the form element with which the fieldset or control should be associated.

<form id=foo>
    <input type=”text”> ...
</form>
<textarea form=foo></textarea>

Most browsers have some kind of autocomplete functionality. The autocomplete attribute specifies whether the form, or a form control, should have autocomplete functionality.

By default, autocomplete is on. To disable it, use autocomplete="off".

In addition to disabling autocomplete at the individual input field level, you can also disable it at the form level. If you disable autocomplete at the form level, you can reenable it for an individual form field by setting autocomplete=”on”.

<form id=foo>
    <input type=”text”> ...
</form>
<textarea form=foo></textarea>
<form>
    <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username
                <input type="text" name="username">
            </label>
        </p>
        <p>
            <label>Password
                <input type="password" name="pwd" autocomplete="off">
            </label>
        </p>
    </fieldset>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

The datalist element is used to define a list of suggested values for other input controls. It is not a form input or control itself.

The datalist element, much like select, is a list of options, with each one placed in an option element, but nothing renders on screen until the datalist is associated with an input element. So associate the datalist with an input using the list attribute on the input. The list attribute takes as its value the id attribute of the datalist you want to associate with the input.

One datalist can be associated with several input fields.

<form>
    <p>
        <label>Donation amount
            <input type="text" name="donation" list="donations">
        </label>
    </p>
    <datalist id="donations">
        <option value="10.00">10.00</option>
        <option value="25.00">25.00</option>
        <option value="50.00">50.00</option>
    </datalist>
    <p>
        <button type="submit">Submit</button>
    </p>
</form>

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page.

As we’ve seen with <input type=number>, these attributes constrain the range of values that can be entered in an input; you can’t submit the form with a number smaller than min or larger than max. But it can also be used with other input types—for example, <input type=date min=2010-01-01 max=2010-12-31> will not accept a date that’s not in the year 2010. It’s trivial to make the server write HTML that has a min of today, so only future days are allowed (for a flight booking site, for example) or a max of today (for a field collecting date of birth, for example).

step controls the level of granularity of input. So if you want the user to enter a percentage between 0 and 100, but only to the nearest 5, you can specify

<input type=number mix=0 max=100 step=5>

The spinner control will increment in steps of 5.

Taking the example of a time control, you can also use step=any. This allows any time in the day to be selected, with any accuracy (for example, thousandth-of-a-second accuracy or more); normally, time controls are limited to an accuracy of one minute.

<input name=favtime type=time step=any>