Controles de formulario: tipos de input, select y textarea
Use inputs de texto, email, número, fecha, checkbox, radio, range, file y color junto con elementos select y textarea.
Controles de formulario: tipos de input, select y textarea es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Toda la gama de tipos de entrada
HTML5 introdujo muchos tipos de entrada especializados, además de text. Cada uno indica al navegador qué tipo de datos debe esperar, lo que permite la validación nativa, teclados adecuados en dispositivos móviles y controles de interfaz nativos de la plataforma.
Entradas de texto, búsqueda y URL
type="text" es la alternativa de texto básica. type="search" sugiere un teclado optimizado para búsquedas y suele mostrar un botón para borrar. type="url" valida el formato de la URL y muestra un teclado para URL en dispositivos móviles.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">Email y tel
type="email" valida el formato del email y muestra un teclado optimizado para emails, con una tecla @. type="tel" muestra un teclado numérico telefónico (no valida el formato, ya que los formatos de teléfono varían según el país).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Tipos number, range y date
type="number" con min/max/step para datos numéricos. type="range" para controles deslizantes. type="date", type="time", type="datetime-local" para datos temporales con selectores nativos.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Casillas de verificación y botones de opción
Las casillas de verificación son controles independientes. Los botones de opción del mismo grupo (con el mismo name) permiten una sola selección. Cada uno necesita una etiqueta asociada.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Color, file y hidden
type="color" muestra un selector de color nativo. type="file" abre un diálogo de archivos; use el atributo accept para restringir los tipos de archivo. type="hidden" envía datos sin un control de interfaz.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Menús desplegables select
El elemento <select> crea un menú desplegable. Use multiple para permitir varias selecciones (rara vez ofrece una buena experiencia de usuario). Agrupe las opciones con <optgroup> en listas largas.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Textarea
<textarea> crea una entrada de texto multilínea. Use rows y cols para definir el tamaño inicial, o CSS para tener más control. La etiqueta de cierre es obligatoria y cualquier contenido entre las etiquetas es el valor predeterminado.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Opciones de autocompletado
<datalist> proporciona una lista de sugerencias para una entrada sin restringir el texto libre. Vincule la entrada con datalist mediante los atributos list e id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Los atributos value y name
name es la clave que se envía al enviar el formulario. value establece el valor inicial. En las casillas de verificación y los botones de opción, value es lo que se envía cuando están seleccionados. En las entradas de texto, value es el contenido rellenado previamente.
Tamaño de input y placeholder
placeholder muestra un texto de ayuda cuando la entrada está vacía. Desaparece al recibir el foco y no sustituye a una etiqueta visible. size establece el ancho visible en caracteres; prefiera CSS para definir el tamaño.
Comprobación rápida
¿Qué tipo de entrada muestra un teclado numérico en dispositivos móviles y valida que el valor introducido sea un número válido?
Repaso: controles de formulario
Use tipos de entrada semánticos: email para emails, number para números y date para fechas. Use select para opciones fijas, datalist para autocompletado mediante sugerencias y textarea para texto multilínea. Incluya siempre atributos name para el envío y atributos value cuando corresponda.
Preguntas frecuentes
¿La lección «Controles de formulario: tipos de input, select y textarea» es gratis?
Sí — el texto completo de «Controles de formulario: tipos de input, select y textarea» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Controles de formulario: tipos de input, select y textarea»?
Use inputs de texto, email, número, fecha, checkbox, radio, range, file y color junto con elementos select y textarea. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Controles de formulario: tipos de input, select y textarea»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Controles de formulario: tipos de input, select y textarea
- ARIA y accesibilidad: label, role y aria-*
- HTML5 semántico: elementos semánticos frente a div soup
- Atributos de validación de formularios