diallo
Uploaded by
42 SLIDES
569 VUES
420LIKES

Enhancing HTML5 Forms with New Input Types and Validation Techniques

DESCRIPTION

This guide explores the latest improvements in HTML5 forms, focusing on new elements and attributes that enhance user experience and validation. Key topics include the use of the required attribute to ensure necessary fields are filled, styling required elements with pseudo-classes, and introducing new input types such as email, URL, and number. It highlights the importance of backward compatibility, the use of the placeholder attribute for guidance, and advanced features like the pattern attribute for custom validation. Enhance your web forms for better consistency and user engagement.

1 / 42

Télécharger la présentation

Enhancing HTML5 Forms with New Input Types and Validation Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

Playing audio...

  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

More Related