1. Neal Stublen nstublen@jccc.edu

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.

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

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

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

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

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

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

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

19. 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. Pre-HTML5  button  checkbox  file  hidden  image  password  radio  reset  submit  text

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

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

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

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

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

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

28. Colors  “color” specifies a color value field  Generates a hexidecimal color value #FF3300

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

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

32. The output element  output element displays a calculated value  Typically updated using JavaScript Shopping cart total

34. The novalidate attribute  Allows use of validation attributes on fields (e.g. required, pattern) without actually performing validation before submitting a form Perhaps because you’re going to perform your own validation

35. The action attribute  No longer required  Defaults to the current page

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

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

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

40. Form Validation Warning  Form content can be validated in the web browser  Form content still must to be validated on the server  Why? 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