Global HTML attributes. Global Attributes Attributes forms HTML5

From the author: Undoubtedly, you interact every day on the network at least one form. Do you search for content, or enter your account on the Facebook page - on the web application forms is one of the most common tasks. For designers and developers, the creation of forms is characterized by some monotony, especially writing data validation scripts for them. HTML5 represents many new attributes, Input types and other elements of the markup toolkit.

In this article, we will focus on studying new attributes, and in the following will consider the types of data entry.

It will be seen that new properties will greatly facilitate our life when you have impressions on users. What is the most attractive? You can use them now. We will start with a very brief history of the forms of HTML5.

This article - an excerpt from chapter 6 of the books start learning HTML5 and CSS3: Network Evolution (BEGINNING HTML5 AND CSS3: The Web Evolved) Christopher Murphy, Olya Stadholma, Richard Clark and Divia Manyan (Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian) published by Apress publishing house.

Note: Since this article is an excerpt from the book, from the moment the screenshots are created, the attribute browser and data entry types can change. In addition, from the moment of publication, browser support could expand, so on the issue of its current state, please refer to the links given at the end.

History of forms HTML5

The forms section in HTML5 was originally a specification called Web Forms 2.0, which added new types of shape control tools. Started in Opera and edited by the then Opera Opera Ayan Hickson (Ian Hickson), it was approved by W3C in early 2005. The work was initially conducted by W3C. It was then combined with the Web Applications 1.0 specification in order to create the foundation of the HTML5 Specification of the WEB Hypertext Application Technology Working Group (WhatWG).

Application of HTML5 design principles

One of the best features of HTML5 forms is that you can immediately apply almost all new types of data entry and attributes. They do not require any additional chips, hacks and other patches. Not that they are all "supported", but in modern browsers who truly support them, they are able to make cool things - and beautifully degraded in those browsers that do not understand them. All this is due to the design principles of HTML5. In this case, we will especially refer to the principle of beautiful degradation. In general, it is uncomprisingly not to start immediately apply these functions. In fact, it will mean that you are ahead of the planet all.

Attributes of HTML5 forms

In this article we will consider the following 14 new attributes.

placeholder.

The first is the PLACEholder attribute, which allows us to set the text-aggregate, which until recently was done in HTML4 using the Value attribute. It can only be applied for short descriptions. For longer, use the title attribute. The difference from HTML4 is that the text is shown only when the field is empty and not in focus. As soon as the field enters the focus (for example, when you click on the mouse or instruction on the field), and you start printing, the text simply disappears. Very similar to the search field in Safari.

Let's figure out how to execute the Placeholder attribute.

< input type = "text" name = "user-name" id = "user-name" placeholder = "at Least 3 Characters" >

Like this! I hear how you think: "What is this in it remarkable? I did it all my life in JavaScript. " Yes, right. However, with HTML5, it becomes part of the browser, meaning that it is necessary to write less script to achieve a more affordable cross-browser solution (even with JavaScript disabled). The figure shows the operation of the aggregate text attribute in Chrome.

Browsers that do not support the Placeholder attribute ignore it, so it will not be performed. However, turning it on, you improve the impression of those users whose browsers provide its support, and also guarantee your site promising. All modern browsers support the aggregate text.

autofocus.

Autofocus makes exactly what means. Adding it to INPUT automatically focuses the field when the page is displayed. As in the case of Placeholder, we used JavaScript in the past for Autofocus.

However, traditional JavaScript methods have serious problems of usability. For example, if the user begins to fill out the form until the script is fully downloaded, it will be (unpleasant) returned after loading to the first field form. The Autofocus attribute in HTML5 bypasses this problem, focusing as the document downloads, it does not need to wait for the JavaScript load. However, we recommend applying it to prevent problems with usability only for those pages whose only goal is a form (type Google).

This is a boolean attribute (except when you write XHTML5; see Note) and executed as here:

< input type = "text" name = "first-name" id = "first-name" autofocus >

It is supported by all modern browsers and, like Placeholder, who do not perform autofocus browsers simply ignore it.

Note: Some new HTML5-Bully form attributes. It simply means that they are installed if there are, and are not installed, if not. In HTML5, they can be recorded in several different ways.

autofocus autofocus \u003d "" autofocus \u003d "autofocus"

autofocus. autofocus \u003d "" autofocus \u003d "autofocus"

However, when writing XHTML5, you should apply autofocus \u003d "autofocus" style.

autocomplete.

The Autocomplete attribute helps users to fill forms based on previous data introduction. The attribute is used since IE5.5 times, but was finally standardized as part of HTML5. By default, it is active. This means that we basically do not have to apply it. However, if you want to insist on the introduction in the form field each time after it is filling (in contrast to the autofill the browser field), then follow it as follows:

< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" >

The Field of the Field of the Field cancels any AUTOCOMPLETE state installed on the form item.

required.

Required attribute does not require submission; Like Autofocus, he does exactly what you expect from him. When you add it to the Browser Form field, you require the user to enter the data into this field before sending the form. It replaces the basic shape validation, at this time being executed using JavaScript, making it becoming more convenient and saving a little more development time. Required is Boolean attribute as autofocus. Let's look at it in action.

< input type = "text" id = "given-name" name = "given-name" required >

Currently, Required is implemented only in Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 and Chrome 5+, so that until time, you will have to continue writing scripts to fill fields on the client side of other browsers (* Khe- Khe * IE!). Opera, Chrome and Firefox show the user when sending an error message form. Most error browsers are then localized based on a declared language. Safari does not show an error message when sending, and instead places this field into focus.

Displaying the default error message "Required" depends on a separate browser; Currently, the "bubble" with an error message in all browsers can not be appointed CSS styles. Chrome, however, has its own property that can be used to assign an error message to the styles. You can also assign styles for entering data using Pseudo-Class: Required. The alternative is to cancel 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 the validation of the server.

pattern.

The PATTERN attribute usually worries many developers (well, so much cares how any form attribute). It defines JavaScript regular expression for the field whose value must be checked. Pattern facilitates us to apply a separate check of codes, account numbers, and so on. Pattern features are extensive, and here is just one simple example using the product number.

PRODUCT NUMBER:

< label > PRODUCT NUMBER: < input pattern = "{3}" name = "product" type = "text" title = "Single Digit Followed by Three Uppercase Letters."/ > < / label >

This template prescribes that the product number must be one digit followed by three capital letters (3). You can see more templates on the HTML5 templates website, where there is a list of conventional regular expressions of style templates in order to help you start working with them.

As in the case of Required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 and Chrome 5+ are the only browsers that currently support templates. However, the rest will come back soon because of the rapid promotion of the browser market.

List and DataList elements

The LIST attribute gives the user the ability to associate the list of options with a separate field. The List list attribute value should be the same as the DataList element ID in the same document. The DataList element for HTML5 is new and represents a predefined list of options for form controls. It works similarly to intrabauric search fields, automatically complementing words when entering text.

The following example shows how List and DataList are combined.

Your Favorite Fruit: If Other, Please Specify:

< 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 the Select element in DataList, you can provide excellent degradation, simply applying the Option element. Here is the template of the elegant markup created by Jeremy Kate (Jeremy Keith), ideal for the principles of gradual degradation of HTML5.

Your Favorite Fruit:

< 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 >

List and DataList browser support is currently limited to Opera 9.5+, Chrome 20+, Internet Explorer 10 and Firefox 4+.

multiPle

You can promote your List and DataList on step forward by applying the Multiple boolel attribute so that you can enter more than one value from the list of data. Here is an example.

Your Favorite Fruit:

< 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. An further example of using multiple can be email addresses when sending elements to a friend or file attachments, as shown here:

Upload Files:

< 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.

NOVALIDATE and FORMNOVALIDATE attributes indicate that when sending a form, you do not need to check the correctness of the data. They are both - boolean attributes. Formnovalidate can be applied to INPUT-AM with a type of submit or image. The NOVALIDATE attribute can be installed only to the Form element.

An example of using the formovalidate attribute can be shown on the "Save draft" button, where the form has fields needed to send drafts, but not required to save the draft. NOVALIDATE will be applied in cases where you do not need to make form validation, but you need to achieve the advantages of a more convenient user interface offered by new data entry types.

The use of Formnovalidate can be seen in the following example:

Email:

< form action = "process.php" > < label for = "email" > Email:< / label > < input type = "text" name = "email" value = "\u003ca href \u003d"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e19110c1a113e1b061f130e121b501d1113">[Email Protected]" > < input type = "submit" formnovalidate value = "Submit" > < / form >

And this example shows the application of Novalidate:

Email:

< form action = "process.php" novalidate >

Attributes provide additional information about the element, while they are always defined in the initial tag, regardless of the pair, this is a tag or single.

In HTML there are a number of attributes that universal and can be applied to almost any tags, therefore the attributes included in this group are called global attributes.

Global attributes will often meet in the examples of this textbook, I suggest you to repeat the attributes that we have already considered and familiarize yourself with the global attributes that will be considered in the nearest articles:

Questions and Tasks on the topic

Before moving to the study of the following theme, pass a practical task:

Tip: Do not forget to determine the language of the page and items where it is required. After you perform an exercise Inspect the page code by opening an example in a separate window to make sure that you are executed correctly.

At HTML5, although all modern browsers are already supporting this standard. As of December 2011, the standard is still in a state of development.

In HTML5 adds many new syntactic features -

and . These elements are designed to make it easier to implement and manage graphic and multimedia objects on the web without having to turn to its own plugins and APIs. Other new elements such as

,

,

and