top of page
HTML5.png

HTML

HTML 5

•    HTML 5 is a version of HTML which was introduced in the year 2012.
•    It was developed to make the HTML more easier and user friendly.

HTML 5 input types

HTML 5 added several new input types:-
    1.    Color
    2.    Date
    3.    Datetime
    4.    Datetime_local
    5.    Email
    6.    Month
    7.    Number
    8.    Range
    9.    Search
    10.    Tel
    11.    Time
    12.    url
    13.    week

Input type color:-
    •    This input type gives the user a color picker to choose a color.
    •    Example:-
        <form>
            CHOOSE THE COLOR: <input type="color" value="red" />
        </form>

Input type date:-
    •    This input type offers a date picker to the user.
    •    Example:-
        <form>
            DOB: <input type="date" value="2001-01-01" />
        </form>
        
Input type datetime:-
    •    This input type offers an element to choose both date and time.
    •    Example:-
        <form>
            DOB: <input type="datetime" value="2001-01-01T20:34:54.21" />
        </form>

Input type datetime_local:-
    •    This input type offers an element to choose both date and time with local setting supports.
    •    Example:-
        <form>
            LOCAL TIME: <input type="datetime_local" value="2011-06-09T22:41" />
        </form>

Input type email:-
    •    This input type offers a field for entering email address.
    •    Example:-
        <form>
            EMAIL ID: <input type="email" value="1996sunilsahukumar@gmail.com" />
        </form>
        
Input type month:-
    •    This input type allows the user to select a month and year.
    •    Example:-
        <form>
            BIRTH(month & year): <input type="month" value="2011-06" />
        </form>
    
Input type number:-
    •    This input type defines a numeric input field.
    •    We can also set restriction on what numbers are accepted.
    •    Example:-
        <form>
            NUMBERS(between 1 and 5):
            <input type="number" name="quantity" min="1" max="5" />
        </form>
        
Input type range:-
    •    This input type is used for input fields that should contain a value within a range.
    •    Example:-
        <form>
            YOUR HEIGHT IN FEET:
            <input type="range" name="points" min="0" max="7" />
        </form>
        
Input type search:-
    •    This input type is used for search fields.
    •    Example:-
        <form>
            <input type="search" value="[search here]" />
        </form>
        
Input type tel:-
    •    This input type is used for input fields that should contain a telephone number.
    •    Example:-
        <form>
            CONTACT NO.:
            <input type="tel" name="user_tel" format="[0-9]{3} – [0-9]{2} – [0-9]{3}" />
        </form>
        
Input type time:-
    •    This input type allows the user to select a time.
    •    Example:-
        <form>
            <input type="time" name="select_time" />
        </form>
    
Input type url:-
    •    This input type is used for input fields that should contain an URL address.
    •    Example:-
        <form>
            ADD YOUR HOMEPAGE:
            <input type="url" name="homepage" />
        </form>
        
Input type week:-
    •    This input type allows the user to select week and year.
    •    Example:-
        <form>
            SELECT WEEK:
            <input type="week" name="week" />
        </form>

 

Related Topics

bottom of page