From the author: undoubtedly, you interact with at least one form on the Web every day. Whether you're searching for content or logging into your Facebook account, on the web, applying online forms is one of the most common tasks. For designers and developers, creating forms is somewhat monotonous, especially writing data validation scripts for them. HTML5 introduces many new attributes, input types, and other elements of the markup toolkit.
In this article, we will focus on learning new attributes, and in the next, we will look at data entry types.
It will become clear that the new properties will make our life much easier when making an impression on users. What's the most attractive thing about it? You can apply them now. We'll start with a very brief history HTML5 forms.
This article is an excerpt from Chapter 6 of the book Beginning HTML5 and CSS3: The Evolution of the Web (Beginning HTML5 and CSS3: The web Evolved) by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian, published by Apress.
Note: Since this article is an excerpt from a book, browser performance of attributes and input types may have changed since the screenshots were taken. In addition, since the publication, browser support could have expanded, so on the issue of its current state please refer to the links provided at the end of the article.
History of HTML5 forms
The forms section in HTML5 was originally a specification called Web Forms 2.0 that added new types of form management tools. Started at Opera and edited by then Opera employee Ian Hickson, it was approved by the W3C in early 2005. The work was originally carried out by the W3C. It was then combined with the Web Applications 1.0 specification to form the basis for the HTML5 specification of the splinter Web Hypertext Application Technology Working Group (WHATWG).
Applying HTML5 Design Principles
One of best characteristics HTML5 forms is that almost all new data entry types and attributes can be applied immediately. They do not require any additional chips, hacks or other patches. Not that they are all "supported" already, but in modern browsers that truly support them, they can do cool things - and degrade beautifully in browsers that don't understand them. This is all thanks to HTML5 design principles. In this case, we specifically refer to the principle of beautiful degradation. In general, it is inexcusable not to start using these functions right away. In fact, this will mean that you are ahead of the rest of the planet.
HTML5 Form Attributes
In this article, we'll take a look at the following 14 new attributes.
placeholder
The first is the placeholder attribute, which allows us to set the placeholder text, which until recently was done in HTML4 using the value attribute. It can only be used for short descriptions. For longer ones, use the title attribute. The difference with HTML4 is that text is shown only when the field is empty and out of focus. As soon as the field gets focus (for example, when you click or point to the field), and you start typing, the text just disappears. Much like the search box in Safari.
Let's see how to implement the placeholder attribute.
< input type = "text" name = "user-name" id = "user-name" placeholder = "at least 3 characters" > |
Like this! I hear you think, “What's so remarkable about him? I've done this in JavaScript my whole life. " Yes, that's right. With HTML5, however, it becomes part of the browser, meaning less scripting is required to achieve a more accessible cross-browser solution (even with JavaScript disabled). The figure shows how the placeholder text attribute works in Chrome.
Browsers that do not support the placeholder attribute ignore it, so it will not execute. However, by enabling it, you improve the experience of those users whose browsers support it, and also ensure your site will be promising. Everything modern browsers support placeholder text.
autofocus
Autofocus does exactly what it means. Adding it to input will automatically focus the field when the page is rendered. As with placeholder, in the past we used JavaScript for autofocus.
However, traditional JavaScript methods have serious usability problems. For example, if a user starts filling out a form before the script is fully loaded, it will (unpleasantly) be returned to the first field of the form after loading. The autofocus attribute in HTML5 bypasses this problem by focusing as the document loads, without having to wait for JavaScript to load. However, we recommend that you only use it to prevent usability issues for pages whose sole purpose is a form (like Google's).
This is a boolean attribute (except when you are writing XHTML5; see note) and is done like this:
< input type = "text" name = "first-name" id = "first-name" autofocus > |
It is supported by all modern browsers and, as a placeholder, non-autofocusing browsers simply ignore it.
Note: Some of the new HTML5 form attributes are Boolean. It simply means that they are installed if present and not installed if not present. In HTML5, they can be written in several different ways.
autofocus autofocus = "" autofocus = "autofocus"
autofocus autofocus = "" autofocus = "autofocus" |
However, when writing XHTML5, you should use the autofocus = "autofocus" style.
autocomplete
The autocomplete attribute helps users fill out forms based on previous data entry. The attribute has been in use since IE5.5, but was finally standardized as part of HTML5. It is active by default. This means that we generally don't have to apply it. However, if you want to insist on typing in the form every time you fill it out (as opposed to auto-filling the field by the browser), then do it like this:
< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" > |
The autocomplete state of the field overrides any autocomplete state set on the containing form element.
required
The required attribute requires no submission; like autofocus, it does exactly what you expect it to do. When you add it to a form field, the browser requires the user to enter data in that field before submitting the form. It replaces the basic form validation currently performed by JavaScript, making everything more convenient and saving us a little more development time. required is a boolean attribute like autofocus. Let's see it in action.
< input type = "text" id = "given-name" name = "given-name" required > |
Currently required is only implemented in Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 and Chrome 5+, so for the time being you will have to continue writing scripts to check the filling of fields on the client side of other browsers (* cough-cough * IE!). Opera, Chrome and Firefox show the user an error message when submitting a form. In most browsers, errors are then localized based on the declared language. Safari does not show an error message on submit, but instead puts the focus on that field.
The default display of the "required" error message depends on the separate browser; the error bubble cannot be styled with CSS in all browsers at this time. Chrome, however, has its own property that can be used to style the error message. You can also style your data entry using the: required pseudo-class. An alternative is to override the wording and styles in JavaScript using the setCustomValidity () method. It is also very important not to forget that such browser validation does not replace server validation.
pattern
The pattern attribute is usually a big concern for many developers (well, as much as any shape attribute). He defines JavaScript regular expression for the field whose value you want to check. Pattern makes it easier for us to apply separate checks for codes, account numbers, and so on. The possibilities of pattern are vast, and here's just one simple example using a product number.
< label >Product Number: < input pattern = "{3}" name = "product" type = "text" title = "Single digit followed by three uppercase letters."/ > < / label > |
This pattern dictates that the product number must be one digit followed by three capital letters (3). You can see more templates on the HTML5 Templates website, which has a list of common regular expression style templates to help you get started with them.
As with required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10, and Chrome 5+ are the only browsers that currently support templates. However, others will soon catch up with the rapid advancement of the browser market.
The list and datalist elements
The list attribute allows the user to associate a list of options with a specific field. The value of the list attribute must be the same as the ID of a datalist element in the same document. The datalist element for HTML5 is new and represents a predefined list of form control options. It works in a similar way to in-browser search fields, which automatically complete words as you type.
The following example shows how list and datalist are combined.
< label >Your favorite fruit: < datalist id = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Blackcurrant" >Blackcurrant< / option > < option value = "Blueberry" >Blueberry< / option > < ! -- …-- > < / datalist > If other, please specify: < input type = "text" name = "fruit" list = "fruits" > < / label > |
By adding a select element to the datalist, you can provide excellent degradation simply by applying an option element. Here is an elegant markup template designed by Jeremy Keith, perfect for HTML5's gradual degradation principles.
< label >Your favorite fruit: < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Blackcurrant" >Blackcurrant< / option > < option value = "Blueberry" >Blueberry< / option > < ! -- …-- > < / select > If other, please specify: < / datalist > < input type = "text" name = "fruit" list = "fruits" > < / label > |
Browser support for list and datalist is currently limited to Opera 9.5+, Chrome 20+, Internet Explorer 10, and Firefox 4+.
multiple
You can move your list and datalist one step further by applying the multiple boolean attribute so that more than one value can be entered from the data list. Here's an example.
< label >Your favorite fruit: < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Blackcurrant" >Blackcurrant< / option > < option value = "Blueberry" >Blueberry< / option > < ! -- …-- > < / select > If other, please specify: < / datalist > < input type = "text" name = "fruit" list = "fruits" multiple > < / label > |
However, multiple does not apply exclusively with datalist. A further example of the use of multiple would be addresses Email when forwarding items to a friend or attaching files as shown here:
< label >Upload files: < input type = "file" multiple name = "upload" > < / label > |
multiple is supported in Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10, and Chrome 4+.
novalidate and formnovalidate
The novalidate and formnovalidate attributes indicate that no data validation is required when the form is submitted. They are both boolean attributes. formnovalidate can be applied to inputs of type submit or image. The novalidate attribute can only be set on the form element.
An example of using the formnovalidate attribute can be found on the Save Draft button, where the form has fields that are needed to submit a draft, but not required to save a draft. novalidate will be used in cases where you do not need to do form validation, but you want to take advantage of the more convenient user interface offered by the new types of data entry.
The use of formnovalidate can be seen in the following example:
< form action = "process.php" > < label for = "email" >Email:< / label > < input type = "text" name = "email" value = "[email protected]" > < input type = "submit" formnovalidate value = "Submit" > < / form > |
This example shows the use of novalidate:
< form action = "process.php" novalidate > |
Along with attributes specific to specific tags, HTML5 also has a number of attributes that can be added to any tags, so the attributes included in this group are called global or universal. They are listed below with a brief description. The link is available detailed description attribute.
The accesskey attribute allows you to activate a link using a keyboard shortcut with a letter or number specified in the link code. Browsers use different keyboard shortcuts. For example, the following combinations work for accesskey = "s".
- Internet Explorer: Alt + S
- Chrome: Alt + S
- Opera: Shift + Esc, S
- Safari: Alt + S
- Firefox: Shift + Alt + S
Specifies a styling class that allows you to associate a specific tag with styling. It is allowed to specify several classes at once in the value, separating them with a space.
Informs that the element is available for editing by the user - it is allowed to delete text and enter a new one. Standard commands like undo, pasting text from the clipboard, etc. also work.
Sets the context menu for an item. The value specifies the identifier of the menu created using the tag