HTML5 Input types demo

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
        <h3>type="color"</h3>
        <input type="color" name="color" value="#ff0000">
    </div>

    <div>
        <h3>type="date"</h3>
        <input type="date" name="date" value="2017-06-01">
    </div>

    <div>
        <h3>type="datetime-local"</h3>
        <input type="datetime-local" name="datetime-local" value="2017-06-01T08:30">
    </div>

    <div>
        <h3>type="email"</h3>
        <input type="email" name="email" value="abc@example.com">
    </div>

    <div>
        <h3>type="month"</h3>
        <input type="month" name="month" value="2017-06">
    </div>

    <div>
        <h3>type="number"</h3>
        <input type="number" name="number" value="123">
    </div>

    <div>
        <h3>type="range"</h3>
        <input type="range" id="range" name="range" min="0" max="11" value="7" step="1">
        <output for="range" id="output"></output>
    </div>

    <div>
        <h3>type="tel"</h3>
        <input type="tel" name="tel" value="333-4444-4444">>
    </div>

    <div>
        <h3>type="time"</h3>
        <input type="time" name="time" value="13:30">
    </div>

    <div>
        <h3>type="url"</h3>
        <input type="url" name="url" value="http://localhost:3000">>
    </div>

    <div>
        <h3>type="week"</h3>
        <input type="week" name="week" value="2017-W47">
    </div>

</body>

</html>