Curso gratuito de HTML

HTML Demos

// 02 de 09

02 · Input Types

HTML tiene más de 20 tipos de input. Cada uno activa UI nativa del sistema operativo: teclado numérico en móvil, selector de fecha, picker de color...

type=colortype=rangetype=date type=filetype=search<datalist><output>

Demo en vivo — prueba cada uno

60%

accept — en type=file filtra qué archivos muestra el sistema.

multiple — permite seleccionar varios archivos o valores.

datalist — el list= del input apunta al id= del datalist. El usuario puede escribir cualquier valor, las opciones son sugerencias.

Código importante

<!-- Selector de color nativo -->
<input type="color" value="#c8ff00">

<!-- Rango: min, max, step -->
<input type="range"
       min="0" max="100" step="5">

<!-- Fecha y hora -->
<input type="date">
<input type="datetime-local">
<input type="time">
<input type="month">

<!-- Número: solo acepta step=2 (impares) -->
<input type="number"
       min="1" max="99" step="2">

<!-- File: filtrar tipo + múltiples -->
<input type="file"
       accept="image/*"
       multiple>

<!-- Datalist: sugerencias nativas -->
<input type="text" list="opciones">
<datalist id="opciones">
  <option value="Madrid">
  <option value="Barcelona">
</datalist>

<!-- Output: muestra resultado del form -->
<!-- oninput actualiza sin JS extra  -->
<form oninput="res.value = rng.value">
  <input type="range"
         id="rng" name="rng">
  <output id="res" for="rng">
    50
  </output>
</form>