andruhovski icon

HTML5 Input types demo

andruhovski | PRO | 11/22/17 12:54:50 PM UTC | 0 ⭐ | 853 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

<!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="[email protected]">
    </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>

Comments