420 likes | 554 Views
Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 4 Forms. Improvements. New form elements Assist with validation Consistency across sites Changes reduce the need for common JavaScript improvements. Sign Up Form. The HTML Herald has a sign up form that collects user data.
E N D
Neal Stublen nstublen@jccc.edu HTML5 and CSS3
Improvements • New form elements • Assist with validation • Consistency across sites • Changes reduce the need for common JavaScript improvements
Sign Up Form • The HTML Herald has a sign up form that collects user data.
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
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); }
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; }
Backward Compatibility • Older browsers might not support the :required pseudo-class • Use the attribute selector input:required, input[required] { background-image: url(…); }
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
JavaScript placeholders • JavaScript can be used in browsers that don’t support the placeholder attribute
Break before regular expressions • 9:15pm
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,}
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
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
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)
The form attribute • Not the form element • Associates an element or fieldset with a form, though it’s not nested within the form element
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
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
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
Pre-HTML5 • button • checkbox • file • hidden • image • password • radio • reset • submit • text
Search • “search” specifies a text input control that is used for search terms • Stylistically distinct from text input elements
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
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
Telephone Numbers • “tel” specifies a telephone number • placeholder and pattern attributes can provide instruction and validation, but the browser will not validate the format
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
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
Colors • “color” specifies a color value field • Generates a hexidecimal color value • #FF3300
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
Non-supporting Browsers • Any unsupported fields appear as text fields • placeholder text can be used to indicate what content should be entered
The output element • output element displays a calculated value • Typically updated using JavaScript • Shopping cart total
The novalidate attribute • Allows use of validation attributes on fields (e.g. required, pattern) without actually performing validation before submitting a form
The action attribute • No longer required • Defaults to the current page
The autocomplete attribute • Applies the autocomplete attribute to all elements within the form • Can be overridden on individual elements
Multilevel select menus • Specifying an optgroup as the child of another optgroup will create a multilevel select menu
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
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