19. HTML5 New Input Type

HTML5 has a number of new form input types. These new features provide better input control and validation

This chapter provides a comprehensive overview of these new input types:

• Color
• Date
• Datetime
• Datetime-local
• Email
• Month
• Number
• Range
• Search
• Tel
• Time
• Url
• Week

Color

The color type used in the input field is used primarily to select colors

To select a color from the color picker:

 <  form  action  = "demo-form.php"  >   Choose the color you like:  <  input  type  = "Color"   name  = "Favcolor"  ><  BR  >  <  input  type  = "Submit"  >  </ form  >  

Date

The date type allows you to select a date from a date selector

Define a Time controller:

<action= "demo-form.php">  <  type = "Date" name = "Bday" >  <  type= "Submit"></form>

Datetime

The datetime type allows you to select a date (UTC time)

Define a date and time controller (local time):

<action= "demo-form.php">  <  type = "Date" name = "Bday" >  <  type= "Submit"></form>

Datetime-local

Datetime-local type allows you to select a date and time (no time zone)

Define a date and time (no time zone):

<action= "demo-form.php"><type  = "datetime-local"  name= "Bdaytime"><  type = "Submit" > </ form >

Email

Email type for input fields that should contain e-mail addresses

When you submit a form, it automatically verifies that the value of the email domain is valid:

 <  form  action  = "demo-form.php"  >   e-mail:  <  input  type  = "email"   name  = "Usremail"   >  <  input  type  = "Submit"  >  </ form  >  

tip: The Safari browser in the IPhone supports the email input type and works with it by changing the touch Screen Keyboard (add @ and. com options)

Month

Month type allows you to select a month

Define month and year (no Time zone):

<action= "demo-form.php">  <  type = "Month" name = "Bdaymonth" >  <  type= "Submit"></form>

Number

The number type is used for input fields that should contain numeric values

You can also set a limit on the number of accepted numbers:

<formAction= "demo-form.php">quantity (between 1 and 5):<inputtype= "Number"name= "Quantity"min= "1"Max= "5"><inputtype= "Submit"></form>

Use the following properties to define the qualification for numeric types:

Properties	Description
Disabled	Specifies that the input field is disabled
Max	Specify the maximum allowable value
MaxLength	Specifies the maximum character length of the input field
Min	Minimum allowable value is specified
Pattern	Specifies the pattern used to validate input fields
ReadOnly	Specifies that the value of the input field cannot be modified
Required	Specifies that the value of the input field is required
Size	Specify the number of visible characters in the input field
Step	Specify the legal number interval for the input field
Value	Specify default values for input fields

Range

Range type is used for input fields that should contain numeric values in a range

The range type is displayed as a slider bar

<formAction= "demo-form.php"Method= "Get">Points:<inputtype= "Range"name= "Points"min= "1"Max= "Ten"><inputtype= "Submit"></form>

Use the following properties to specify the qualification for numeric types:

• Max-Specifies the maximum allowable value
• Min-Specifies the minimum allowable value
• Step-Specify a valid digital interval
• Value-Specify default value

Search

The search type is used for searching domains, such as site search or Google search

Define a search field (like site search or Google search):

 <  form  action  = "demo-form.php"  >   Search Google:  <  input  type  = "Search"   name  = "Googlesearch"  ><  BR   >  <  input  type  = "Submit"  >  </ form  >  

Tel

Define the input phone number field:

<action= "demo-form.php">  <  type = "Tel" name = "Usrtel" >< BR >  <  type= "Submit"></form>

Time

The time type allows you to select a period

Define an input time controller (no time zone)

<action= "demo-form.php">  <  type = "Time" name = "Usr_time" >  <  type= "Submit"></form>

Url

URL type used for input fields that should contain URL addresses

The value of the URL field is automatically validated when the form is submitted

Define the input URL field:

 <  form  action  = "demo-form.php"  >   add your home page:  <  input  type  = "url"   name  = "homepage"  ><  BR   >  <  input  type  = "Submit"  >  </ form  >  

tip: The Safari browser in the iPhone supports the URL input type and works with it by changing the touch screen Keyboard (Add. com option)

Week

The week type allows you to choose minute

Define minute (no time zone):

<action= "demo-form.php">  <  type = "Week" name = "Year_week" >  <  type= "Submit"></form>

19. HTML5 New Input Type