The autocomplete function is now a popular feature on the internet. If you type something into a form field, browsers offer a list of suggested words if the function has been activated and is supported by the browser.
Such applications can now be implemented very easily. To do this, assign the autocomplete attribute to the input element.
<input type="text" autocomplete="on" />
The value on activates autocomplete for the field. From now on, the browser remembers the values entered in the field and offers them later via a selection list. In this way, forms can be completed much more quickly.
However, this behavior is not desired for every field. In such cases, autocomplete can be explicitly deactivated. To do this, assign the value off to the autocomplete attribute.
<input type="text" autocomplete="off" />
Alternatively, you can also add the autocomplete attribute to the form element. Depending on whether the value on or off is used here, the autocomplete function is activated or deactivated for the entire form.
<form autocomplete="on"> ... </form>
However, if contrary specifications are made within the form, these apply.
<form autocomplete="on"> Name: <input type="text" name="vname" autocomplete="off" /><br /> First name: <input type="text" name="nname" /><br /> Postcode: <input type="text" name="plz" /><br /> City: <input type="text" name="ort" /> </form>
In this example, autocomplete would be applied to all form fields, as the value of autocomplete was set to on in the introductory form element. The only exception here is the vname field. This is because autocomplete has been explicitly deactivated for this field.
For autocomplete to work, this function must be supported by the respective browser and must not have been deactivated. In addition, only values that have already been entered once are displayed in the suggestion list.
The datalist element was introduced with HTML5 in order to be able to really influence the values in the suggestion list. This element does not produce any visible output in the browser. The values for the suggestion lists can be defined via the subordinate option elements. An example:
<div> Language: <br /> <input type="text" autocomplete="on" list="language" /> </div> <datalist id="language"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
The list attribute of the input element is used to create a logical connection between the input field and the datalist element. To do this, the same values must be used for list and the id attribute of the datalist element.
Setting the focus
The focus can be automatically assigned to a form field when the page is called up. You are familiar with such a function from Google's homepage, for example. If this page is called up, you can immediately type in the search term without having to manually place the cursor in the search/input field beforehand.
In HTML5, there is the autofocus attribute for such cases. This attribute ensures that the form field equipped with it is automatically assigned the focus when the page is loaded.
An example:
<form> <input name="search field" autofocus="autofocus" /> <input type="submit" value="search" /> </form>
Browsers that do not recognize the autofocus attribute simply ignore it. This ignoring has no negative effects. (However, the field will not be focused).
Checking entries
Until now, it was not possible to check form entries using HTML onboard tools alone. For example, if you wanted to test whether a user had actually entered an email address in a form field, you usually had to use JavaScript or php. In HTML5, such "contortions" are no longer necessary. HTML now comes with a validation API. And it has a lot to offer. Form entries can now be checked with very little effort.
HTML5 has a number of rules that determine how fields are validated. For example, input fields of type email are checked to see whether a syntactically correct email address has been entered.
- url - Checks for URL
- email - Checks for email address
- range - Checks for floating point number
- number - Checks for floating point number
To mark a field as a mandatory field, the required attribute is assigned to it.
<input id="vname" name="vname" type="text" required="required" />
A field marked with this must be filled in, i.e. it must not be empty.
But beware: certain requirements must be met for fields to be validated.
- The name attribute must be assigned to the element.
- The element must be located within a form element, i.e. in an HTML form. Alternatively, the connection to the form can also be established via the form attribute.
- The element must not have the readonly or disabled attribute.
A correct application would look like this:
<form action="form.php"> <input id="vname" name="vname" type="text" required="required" /> <input type="submit" /> </form>
Here, the browser would check whether the field has been filled in. If the field is empty and an attempt is still made to submit the form, the browser should now display an error message.
The form field types email, range, number, tel and url have already been mentioned several times in this series. These fields are not only checked to see whether they contain a value, but also whether the value entered is correct.
<form action="form.php"> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
For fields of type email, for example, the system checks whether the value entered is actually a syntactically correct email address. If this is not the case, the browser displays an error message.
The browser is responsible for displaying the error message.
Do not have fields checked automatically
Automatic validation of entries is not always desirable. If you want to prevent the validation of the entire form, assign the novalidate attribute to the introductory form element.
<form action="form.php" novalidate> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
Alternatively, the formnovalidate attribute can be added to a submit button. This is interesting, for example, if you offer a button to temporarily save the form in parallel to a submit button.
<form action="form.cgi" method="post"> <input id="email" name="email" type="email" /> <input type="submit" name="submit" value="Send" /> <input type="submit" formnovalidate="formnovalidate" value="Save" /> <input type="submit" formnovalidate="formnovalidate" value="Log out" /> </form>
In this case, the form is only validated via the first submit button. The other two are used for saving and logging out. Validation is not necessary in these cases.
