HTML forms are centered around the humble but flexible input element. HTML5 adds a number of very useful forms of input that help turn HTML into a more modern user-interface tool.
Although support for these tags is not universal, it's safe to begin using them now. Any browser (even IE6) that doesn't understand the advanced input types will revert to input type = "text", which will still work exactly as expected (although not with the validation and user-interface improvements of the newer tags).
The standard indicates that the various types will be supported, but the exact way the elements are supported may vary from browser to browser. For example, the e-mail field may look just like an ordinary text field to a user on a standard desktop computer, but the virtual keyboard on a mobile device might change to include the @ when it encounters an e-mail field.
Most of these specialty fields support validation, so at a minimum, it's useful to set an :invalid CSS style so the user can tell if the data is in the field. Here are the input types with sample coding:
color: Allows the user to choose a color using standard web formats — recognized color names (yellow) and hex values preceded by a # symbol (#FF0033).
<input type="color"
id = "color" />
date: Some browsers (Firefox 3.5) display a text field, others (Opera 10) display a special calendar control, still other browsers (Chrome) include both text and a pop-up calendar. If the date is entered by text, it must be entered in a yyyy-mm-dd format:
<input type="date"
id = "date" />You can restrict the dates allowed to a specific range by applying the min and max attributes to the element.
time: Time is stored in hh:mm format. Some browsers include a colon directly in the field, and some modify the virtual keyboard with numbers and the colon character. It's also possible that a browser will pop up some sort of custom time selector, but this isn't yet supported in any major browsers.
<input type = "time"
id = "time" />
datetime: Combines date and time into a single element. It also includes a mechanism for entering the time zone.
<input type="datetime"
id = "datetime" />Some browsers pop up a calendar control for the date and a formatted input for the time. Others may modify virtual keyboards for date and time input.
The official full date and time format returned from the various date and time elements is a specialized code: yyyy-mm-ddThh:mm+ff:gg:
yyyy: Four digits for the year.
-: An actual dash character, which must be placed between year and month. Another dash is placed between the month and the day.
mm: Two digits for the month.
dd: Two digits for the day.
T: The capital T indicates the beginning of the time part of the code.
hh: Two digits for the hour, in 24-hour format.
:: The colon character between the hour and minutes. Another colon appears between the hour and minutes of the time zone offset.
mm: Two digits for the minutes.
+/-/Z: The time zone offset is indicated by a capital Z (if the time is Zulu or GMT time) or the + or - symbol if time is in another time zone.
ff: If the time zone is not Zulu time, indicate the number of hours offset from GMT.
gg: Number of minutes offset from Zulu time. Typically this is 00, but it is possible that the time zone will be offset by 15, 30, or 45 minutes.
For example, 5:30 PM on October 11, 2011, in New York City looks like this:
2011-10-11T17:30-05:00
The date and time need to be in this format to be considered valid for browsers that validate a dateTime field.
datetime-local: Just like the datetime element without a time zone indicator:
<input type="datetime-local"
id = "datetimeLocal" />
email: This looks like a plain text field, but it may be modified according to how it's accessed.
<input type="email"
id = "txtEmail" />
month: This generates a four-digit year followed by a two-digit month:
<input type = "month"
id = "month" />
number: Numerical data may consist of a text field followed by some kind of selector (for example, up and down arrows), or this tag may change the virtual keypad of a portable device to handle only numeric input.
<input type = "number"
id = "number"
max = "10"
min = "0" />The number input type supports several special attributes:
min: The minimum value allowed.
max: The maximum allowed value.
step: This value indicates how much the visual interface tools (typically small up and down arrows) change the value when activated.
value: The numeric value of the element.
All attributes of the number element can be integer or floating point. However, current browsers that support this tag (Opera and Chrome) don't seem to validate as well with floating-point values as they do with integer values. For more control of numeric input, consider the range input type.
range: Most user-interface toolkits have some sort of slider or scrollbar mechanism, which makes it easy for users to enter a numeric value visually. The <input type = "range"> construct finally adds this functionality to HTML forms.
<input type = "range"
id = "range"
min = "0"
max = "255"
value = "128" />The range input takes the same attributes as number, min, max, value, and step. If the browser supports the range tag, the user will see a scroller; if not, a plain-text input type will appear.
The range type doesn't display the exact value, and it can be harder to get precise results than with the number input type. One solution is to pair an output tag to the range, and use JavaScript to update the output when the range is changed. A sample form that incorporates this idea:
<form action = "">
<fieldset>
<input id = "myRange"
type = "range"
min = "0"
max = "255"
value = "128"
onchange = "updateOutput()" />
<output id = "myOutput">128</output>
</fieldset>
</form>When the range value is changed, it calls a JavaScript function called updateOutput:
function updateOutput(){
//get elements
var myRange = document.getElementById("myRange");
var myOutput = document.getElementById("myOutput");
//copy the value over
myOutput.value = myRange.value;
} // end functionLike the number input type, the range can be given floating-point values if you like.
search: Used to retrieve text that's intended to be used as part of a search (either internally or through a searching service). On most browsers, this tag displays like an ordinary text field. It does sometimes have some special behavior. On Safari, the search field is displayed with a small x, which clears the contents of the search. On Chrome, the autocompletion features of the main search bar (which is also the URL input element in Chrome) are automatically applied to the search box.
<input type="search"
id = "search" />Like the other new input types, there's no penalty for using the search element in browsers that don't support it. The fallback is a plain-text input.
The search element doesn't actually do any searching. To make it functional, you need to write some code.
tel: This field expects three digits followed by a dash and four digits — a local telephone number. You may need to play with the pattern attribute if you want to allow an area code or extensions to validate.
<input type = "tel"
id = "tel" />
url: Browsers that support this element will check for the http:// prefix for a web address. Mobile browsers may also adapt the virtual keyboard to include characters commonly found in URLs: the colon (:), forward slash (/), and tilde (~).
<input type = "url"
id = "url" />
week: Lets the user choose a week from a calendar control. It returns a value in the following format: yyyy-Wnn
yyyy: Represents a four-digit year.
-: The dash character.
W: The capital W character.
nn: The week as a two-digit number.
Some browsers pop up the standard calendar control. When the user selects a date (or a week), only the year and week will be returned. Other browsers simply validate for the proper format.
<input type = "week"
id = "week" />
dummies
Source:http://www.dummies.com/how-to/content/new-form-input-types-in-html5.html
No comments:
Post a Comment