HTML5 and CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 4Forms

3. Improvements • New form elements • Assist with validation • Consistency across sites • Changes reduce the need for common JavaScript improvements

4. Sign Up Form • The HTML Herald has a sign up form that collects user data.

5. Element Attributes

6. The required Attribute • An empty or invalid field will prevent the form from being submitted • Simply add a “required” attribute • required • required=“required” • aria-required=“true” • Require name, email, password, start date

7. Styling required elements • The :required pseudo-class can be used to style form elements input:required { background-image: url(required.png); } input:invalid{ background-image: url(invalid.png); } input:valid{ background-image: url(valid.png); }

8. Default element styles • Default element styles may differ between browsers (Firefox 4) • Firefox 4 applies a red shadow to invalid elements • Disable this style: :invalid { box-shadow: none; }

9. Backward Compatibility • Older browsers might not support the :required pseudo-class • Use the attribute selector input:required, input[required] { background-image: url(…); }

10. The placeholder attribute • Allows a short hint inside the form element • Text disappears when the element gains focus and reappears when the element loses focus if no data has been entered • Add placeholder text for website and start date

11. JavaScript placeholders • JavaScript can be used in browsers that don’t support the placeholder attribute

12. Break before regular expressions • 9:15pm

13. The pattern attribute • Constrains input to an expected pattern • Regular expression syntax • “title” attribute can be used to explain requirements • Require passwords of at least 6 characters • \${6,}

14. The disabled attribute • Disabling an element prevents user input or changing an element’s value • Disabling a fieldset disables all elements within the fieldset • Disabled elements are not submitted with the form • JavaScript can disable the submit button until all fields are filled out • Use the :disabled pseudo-class

15. The readonly attribute • Similar to disabled – not editable • Values are submitted with the form • Reveals to the user data that’s being collected, but ensures it hasn’t been changed

16. The multiple attribute • Applies to the select, email and file elements • Select more than one file • Specify multiple email addresses separated by commas (or spaces)

17. The form attribute • Not the form element • Associates an element or fieldset with a form, though it’s not nested within the form element

18. The autocomplete attribute • Dropdown appears when the user begins typing • For password fields, allows the browser to save the password • Defaults to being “on”, set to “off” to disable • Disable for sensitive data

19. The datalist element • Provides a list of autocomplete suggestions • Associated with an element using the list attribute on the input • One datalist can be attached to multiple input elements

20. The autofocus attribute • Specifies an element that should receive focus as soon as the page loads • Only specified on a single element • The name element will receive the initial focus

21. New Form Input Types

22. Pre-HTML5 • button • checkbox • file • hidden • image • password • radio • reset • submit • text

23. Search • “search” specifies a text input control that is used for search terms • Stylistically distinct from text input elements

24. Email Addresses • “email” specifies one or more email addresses • Mobile devices can display a keyboard customized for email address entry • Browsers can validate the input looks like an email address • Require an email address in the email field

25. URLs • “url” specifies a web address • Mobile devices can display a keyboard customized for web address entry • Browsers can validate the input looks like a web address • Require a web address for the web site field

26. Telephone Numbers • “tel” specifies a telephone number • placeholder and pattern attributes can provide instruction and validation, but the browser will not validate the format

27. Numbers • “number” specifies numeric input • Displays a “spinner” box to adjust the value • min and max attributes limit the range of acceptable values • The step attribute provides the bump value for the spinner buttons • Mobile devices may display a number touchpad instead of a full keyboard

28. Ranges • “range” specifies the use of a slider control • min, max, and step attributes control the range and steps for the slider • Similar to a number field, but lacks necessary precision • Customer satisfaction survey • Default value is the midpoint of the slider

29. Colors • “color” specifies a color value field • Generates a hexidecimal color value • #FF3300

30. Dates and Times • “date”, “datetime”, “date-time-local”, “month”, “time” and “week” specify a time value • ISO 8601 standard • yyyy-mm-ddThh:mmZ (datetime) • yyyy-mm (month) • yyyy-W01 to yyyy-W52 (week) • Change the startdate field

31. Non-supporting Browsers • Any unsupported fields appear as text fields • placeholder text can be used to indicate what content should be entered

32. New Form Controls

33. The output element • output element displays a calculated value • Typically updated using JavaScript • Shopping cart total

34. The keygen element

35. New Form Attributes

36. The novalidate attribute • Allows use of validation attributes on fields (e.g. required, pattern) without actually performing validation before submitting a form

37. The action attribute • No longer required • Defaults to the current page

38. The autocomplete attribute • Applies the autocomplete attribute to all elements within the form • Can be overridden on individual elements

39. Form Element Changes

40. Multilevel select menus • Specifying an optgroup as the child of another optgroup will create a multilevel select menu

41. textarea Changes • Formerly the rows and cols attributes controlled the size of the field • Size should now be specified using CSS • wrap attribute inserts line breaks into submitted input • soft – submit line breaks entered by the user • hard – submit line breaks created by wrapping text in the browser

42. Form Validation Warning • Form content can be validated in the web browser • Form content still must to be validated on the server • When your server receives your form’s input, it may not have come from your web page • Browser validation only speeds things up for the user