How To Use New Input Types For Forms In HTML5

Posted By : Vikas Pundir | 25-Sep-2018

html5

New Input Types In HTML5

Several new input types are introduced for forms in HTML5 like date, email, range, time, color, etc. These input types are used to make the forms more interactive and improve the user better experience. However, if these new input types failed to recognize in a browser, so the browser will treat these input types like a normal text box.

In this section we are following new input types to take a brief look at input types:

- date

- email

- color

- datetime

- datetime-local

- month

- time

- range

- search

- tel

- number

- week

- URL

Input Type Date:

The Date input type is used for selecting a date from a drop-down calendar by a user.

<form>
        <label>
            Select Date: <input type="date" name="mydate">
        </label>
    </form>

Input Type Email:

The Email input type is used for allows the user to enter e-mail address. Email input type is similar to a standard text input type, but when it is used the required attribute within the combination, so browser look a pattern for ensuring a valid e-mail address should be entered in an email input type text area.

HTML

<body>
    <form>
        <label>
            Email Address: <input type="email" name="mycolor" required>
        </label>
    </form>
</body>

CSS

input[type="email"]:valid{
        outline: 2px solid green;
    }
    input[type="email"]:invalid{
        outline: 2px solid red;
    }

All browsers like Google Chrome, Internet Explorer 10+, Opera, Mozilla Firefox and Apple Safari have supported The validation for the input type="email".

Input Type Color:

The Color input type is used for selecting a color from a drop-down color picker by a user and returns a hex value for that color like #FFFFFF value for white color.

<html lang="en">
<head>
<title>HTML5 Color Input Type</title>
</head>
<body>
    <form>
        <label>
         Select Color: <input type="color" name="mycolor">
        </label>
    </form>
</body>
</html>

Input Type Datetime:

The datetime input type is used for select a date and time along with time zone by user.

<body>
    <form>
        <label>
            Date & Time: <input type="datetime" name="mydatetime">
        </label>
    </form>
</body>

Input Type Datetime-local:

To Select a local date and time using DateTime-local input type. The Timezone information doesn't provide by local date and time.

<body>
    <form>
        <label>
            Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
        </label>
    </form>
</body>

Input Type Month:

To select a month and year from a drop-down calendar we use month input type.

<body>
    <form>
        <label>
            Select Month: <input type="month" name="mymonth">
        </label>
    </form>
</body>

Input Type Time:

The time input type allows the user to enter a time.

<body>
    <form>
        <label>
            Select Time: <input type="time" name="mytime">
        </label>
    </form>
</body>

Input Type Number:

The number input type allows the user to enter a numerical value. Using the additional attributes max, min, and step, you can also restrict the user to enter only acceptable values.

HTML

<body>
    <form>
        <label>
            Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
        </label>
    </form>
    <p><strong>Note</strong>: Number range (1-10) is set if you enter the number out of range or text character, so it will show the error.</p>
</body>

CSS

input[type="number"]:valid{
        outline: 2px solid green;
    }
    input[type="number"]:invalid{
        outline: 2px solid red;
    }

All the major browsers like Google Chrome, Mozilla Firefox, Internet Explorer 10+, Apple Safari, and Opera supported input type=" number". Internet Explorer does not provide increment and decrement spin buttons but however recognized the number.

Input Type Range:

The range input type allows the user to enter a numerical value within a specified range. Range input type works similar to number input.

<form>
        <label>
            Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
        </label>
    </form>

All the major browsers like Google Chrome, Mozilla Firefox, Opera, Internet Explorer 10+ and Apple Safari supported input type=" range".

Input Type Tel:

The tel input allows the user to enter a telephone number.

<body>
    <form>
        <label>
            Telephone Number: <input type="tel" name="mytelephone" required>
        </label>
    </form>
</body>

Input Type Week:

The Week input type is used for selecting a week and year from a drop-down calendar.

<body>
    <form>
        <label>
            Select Week: <input type="week" name="myweek">
        </label>
    </form>
</body>

Input Type URL:

The URL input allows the user to enter web addresses i.e. URL. To enter more than one URL you can use the multiple attributes.

HTML

<form>
        <label>
            Website URL: <input type="url" name="mywebsite" required>
        </label>
    </form>
    <p><strong>Note</strong>: Enter a URL in the form like this https://www.google.com</p>
</body>

CSS

input[type="url"]:valid{
        outline: 2px solid green;
    }
    input[type="url"]:invalid{
        outline: 2px solid red;
    }