• Choose a category
• All
• Classic-Fiction

number

id = ”number”

min = ”0”

max = ”10”

step = ”2”

value = ”5” />

range

id = ”range”

min = ”0”

max = ”10”

step = ”2”

value = ”5” />

date

time

Nothing surprising in these elements, but the new capabilities are interesting:

♦ E-mail: An email input element is optimized for accepting e-mail addresses. Some browsers may incorporate format-checking for this type. Mobile browsers may pop up specialized keyboards (making the @ sign more prominent, for example) when a user is entering data into an e-mail field.

♦ Url: Like an email input element, a url input element creates a field for entering links. Usually, the url input element doesn’t have any particular formatting, but it may have a specialized pop-up keyboard in mobile devices.

♦ Number: A number input element specifies a numeric field. If you designate a field a number input element, you can indicate maximum (max) and minimum (min) values as well as a step value that indicates how much the data will change. Some browsers will check to see that the data is within the given range, and some will add a visual component that allows a user to select a number with small arrow buttons.

♦ Range: A range input element is similar to a number input element, but browsers that support it often use a small scrollbar to simplify user input.

♦ Date: Dates are especially difficult to get accurately from a user. By using a date input element, a date field can show an interactive calendar when a user begins to enter a date. Figure 8-2 illustrates this field in action.

♦ Time: By using the time input element, a time field can show a small dialog simplifying the process of retrieving time information from a user.

Figure 8-2: When a user enters a date, a small calendar appears.

These effects aren’t guaranteed. Different browsers will respond differently. Right now, Opera is the only browser that supports these features. However, since the effects are all variants of the input element, you can use these tags without penalty in earlier versions of HTML and XHTML. Any browser that does not understand these fancier form elements will simply replace them with ordinary text input fields.

Using Embedded Fonts

Technically, it’s not part of HTML 5, but the new browsers have another great feature: embeddable fonts. Until now, there was no reliable way to use an arbitrary font in a Web page. You could suggest any font you wished, but that font would only work if the user already had it installed on her computer.

The current crop of browsers finally supports an embedded font technique that allows you to post a font file on your server and use that font in your page (much like the background image mechanism). This means you can finally have much better control of your typography on the Web. Figure 8-3 illustrates a page with an embedded font.

Figure 8-3: The fonts are embedded directly into the page.

The code for including a font is not difficult. Take a look at the code for embeddedFont.html to see how it’s done:

Embedded Font Demo

Here’s another custom font

Here’s how you do it.

1. Identify your font: Find a font file you want to use. Most commercial fonts are licensed for single-computer use, so stick with open font formats, such as the ones you’ll find at http://openfontlibrary.org.

2. Pick a font format: Unfortunately, this part of the standard is still