Front End Formations: Level 3

Notes from Code School's Front End Formation: Level 3

New Input Types

Search

Email

URL

Tel

Number / Range

Date / Month / Week

Time / Datetime / Datetime-local

Color

Note: If the browser doesn't support the input type, it defaults to text.

Search

Search represents a one-line plain text edit control entering one or more search terms. -W3C

search text box HTML5

e.g.

<input type="search" />

In mobile browsers you get added usability, the primary action button changes to search which reinforces what the user is doing.

HTML5 input type search adds Search button on mobile

Email

The email input looks just like a regular text input, but with added usability on mobile devices.

e.g. 

<input type="email" />

On mobile you get useful email related keys, like the @ symbol and period (.)

mobile Safari output for input type="email"

URL

Again, looks like a regular text input, but gives you added mobile usability.

<input type="url" />

mobile Safari input type URL output

Date

date represents a control for setting the element's value to a string representing a date. -W3C

<input type="date" />

mobile Safari date picker

desktop date picker

Tel

Looks like text, but with added mobile usability.

<input type="tel" />

mobile Safari screen when input type tel is used

Number

Number represents an precise control for setting the element's value to a string representing a number. -W3C

e.g.
<input type="number" />

Output is a number picker.

desktop browser output of number picker

mobile Safari number picker

Range

Range is an imprecise input to control the range of a number. e.g.

<input type="range" />

range input shows user a slider element to pick a number range

Month, Week

The month and week input types bring up a date picker that allows you to pick either a month or a week at once.

e.g.

<input type="month" />

<input type="week" />

left: month input type allows user to choose a month selection block; right: week input 

Time, Datetime-local

<input type="time" />

<input type="datetime-local" />

Datetime local vs. Datetime

Date-time local represents a control for setting the element's value to a string representing a local date and time (with no timezone reference). -W3C

 i.e. Datetime includes timezone information, datetime local does not.

datetime-local (no timezone info.) vs. datetime (includes timezone info.)

Color

Color lets you set a string that represents a color. e.g.

<input type="color" />

input type color allows user to pick a color using a UI color picker

New Form Elements

• datalist
• keygen
• output

Datalist

The datalist element allows you to set predefined options that you can use with other controls.

How to use: First specify an input type

<input type="text" list="browsers" />

Next, create your datalist. The list element and the datalist id MUST match.

<datalist id="browsers">

  <option value="chrome">

  <option value="Firefox">

  <option value="Internet Explorer">

</datalist>

The input looks like a text input, but when you start typing the datalist options will appear and you can autocomplete.

Datalist attribute allows user to use autocomplete on predefined options

New Form Attributes

• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• novalidate
• form novalidate
• form
• formaction
• form enctype
• form method
• form target

Placeholder

Placeholder allows you to show a message inside the input and is hidden when the user starts typing, and then returns if the input box becomes blank again.  Placeholder text appears slightly grayed out.

Placeholder text appears slightly grayed out in the input box

HTML 4.01 and earlier:

<input type="text" value="enter your email..." />

HTML 5:

<input type="text" placeholder="Enter your email..." />

Autofocus

The autofocus attribute will automatically focus the specified input when the page is rendered.

To use, add the autofocus attribute to the input you want to automatically focus on. E.g.

<input type="text" autofocus />

Required

If you add the required attribute to an input, when the form is submitted, the user will be notified of an error if the field is left blank. E.g.

<input type="text" required />

Pattern

The pattern attribute accepts a JavaScript regular expression that can be used to validate a form field to match the pattern. E.g.

<input type="text" pattern="[0-9]{3}" />