HTML5 AND CSS3Neal Stublen

nstublen@jccc.edu

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.

Element Attributes

The required Attribute An empty or invalid field will prevent the

form from being submitted Simply add a “required” attribute

requiredrequired=“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

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

disableDisable for sensitive data

The datalist element Provides a list of autocomplete

suggestions Associated with an element using the list

attribute on the inputOne 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

New Form Input Types

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 precisionCustomer 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 valueISO 8601 standardyyyy-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

New Form Controls

The output element output element displays a calculated

value Typically updated using JavaScript

Shopping cart total

New Form Attributes

The novalidate attribute Allows use of validation attributes on

fields (e.g. required, pattern) without actually performing validation before submitting a formPerhaps because you’re going to perform

your own validation

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

Form Element Changes

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 inputsoft – submit line breaks entered by the userhard – 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 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