Friday, 2 August 2013

New Input type attributes of HTML5 form

 New Input type attributes of  HTML5 form
Type     Value

tel                  Define a field for enter a telephone number
search            The input field is a search field
url                  for  URL
email              One or more email addresses
datetime         datetime allows the user to select a date and time(with time zone)
date              For date
month            For  month
week            For  week
time               The input value is of type time
datetime-local         A local date/time
number           For  number
range              For  number in a given range
color               For  hexadecimal color, like #82345c
placeholder     Specifies a short hint  value of an input field

 example: 

<form name="contact_form" action="send.php" method="post">
       Telephone: <input type="tel" name="usertel" required="required"><br>
       Search Google: <input type="search" name="googlesearch"><br>
       Add your homepage: <input type="url" name="homepage" required="required"><br>
       Email: <input type="email" name="emai"><br>
       Birthday (date and time): <input type="datetime" name="birthdaytime" required="required"><br>
       Birthday:  <input type="date" name="birthday"><br>
       Birthday (month and year): <input type="month" name="birthdaymonth" required="required"><br>
       Select a week: <input type="week" name="week_year"> <br>
       Select a time: <input type="time" name="usr_time"><br>
       Birthday (date and time): <input type="datetime-local" name="bdaytime"><br>
       uantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br>
       <input type="range" name="points" min="1" max="10"><br>
       Select your favorite color: <input type="color" name="favcolor"><br>
       placeholder: <input type="text" name="q" placeholder="type your name"><br>
       <input type="submit" name="" value="submit">
       </form>