<div>
<label for="escritor">Escritor/a favorito/a</label>
<input type="text" name="escritor" id="escritor" list="escritores">
</div>
<div>
<label for="dia">Nº de día de la semana</label>
<input type="text" name="dia" id="dia" list="dias" autocomplete="off">
</div>
<div>
<label for="corbata">Color de la corbata</label>
<input type="color" id="corbata" name="corbata" value="#999999" list="colores" />
</div>
<datalist id="escritores">
<option>Stanisław Lem</option>
<option>Ursula K. Le Guin</option>
<option>Karel Čapek</option>
<option>Philip K. Dick</option>
<option>Lois McMaster Bujold</option>
<option>Yasutaka Tsutsui</option>
</datalist>
<datalist id="dias">
<option>1<!-- "1" es tanto label como value -->
<option label="Martes">2<!-- "2" es el value -->
<option value="3">Miércoles<!-- "Miércoles" es label -->
<option label="Jueves" value="4">
<option disabled>Juernes<!-- Este día no existe -->
<option label="Viernes" value="5">Este texto se ignora
<option value="6">Sábado
<option value="7">Domingo
</datalist>
<datalist id="colores">
<option>#ff0000
<option>#00ff00
<option>#0000ff
</datalist>
div {
margin: 32px;
}
label {
padding-right: 16px;
}
input[type=text] {
padding: 4px;
line-height: 1.5;
}
This Pen doesn't use any external CSS resources.