tailieunhanh - giới thiều ebook HTML5 và CSS3 in the real world phần 4

Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 4', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | HTML5 Forms 63 Figure . . and in Google Chrome Styling Required Form Fields You can style required form elements with the required pseudo-class. You can also style valid or invalid fields with the valid and invalid pseudo-classes. With these pseudo-classes and a little CSS magic you can provide visual cues to sighted users indicating which fields are required and also give feedback for successful data entry input required background-image url . images input focus invalid background-image url . images input focus valid background-image url . images We re adding a background image an asterisk to required form fields. We ve also added separate background images to valid and invalid fields. The change is only apparent when the form element has focus to keep the form from looking too cluttered. Beware Default Styles Note that Firefox 4 applies its own styles to invalid elements a red shadow as shown in Figure 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 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 element 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