HTML5 Forms

You can style required form elements with the:requiredpseudo-class. You canalso style valid or invalid fields with the:validand:invalidpseudo-classes. Withthese pseudo-classes and a little CSS magic, you can provide visual cues to sightedusers indicating which fields are required, and also give feedback for successfuldata entry.
Nội dung trích xuất từ tài liệu:
HTML5 Forms HTML5 Forms 63 Figure 4.3. … and in Google ChromeStyling Required Form FieldsYou can style required form elements with the :required pseudo-class. You canalso style valid or invalid fields with the :valid and :invalid pseudo-classes. Withthese pseudo-classes and a little CSS magic, you can provide visual cues to sightedusers indicating which fields are required, and also give feedback for successfuldata entry: 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); }We’re adding a background image (an asterisk) to required form fields. We’ve alsoadded separate background images to valid and invalid fields. The change is onlyapparent when the form element has focus, to keep the form from looking toocluttered. Beware Default Styles Note that Firefox 4 applies its own styles to invalid elements (a red shadow), as shown in Figure 4.1 earlier. You may want to remove the native drop shadow with the following CSS: :invalid { box-shadow: none; }64 HTML5 & CSS3 for the Real World Backwards Compatibility Older browsers mightn’t support the :required pseudo-class, but you can still provide targeted styles using the attribute selector: input:required, input[required] { background-image: url(../images/required.png); } You can also use this attribute as a hook for form validation in browsers without support for HTML5. Your JavaScript code can check for the presence of the required attribute on empty elements, and fail to submit the form if any are found. The placeholder Attribute The placeholder attribute allows a short hint to be displayed inside the form ele- ment, space permitting, telling the user what data should be entered in that field. The placeholder text disappears when the field gains focus, and reappears on blur if no data was entered. Developers have provided this functionality with JavaScript for years, but in HTML5 the placeholder attribute allows it to happen natively, with no JavaScript required. For The HTML5 Herald’s sign-up form, we’ll put a placeholder on the website URL and start date fields: register.html (excerpt) My website is located at: ⋮ Please start my subscription on: HTML5 Forms 65Because support for the placeholder attribute is still restricted to the latest crop ofbrowsers, you shouldn’t rely on it as the only way to inform users of requirements.If your hint exceeds the size of the field, describe the requirements in the input’stitle attribute or in text next to the input element.Currently, Safari, Chrome, Opera, and Firefox 4 support the placeholder attribute.Polyfilling Support with JavaScriptLike everything else in this chapter, it won’t hurt nonsupporting browsers to includethe placeholder attribute.As with the required attribute, you can make use of the placeholder attribute andits value to make older browsers behave as if they supported it—all by using a littleJavaScript magic.Here’s how you’d go about it: first, use JavaScript to determine which browsers lacksupport. Then, in those browsers, use a function that creates a “faux” placeholder.The function needs to determine which form fields contain the placeholder attrib-ute, then temporarily grab that attribute’s content and put it in the value attribute.Then you need to set up two event handlers: one to clear the field’s value on focus,and another to replace the placeholder value on blur if the form control’s value isstill null or an empty string. If you do use this trick, make sure that the value ofyour placeholder attribute isn’t one that users might actually enter, and rememberto clear the faux placeholder when the form is submitted. Otherwise, you’ll havelots of “(XXX) XXX-XXXX” submissions!Let’s look at a sample JavaScript snippet (using the jQuery JavaScript library forbrevity) to progressively enhance our form elements using the placeholder attribute. jQuery In the code examples that follow, and throughout the rest of the book, we’ll be using the jQuery1 JavaScript library. While all the effects we’ll be adding could be accomplished with plain JavaScript, we find that jQuery code is generally more readable; thus, it helps to illustrate what we want to focus on—the HTML5 APIs—rather than spending time explaining a lot of hairy JavaScript.1 http://jquery.com/66 HTML5 & CSS3 for the Real World Here’s our placeholder polyfill: register.html (excerpt) if(!Modernizr.input.placeholder) { $(input[placeholder], textarea[placeholder]).each(function() { if($(this).val()==){ $(this).val($(this).attr(placeholder)); $(this).focus(function(){ if($(this).val()==$(this).attr(placeholder)) { $(this).val(); $(this).removeClass(placeholder); } }); $(this).blur(function(){ if($(this).val()==){ $(this).val($(this).attr(placeholder)); $(this).addClass(placeholder); } }); } ...