Html input types you don’t use

COLOR

The <input type=”color”> opens the color picker tool.

HTML       CSS

<p>Choose your monster’s colors : </p>  

<div>

<input type=”color” id=”head” name=”head” value=”#e66465″>

<label for=”head” >Head</labels>

< /div>

<div>

<input type=”color” id=”body” name=”body” value=”#f6b73c “>

<label for=”body”>Body</label>

</div>

Output:

Choose your monster’s colors:

Head

Body

TEL

The <input type=”tel”> helps you to take a phone number.

HTML          CSS

<label for=”phone”>Enter your phone number:</label>

<input type=”tel” id=”phone” name=”phone” pattern=”[e-9]{3}-[e-9]{3}-[e-9]{4}”required>

<small> Format: 123-456-7890</small>

Output:

Choose a time for your meeting;

–:–  – –  Office hours are 9am to 6pm

RANGE

The <input type=”range”> helps you to select a particular range.

HTML            CSS

<p>Audio settings: </p>

<div>

< input type=”range” id=”volume” name=”volume”min=”0″ max=”11″>

<label for=”volume”> Volume</label>

</div>

<div>

<input type=”range” id=”cowbell” name=”cowbell” min=”0” max=”100″ value=”90″ step=”10″>

<label for=”cowbell”>Cowbell</label>

< /div>

Output

Audio Settings:

Volume

Cowbell

TIME

The <input type=”time”> creates input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).

HTML           CSS

  <label for=”appt”>Choose a time for your meeting:

 </label>

  < input type=”time” id=”appt” name= “appt” min=”09:0e” max=”18:00″ required>

 <small>0ffice hours are 9am to 6pm</small>

 

Output

Choose a time for your meeting:

– : —  – –      Office hours are 9 am to 6 pm

Leave a Reply

Your email address will not be published. Required fields are marked *