1. Ch3: Introduction to HTML5 part 2 Dr. Abdullah Almutairi ISC 340 Fall 2014

2. New HTML5 form input elements HTML5 introduced new input elements for forms to select different type of data like color, date, email, number, url, etc. HTML5 also introduced auto-completion capabilities for inputting data. Caution: some of the new HTML5 elements don’t work on all web browsers especially Internet Explorer.

3. HTML5 joke

4. Input type - color Displays a color picker window allowing you to choose a color and returns the color hexadecimal code. Color:

5. Input type - date Displays a calendar and the user can choose a date on the calendar Date:

6. Input type - datetime-local Allows the user to select the date and time using a spin arrow. Date-Time:

7. Input type - email Allows the user to type an email or a list of emails in a text field. The input is validated and made sure that the text typed is a valid format for an email and gives an error message if it is not. Email:

8. Input type - email The placeholder attribute allows for grey text to appear in the field if there is no text written. This text is not submitted to the server. This attribute is only used with the following types of input: text, search, url, tel, email, and password. The required attribute ensures that an input is filled before the form is submitted. It gives an error message if the field is not filled. In HTML5 form inputs are self validating on the client side. No need to write javascript code to check that the input is written properly. Validation is done after hitting the submit button of the form. To disable the form self validation the attribute formnovalidate should be added to the input type submit.

9. Input type - month Allows the user to select a certain month of a certain year. Date:

10. Input type - number Allows a user to select a numerical value with a spinner. A minimum, maximum, value and step size can be decided in the attributes.

11. Input type - range Appears as a slider control in Chrome, Safari and Opera. The minimum and maximum values can be set. Also, a default value can be set.

12. Input type - search Similar to the text input type only it has an x at the end of the text field to clear the text field.

13. Input type - tel Allows the user to enter a telephone number. Mobile phone browsers display a numeric keypad for entering phone numbers for this input type. Pattern attribute is for specifying the format of the number for this input type. If the user enters a false number format an alert will be displayed. Regular expressions is used to specify the format of the telephone number. To represent an n number of decimal numbers \d{n} is used. To represent parenthesis, \( or \) are used.

14. Input type - time Allows the user to enter time in hour, minute, second and fraction of second. In chrome only the hour and minute are chosen.

15. Input type - url Allows the user to enter a URL. It is similar to the text field input. The input is validated as a correct form of a URL and an alert is shown if it is not in a correct form. It doesn’t check if the web site exist or not.

16. Input type - week Allows the user to select a year and week number in the format Week nn, yyyy, where nn is 01-53, for example Week 01, 2012. The autofocus attribute is an optional attribute that can be used in only one input element on a form. It gives focus on that input allowing the user to begin typing in that element immediately.

17. Autocomplete attribute Using the autocomplete attribute allows an input type to be automatically completed based on previous input from the user. Autocomplete can be enabled for a whole form or specific input elements.

18. datalist element Provide input options for a text input type. The options are reduced as the user types his choice.