HTML 5 Form Elements

Now that you have learnt about HTML form elements in versions prior to HTML5, it's time to learn what's new. And there are quite a lot of exciting new features you can implement. It doesn't make sense not to implement them right now, as in most cases you'll just get a plain old text box if a browser doesn't support the new element. The HTML 5 elements and attributes we'll explore are:

Placeholder
Required
Email
Url
Number
Range
Date/Time
Search
Color

In the examples that follow, it's better to create a new HTML page, rather than use the one you have. Save it with the name html5_forms.html. The best browser to use for these examples is Opera, as the latest version of this browser supports most of the new form elements. Internet Explorer is probably the worst, in terms of support for HTML 5 form elements (we tested with version 9 of IE). But the HTML 5 form elements were tested on the following browsers (or later versions):

Google's Chrome Version 12
Firefox Version 10
Internet Explorer Version 9
Opera Version 11
Safari Version 5

The first HTML 5 form elements we'll take a look at are Placeholder and Required, which are attributes rather than a real form element.

The Placeholder and Required Attributes

The PLACEHOLDER attribute

There's quite a neat new attribute you can add to your text boxes called PLACEHOLDER. This is default text that disappears when you click inside a text box. Try the following:

<FORM>

</FORM>

The word PLACEHOLDER does not have to be in capitals, as like just about every HTML element it is not case sensitive. After an equal sign, you type the text you want to appear in your text box, surrounded by quotation marks.
Save your work and test the form out in a browser (preferably Opera). When the form first loads you'll see this:

Click inside the text box and the placeholder text immediately disappears:

The PLACEHOLDER attribute works on all the new text boxes you are about to see. If your user has an older browser they either won't see the placeholder text at all, or it just won't disappear when they click inside the box.

The REQUIRED attribute

If you want a text box to be filled in, you can use the REQUIRED attribute:

<FORM>

</FORM>

You just type the word REQUIRED, with no equal sign or text after it.
Test it out in your browser. Don't click inside of your text box, but just click your submit button. In the latest editions of Firefox, you should see something like this:

In Google's Chrome, you'll see this:

So the browser has not submitted the form, but displayed a popup box asking the user to fill out the text box. Opera, Internet Explorer and Safari don't recognize the REQUIRED attribute, however, and just submit the form. So you shouldn't rely on it. Internet Explorer versions 9 and lower don't even recognise the PLACEHOLDER attribute, the only one of the big five browsers not to do so!

The Email, URL, and Search text boxes

The Email Text Box

HTML5 introduces an email text box. This text box checks for a valid email address. Instead of TYPE="Text" you use TYPE="Email". Here's the code to try:

<FORM>

</FORM>

An older browser that doesn't recognise TYPE="Email" will just display a normal text box. So you may as well use the new email TYPE right now, if you need to.
Again, though, browser support is patchy. Only Google Chrome and Firefox support the Email text box. Even then, Firefox lets meme@memecom through, when it should be .com on the end. (Chrome picks this error up and doesn't submit the form.)

The URL Text Box

A URL is a website address, usually with http:// at the front of www. HTML 5 introduced a text box for a URL. Here is the code to try. Notice the type is now URL:

<FORM>

</FORM>

At the time of writing, only Firefox and Chrome support the URL text box, popping up a message when you don't type the full address (complete with http:// at the front).

Search Boxes

The search box, despite its name, doesn't actually search for anything. All it does is to put an X on the right hand side of a text box. You click on the X and the text in the text box disappears. It's for when you make a mistake and want to start again. The search box only works in Chrome and Safari, at the time of writing. The HTML code is this:

SEARCH: <INPUT TYPE="Search">

In Safari on a windows machine, you'll see this when you type in the text box:

For OS X users the above box will have rounded corners. Browsers that don't support the search box are just normal text boxes without the X. So you can TYPE="Search" instead of TYPE="Text", if you like. At least your Chrome and Safari users will be happy!

Spinners and Sliders

Two other HTML5 controls you can add to forms are spinners and sliders. Sadly, though, only Opera and Chrome support the spinner. A spinner allows you to increase or decrease a number in a box by clicking little up and down arrows. They look like this in the Opera browser:

The HTML code for the spinner box looks like this:

The TYPE is "Number". The MIN and MAX are the start and end values you want for the box. In other words, a user can't go higher than 10 or lower than 0. The STEP attribute is the increase or decrease in value when you click on the arrows. In our code above, we go up in steps of 2 (2, 4, 6, 8, 10). The VALUE is the default that appears in the box when the page loads, and also the value that is returned when the form is sent. SIZE refers to how wide you want the box.
Sliders work in the Opera, Chrome and Safari browsers. They look like this:

You can move the slider left or right to change the value. The HTML code is this:

The TYPE is "Range". The other attributes are the same as for the spin box.

Dates, Times, Color Picker

Dates and Times

You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera browser does this. Here's what it looks like:

Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the future. The HTML for the above calendar is this:

The TYPE is "Date", but you can have other TYPES:

TYPE="Date"
TYPE="Month"
TYPE="Week"
TYPE="Time"
TYPE="Datetime"
TYPE="Datetime-local"

All the other browsers will just show you a blank text box in place of the TYPEs above.

Colour Picker

Another form element you can add is a Colour Picker. This will be of limited use, and only the Opera browser has implement it. The HTML code is this:

In the browser, it looks like this:

Again, it will just end up as a plain text box, if a browser doesn't support it.

Data Lists in HTML 5

Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list of options, only the dropdown part doesn't appear until you start typing. The items on your list then appear, allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here's what it looks like before you start typing:

So it looks like just a normal text box.
However, when you click inside of the text box and type a letter, you'll see this in Firefox:

The items on your list will appear.
When you select an item, you change the value:

The HTML5 code for the above Data List is this:

</DATALIST>

You still have an INPUT TYPE. This one is Text. Notice the LIST attribute, though. You need this to match the ID of the DATALIST tag.
DATALIST comes after the INPUT code, and has a closing DATLIST tag. For each item on your list you have a VALUE and a LABEL. The LABEL is the text that appears on the list. The VALUE is what it changes to when an item is selected. It is also the value that gets sent when the form is processed.
Note that in the Opera browser, you'll see this as soon as you click inside of the Data List:

So the VALUE and LABEL are displayed, which could be helpful.
What is not helpful is Safari's treatment of Data Lists - everything after your Data List tags will be hidden. So if you have a Submit button after a Data List, Safari users won't see it! One workaround is to put an end tag for all your OPTIONS:

The Submit button will then reappear. The Data List won't, though.
And that's it for HTML5 form elements. Try them out in different browsers, and see what works and what doesn't. Don't forget to add some CSS to liven up your form elements!

Laying out your HTML Forms

Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn't. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you'd find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we've created called form_layout.html. This is in the extra_files/layouts folder that came with this book. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)
When you open up the above page, you'll see a form that looks like this:

The form elements are nicely lined up on the left, and the right (except for the last name text box).
Open up the HTML code for the page and you'll see this:

The TABLE tags are the ones to concentrate on. We've used COLSPAN a lot, here, to get the layout we wanted. We've also added CSS style with class name like "R1C1". (This just means Row 1, Column1.)
Essentially, though, we had a table that had 4 columns and 5 rows. To get the Email row we have two TD tags inside a pair of TR tags. The first TD is just the text "EMAIL", with some styling applied. The second one uses COLSPAN=3. If we didn't do this then the email text box would be squashed into the second cell of the second row. So we "SPAN" this cell across 3 columns. The rest of the table uses the same COLSPAN manipulation.
The Stylesheet for the HTML is called form_layout_1.css. Take a look at the CSS code and see if you can figure out what's going on (it's in the extra_files/css folder. It might help to make a copy of this file, and the experiment with it by changing the values to see what happens.
For some more ideas and help with your form design, these pages are worth a look:

http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
http://skyje.com/2010/05/web-form-design/

HTML 5 Video and Audio

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:

This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:

However, Google does produce the code for you, and all you need to do is copy and paste it.
Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in particular.) Even for those that do, you need a plugin to watch the video.
So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing, though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at all. With those caveats in place, let's take a further look at the video tag.

Video Formats and Codecs

The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM. But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as container files. That's because a video is a combination of separate files, such as the video itself and sound tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language, video title, and a whole lot more.
The moving images part of the video will be encoded using programming code known as an algorithm. This algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264, Theora, and Google's VP8.
As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis.
(It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the encoder and decoder software.)
With all these different video and audio combinations, you won't be surprised to learn that browser support is patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads won't be able to see it.
Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE sub-tag lets you specify more than one container format. Take a look at this example:

<VIDEO>

</VIDEO>

The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it only recognises one SOURCE tag. Newer version of the iPad may well correct this bug.
Notice the TYPE attribute above, though. It is split in to three parts:

TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '

You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The codecs need their own quote marks, which are double quotes above. You can do it the other way round, though:

TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "

In the line above double quotes are on the outside and single quotes on the inside.
For more information on the VIDEO tag, see this page:

http://diveintohtml5.info/video.html

Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert your videos and provide the code to copy and paste into your web page.

HTML 5 AUDIO

If you only want sound, and no video, then the new AUDIO tag is the one to use. The HTML is similar to the VIDEO tags, in that you specify a list of audio file formats. For example, take a look at the following code:

<AUDIO>

</AUDIO>

Between the two AUDIO tags we have three SOURCE tags like before. This time, however, you don't need any codec information. The browser will try to play the first song on the list above. If the format is not supported, then it will try to play the second song.
You can add some attributes to the AUDIO tag:

AUTOPLAY
LOOP
CONTROLS
PRELOAD

AUTOPLAY takes the value true or false. Setting AUTOPLAY to true means the song would start playing by itself in the browser, which can be annoying. LOOP means that the song will start all over again after it has finished. Again, the values true and false can be used. Using the CONTROLS attribute with a value of true will get you the browser's in-built audio controls. They look like this in Internet Explorer 9:

The PRELOAD attribute takes three values: none, auto, and metadata. PRELOAD refers to the audio file itself. When you set it to none the browser won't preload the file at all. Set it to auto and the browser will decide for you, whereas a setting of metadata will load things like song title, album, artist, etc.
Here's an example of the AUDIO attributes:

</AUDIO>

If you tried the above code in Firefox then the Ogg file format would play, because Firefox doesn't support the MP3 format, due to licensing issues.
For browsers that don't support the AUDIO tag at all, then you can add some text to the above code:

<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG.

</AUDIO>

The point about the AUDIO and VIDEO tags, however, is that they work in the browser and don't need the end-user to download any third-party plugins. Here's a summary of the new tags used in this chapter.

The HTML 5 Canvas Tag

One tag new to HTML5 is the Canvas tag. The Canvas tag is a blank space on which you can draw anything you like. You can add images to a Canvas, animate your shapes, add text, and a whole lot more besides.
To get the most out of the Canvas tag, however, you need to be able to code using Javascript. Another disadvantage is that not all browsers support the Canvas tag, especially versions of Internet Explorer below version 9. You can, however, write some quite sophisticated browser apps and games using just the Canvas tag and Javascript, and all without plug-ins like Adobe's Flash. To get an idea of the things you can do, take a look at these pages:

http://www.html5canvastutorials.com/category/showcase/
http://developers.facebook.com/html5/showcase/

To draw a Canvas, all you need is these two tags in the BODY of your HTML pages:

</CANVAS>

You can specify a height and width for your canvas:

</CANVAS>

If you don't specify a height and width, the canvas will be 300 pixels in width and 150 pixels in height.
The canvas is entirely transparent. If you want it to have, say, a border, you can use some CSS:

<STYLE>

CANVAS {

border: 1px solid #000000;

}

</STYLE>

To do something useful with your canvas, you need to give it an ID. Once it has an ID, you can get a reference to it with Javascript.

</CANVAS>

In the code below, we use "MyCanvas" to place the canvas ID into a variable (memory storage area):

var canvasID = document.getElementById("MyCanvas");

</SCRIPT>

You then to specify how you're going to be using your canvas, 2D or 3D:

var canvas = canvas.getContext("2d");

Once you have a reference to your canvas, and a context, you're ready to begin drawing on it. Obviously, this is a complex subject, and a whole book in itself. If you want to explore further, try this page on Mozilla's site:

https://developer.mozilla.org/en/Canvas_tutorial

The Details, Aside, and Mark tags

The HTML 5 Details Tag

The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at the image below:

When a user clicks the above message, the following information is revealed:

Clicking the summary will hide the above message.

The Details tag is used like this:

<SUMMARY>Click here for further information</ SUMMARY >

<P>
Further information is revealed when a user clicks the summary
<BR>
Click the summary again to hide this message.

</ DETAILS >

In between two Details tags, you add a pair of Summary tags. The summary is the part that is shown to the user. Details can then be added below the Summary tags.
Sadly, only the Chrome browser supports the Details tag at the time of writing. Browsers that don't support the Details tag will simply display the whole of the information you added between the two tags, including the summary.

The HTML 5 ASIDE Tag

The Aside tag is used for material related to the text of your article, but doesn't quite fit in. Think of it as additional material you would like to relay to your readers. You can format an ASIDE tag with CSS, so that it stands out from the main text. Here's an example:

<P>
Main article text here
</P>

<ASIDE>We've missed out other ARTICLE tags</ASIDE>

</ ARTICLE>

The code above shows that we have a main article. We've some HTML5 tags out, however, and want to convey that to our readers. Hence the pair of ASIDE tags.

The HTML 5 MARK Tag

The Mark tag is used to mark out text that you want to highlight. The marked text is then formatted with a yellow background. The Mark tag is used like this:

The discount for this item is <MARK>20%</MARK>, not 10%.

When the above line is formatted, it might look like this in a browser:

Note the yellow background behind the text we have marked out.

HTML5 Video Tags

HTML5 Video Tags	Comments
VIDEO	The main tag to add a video
SOURCE	Add a source attribute
SRC	Specify where the video is
TYPE	Add codex values

HTML5 Audio Tags

HTML 5 Audio Tags	Comments
AUDIO	The main tag to add audio
SOURCE	Add a source attribute
SRC	Specify where the video is
TYPE	The main tag to add audio

HTML5 Options for the Audio Tag

Audio Attributes	Values
AUTOPLAY	true or false
LOOP	true or false
CONTROLS	true or false
PRELOAD	none, auto, metadata

Developers Study Center

Search This Blog

HTML Section 9; HTML5 and Forms

HTML 5 Form Elements

The Placeholder and Required Attributes

The PLACEHOLDER attribute

The REQUIRED attribute

The Email, URL, and Search text boxes

The Email Text Box

The URL Text Box

Search Boxes

Spinners and Sliders

Dates, Times, Color Picker

Dates and Times

Colour Picker

Data Lists in HTML 5

Laying out your HTML Forms

HTML 5 Video and Audio

Video Formats and Codecs

HTML 5 AUDIO

The HTML 5 Canvas Tag

The Details, Aside, and Mark tags

The HTML 5 Details Tag

The HTML 5 ASIDE Tag

The HTML 5 MARK Tag

HTML5 Video Tags

HTML5 Audio Tags

HTML5 Options for the Audio Tag

Comments

Post a Comment