There are several new input types in HTML 5. They extend the original HTML 4.1 types:

• text (the general one-line text input)
• password (same as text but replaces each typed characters with "*" in the display)
• checkbox (check box for yes/no choices)
• radio (a group of mutually exclusive choices with the same name)
• file (to find and upload a file)
• button (allows click actions to be directed to scripts)
• hidden (text box that does not display on the page)
• submit (submite the form according to the form tag's action and method clauses)
• reset (resets all the form elements to their inital values)

The new HTML 5 input types are:

• search

  This input type currently performs NO action. It's implementation is incomplete on all browsers and it is treated like a textbox.

  HTML for input type="search": <input type="search" name="freds" size="10">

  Textbox "freds" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	all do nothing

• email

  <input type="email" size="40" name="efred">

  The validation occurs WITHOUT you having to write the regular expression pattern. It is built-in to the "email" type.

  HTML for input type="email" <input type="email" name="fred" size="40" maxlength="40">

  Textbox "efred" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	must have ...@...	must have ...@...	must have ...@...	must have ...@...	no edits

• tel

  <input type="tel" size="40" name="efred">

  The validation occurs WITHOUT you having to write the regular expression pattern. It is built-in to the "email" type.

  HTML for input type="tel" <input type="tel" name="fredphone" size="40" maxlength="40">

  Textbox "fredphone" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	must have USA phone pattern	must have USA phone pattern	must have USA phone pattern	no edits

• range

  See this discussion on the range (aka slider)

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	all browsers work

• url

  <input type="url" size="40" name="ufred">

  HTML for input type="url" <input type="url" name="fredlink" size="40" maxlength="40">

  Textbox "fredlink" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	must have http://...	must have http://...	must have http://...	must have http://...	no edits

• number

  The intent is to restrict the input to numeric. This input type currently works correctly in Chrome, is partially implemented in Safari and doesn't work (i.e., doesn't perform a numeric edit) in IE and Firefox.

  HTML for input type="number": <input type="number" name="frednum" size="10">

  Textbox "frednum" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	must have numeric has picker	no edits	must have numeric has picker	allows alphabetic but has picker

• date

  HTML for input type="date": Provides an interactive text box that simplifies date input. <input type="date" name="freddate" size="10">

  Textbox "frednum" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edit	has placeholder and picker	no edit	has placeholder and picker	has placeholder and picker

• month

  HTML for input type="month": Provides an interactive text box that simplifies month input. <input type="month" name="fredmonth" size="10">

  Textbox "fredmonth" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edit	has placeholder and picker	no edit	has placeholder and picker	allows alpha but has picker

• week

  HTML for input type="week": Provides an interactive text box that simplifies week input. <input type="week" name="fredweek" size="10">

  Textbox "fredweek" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edit	has placeholder and picker	no edit	has placeholder and picker	allows alpha but has picker

• time

  HTML for input type="time": Provides an interactive text box that simplifies time input. <input type="time" name="fredtime" size="10">

  Textbox "fredtime" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	has placeholder and picker	no edit	has placeholder and picker	allows alpha but has picker

• datetime

  HTML for input type="datetime": Provides an interactive text box that simplifies datetime input. <input type="datetime" name="freddatetime" size="10">

  Textbox "freddatetime" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	no edits	no edits	no edits	allows alpha has picker

• datetime-local

  HTML for input type="datetime-local": Provides an interactive text box that simplifies datetime-local input. <input type="datetime-local" name="freddatetime-local" size="10">

  Textbox "freddatetime-local" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	has placeholder has picker	no edits	has placeholder has picker	allows alpha has picker

• color

  HTML for input type="color": Provides an interactive text box that simplifies color input. <input type="color" name="fredcolor" size="10">

  Textbox "fredcolor" looks like this:

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	no edits	has picker	no edits	has picker	no edits

• placeholder

  The placeholder attribute allows you to place text in an textbox as a guide to the user as to what kind of data to to enter. When the user clicks in the textbox, the placeholder text disapperas and the user can begin entering their text. The placeholder text is normally display in a light gray color.

  HTML for input type="text" placeholder="instructional string for the user": <input type="text" name="fredplacename" size="20" placeholder="Enter your full name"> <input type="text" name="fredplacecity" size="20" placeholder="Enter your city"> <input type="text" name="fredplacebirth" size="30" placeholder="Enter your birthday as: mm/dd/yy">

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	ok	ok	ok	ok	ok

• required

  This attribute requires that a user interact with the field by entering data or checking an HTML object before the form is submitted. Its usage is:

  HTML for input type="text": <input type="text" name="fred" size="10" maxlength="10" required>

  Textbox "fred" looks like this:

  The concept also works for radio buttons, checkboxes and textareas:

  HTML for input types "checkbox" and "radio": <input type="checkbox" name="c1" required> and <input type="radio" name="r1" value="1" required> <input type="radio" name="r1" value="2" required> <input type="radio" name="r1" value="3" required> and <textarea name="ta" rows="2" cols="12" required></textarea>

  Checkbox ; and Radio 1 Radio 2 Radio 3 Textarea

  When the submit button is clicked and required fields (or actions) have not been provided, all of the required field are highlighted where the required action has not been taken.

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	ok	ok	ok	ok	ok

• pattern attribute (regular expression validation for text)

  The pattern attribute for HTML input type objects allows the user's input to be validated by regular expressions. The general for is:

  <input type="text" pattern="regular expression pattern">

  My discussion of regular expressions can be found here. Essentially, a partern is a set of codes to test the content and structure of a string. There is a massive amount of literature on this topic. Regular expressions are used in your email filters to identify spam emails and are have been used extensively in the past for data validation. Both vbscript and javascript (as noted in my page link above) have built in regular expression functionality as part of the scripting language. With this HTML 5 addition, validation can be performed without the use of scripting. Below are some common pattern (see the link above for more details).

  HTML for pattern validation for: an accounting/financial number (i.e., debit/credit): <input type="text" pattern="^-{0,1}[0-9]{1,15}\.[0-9]{2}$"> Explanation of the pattern: 1. ^-{0,1} means at the begining of the string there is zero or 1 minus, then 2. [0-9]{1,15} means one to fifteen digits 0 through 9, then 3. \. means a single decimal point, then 4. [0-9]{2}$ means two digits at the end of the string	Debit or Credit:
  HTML for pattern validation for Master Card credit card number: <input type="text" pattern="^5[1-5][0-9]{14}$"> Explanation of the pattern: 1. ^5 must begin with a 5 2. [1-5] followed by 1,2,3,4 or 5 3. [0-9]{14}$ end with 14 digits	Master Card Number:
  HTML for pattern validation for a non-empty alphabetic string 20 or less bytes: <input type="text" pattern="^[A-Za-z\s]{1,20}$"> Explanation of the pattern: 1. [A-za-z\s] means upper case, lower case and white space 2. {1,20}$ means ends with from one to 20 characters	1-20 alphabetic characters:

  • Jan Goyvaerts' website on Regular Expressions http://www.regular-expressions.info/ -- the best!
  • Here is an excellent "strong" password example: http://www.the-art-of-web.com/javascript/validate-password/ using javascript.

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	ok	ok	ok	ok	none

• autofocus

  The HTML element that gets the focus when the page is loaded.

  <input type="text" autofocus>

  This attribute should apply to only one HTMl element.

  HTML for input type="text" autofocus: <input type="text" name="fredauto" size="10" maxlength="10" autofocus>

  Click here for the autofocus example

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	fails on load	ok	ok	ok	ok

• multiple

  Thsi allows the user to enter more than one value in an element (works ONLY for input types: file and email).

  <input type="email" multiple>

  HTML for input type="email" multiple : <input type="email" name="efred" size="30" maxlength="30">

  Textbox "fred" looks like this: frede (enter more than one email)

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:

• formnovalidate

  This options overides any validation of HTML elements and submits the form without examining the outcome of validations (e.g., "required"). This is an option of a submit element.

  <input type="submit" formnovalidate value-"Submit Without Validation">

  HTML for input type="text" required with two submits -- one with formnovalidate, the other without: <input type="text" size="10" name="fred" required> <input type="submit" formnovalidate value="Submit Without Validation"> <input type="submit" value="Submit With Validation:>

  Textbox "fred" looks like this: fred

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:	all buggy

• novalidate

  This form tag option overides any validation of HTML elements and submits the form without examining the outcome of validations (e.g., "required"). This is an attribute of the form element.

  <form name="f1" novalidate action="..." method="..."> gt;

  HTML for form novalidate: <form name="f1" novalidate action="http://auckland.bauer.uh.edu/students/parks/echo.asp" method="post"> fred <input type="text" size="10" name="fred" required> <input type="submit" value="Submit"> </form>

  Textbox "fred" looks like this: fred (required)

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments:

• oninvalid

  You can change the text displayed when the user makes an error.

  <input type="text" required="required" oninvalid="this.setCustomValidity('custom message')">

  This feature applies to ALL the HTML 5 validators.

  HTML for input type="text" required custom error message: <input type="text" name="fred" size="10" maxlength="10" required oninvalid="this.setCustomValidity('you must enter a value for fred')">

  Textbox "fred" looks like this: fred

  As of 2/22/2014	IE 10.0.9	Chrome 33	Firefox 27	Opera 18.0.1	Safari 5.1.7
  Comments: