Monday, May 21, 2012

Starting with HTML5 Forms

HTML5 forms add a lot of power to html forms which result in reduced development time. And HTML5 are improved for developer as well as users using them.

HTML5 specification added lots of feature in forms but all browsers are at different states. Check for current support to HTML5 form elements.

Below is the list of newly added input type in HTML5. 

Input Type Purpose
tel For entering a telephone number.
search To prompt users to enter text that they want to search for.
url For entering a single URL.
email For entering either a single email address or a list of email addresses.
datetime For entering a date and time with the time zone set to UTC.
date For entering a date with no time zone.
month For entering a date with a year and a month, but no time zone.
week For entering a date that consists of a week-year number and a week number, but no time zone.
time For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone.
datetime-local For entering a date and time with no time zone.
number For numerical input.
range For numerical input, but unlike number, the actual is not important.
color For choosing color through a color well control.

Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. And from below example it is very clear that new input elements saves a lot of javascript validation code. Code for example form is provided below.

<form oninput='fullName.value = "Mr. " + firstName.value + " " + lastName.value' onsubmit="return alter('Saved')";>
<output id="fullName" name="fullName"></output><br/>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name" required="required" autofocus="autofocus"/><br/>  
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name" required="required"/><br/>
<input type="email" id="email" name="email" placeholder="" required="required"/><br/>
<input type="email" id="emailConfirm" name="emailConfirm" placeholder="Confirm Email Address" required="required" oninput="verifyEmail(this)"/><br/>
<input type="tel" id="telNo" name="telNo" placeholder="Enter Your Phonenumber"/><br/>
<input type="url" id="webAddress" name="webAddress" placeholder="Enter Your Website"/><br/>
<input type="number" id="age" name="age" min="18" max="100" required="required" placeholder="Enter Your Age"/><br/>
<input type="submit" value="Save Info" /> <br/>
function verifyEmail(input) {
  if (input.value != document.getElementById('email').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message

1 comment:

  1. Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. responsive web development