type="color"

type="date"

type="datetime"

type="datetime-local"

type="email"

type="month"

type="number"

type="search"

type="tel"

type="time"

type="url"

type="week"

type="range"


Code

<div>
    <h3>type="color"</h3>
    <input type="color" name="color">
</div>

<div>
    <h3>type="date"</h3>
    <input type="date" name="date">
</div>

<div>
    <h3>type="datetime"</h3>
    <input type="datetime" name="datetime">
</div>

<div>
    <h3>type="datetime-local"</h3>
    <input type="datetime-local" name="datetime-local">
</div>

<div>
    <h3>type="email"</h3>
    <input type="email" name="email">
</div>

<div>
    <h3>type="month"</h3>
    <input type="month" name="month">
</div>

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

<div>
    <h3>type="search"</h3>
    <input type="search" name="search" results="5" autosave="saved-searches">
</div>

<div>
    <h3>type="tel"</h3>
    <input type="tel" name="tel">
</div>

<div>
    <h3>type="time"</h3>
    <input type="time" name="time">
</div>

<div>
    <h3>type="url"</h3>
    <input type="url" name="url">
</div>

<div>
    <h3>type="week"</h3>
    <input type="week" name="week">
</div>

<div>
    <h3>type="range"</h3>
    <input type="range" id="range" name="range">
    <output for="range" id="output"></output>
</div>


<div>
    <input type="submit" value="Send">
</div>