Web Development Adventures: HTML5 Input Types

HTML5 New Input Types

We will take a look at creating forms with HTML5
with following additional input types

New input types

Date input types are covered in a separate article here: http://hetalparikh.blogspot.com/2016/03/html5-date-input-caveats.html

Date
Time
Month
Week

Other input types

Range - The <input type="range"> is used for input fields that should contain a value within a range. Depending on browser support, the input field can be displayed as a slider control.

Search - The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Telephone - The <input type="tel"> is used for input fields that should contain a telephone number

Email - The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

Color - The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.

Data List - Specifies a list of pre-defined options for input controls

Progress - Represents the progress of a task

Meter - Defines a scalar measurement within a known range (a gauge)

Form Output (As displayed in Chrome)

You can save the source code below as html page to see the code in action!

In Chrome, a nice picker control is displayed for date controls.
Also, for controls marked as required, browser automatically adds validation support to display a nice popup to show "required field" validation message.

Code Snippet

FormsDemo.html

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="MyStyles.css" />
        <title>Demo HTML5 Form Controls</title>
    </head>
    <body>
        <form id="myform">
            <!--Input Type:Date-->
            <label for="date-input">Date:</label>
            <input id="date-input" type="date" /><br/><br/>
            <label for="time-input">Time:</label>
            <input id="time-input" type="time" /><br/><br/>
            <label for="month-input">Month:</label>
            <input id="month-input" type="month" /><br/><br/>
            <label for="week-input">Week:</label>
            <input id="week-input" type="week" /><br/><br/>
 
            <!--Input Type: Range-->
            <label for="range-data">Range:</label>
            <input id="range-data" type="range" min="1" max="10" /><br/><br/>
 
            <!--Input Type: Search-->
            <label for="search-data">Search:</label>
            <input id="search-data" type="search" placeholder="Enter Search Term Here"/><br/><br/>
 
            <!--Input Type: Email-->
            <label for="email-data">Email:</label>
            <input id="email-data" type="email" required multiple /><br/><br/>
 
            <!--Input Type: Color-->
            <label for="color-data">Color:</label>
            <input id="color-data" type="color" /><br/><br/>
 
             <!--Input Type: Telephone-->
            <!--We have made telephone a required form field. So if you 
            click submit button without entering telephone, it will prompt you-->
            <label for="tel-data">Telephone:</label>
            <input id="tel-data" type="tel" required /><br/><br/>
 
            <!--Input Type: DataList-->
            <label>DataList:</label>
            <input type="text" list="myDataList">
            <datalist id="myDataList">
                <option label="Mr." value="Mr."></option>
                <option label="Mrs." value="Mrs."></option>
                <option label="Ms." value="Ms."></option>
            </datalist><br/><br/>
            
             <!--Input Type: Progress Bar-->
            <label for="progress-data">Progress Bar:</label>
            <progress id="progress-data" value="5" max="10"></progress><br/><br/>
 
            <!--Input Type: Meter-->
            <label for="meter-data">Meter:</label>
            <meter id="meter-data" value="75" min="10" max="100" optimum="50" low="20" high="70"></meter><br/><br/>
 
            <!--Form Submit Button-->
            <input type="submit" value="Submit" /><br/><br/>
        </form>
        
        <!--Input Type: Outside Form-->
        <!--Even though this control is outside the form, form property specifies which 
        form this control is associated with and the data is posted when the form is submitted-->
        <label for="outside-data">Outside Text:</label>
        <input id="outside-data" type="text" form="myform" /><br/><br/>
    </body>
</html>

MyStyles.css file (added to the project directory for Range Control)

input[type=range]::before{content: attr(min);}
input[type=range]::after{content: attr(max);}
input[type=range] {width:250px; color:blue; font-family: 'Segoe UI'; font-size: small}

Thursday, March 3, 2016

HTML5 Input Types

HTML5 New Input Types

Code Snippet