Cargando...

Tipos de input en HTML

Los elementos de formulario mapearon las etiquetas dentro de form. Tipos de input enfocan una etiqueta: input. type elige la cara del control. Esta lección es un catálogo de type. Ayudas como required vienen después.

Por qué importan los tipos

type=text sirve casi para todo, pero el móvil muestra teclado incorrecto, las contraseñas quedan visibles y las fechas son texto libre. Ajustar type a los datos mejora escritura, chequeos y forma de los valores.

Respuesta directa

1) Pon type en input — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Empareja cada visible con label. 3) Radios de una respuesta comparten name; checkbox es independiente. 4) Prefiere button type=submit. 5) type solo elige la cara — action/method y atributos posteriores son otras capas.

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

Alta: campos tipados

Formulario pequeño de unión: email, contraseña, edad number y fecha de inicio.

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

Leer la demo de alta

  • email → UI de correo
  • password enmascara caracteres
  • number entrada numérica
  • date control de fecha
  • label con for/id; name como clave
  • action/method sin cambios

Encuesta: checkbox, radio y file

Interruptores y subidas usan el mismo input con distinto type. Radios comparten name=plan. checkbox va solo. file abre un selector.

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

Leer la demo de encuesta

  • checkbox de newsletter independiente
  • mismo name → una elección radio
  • label hace el texto clicable
  • file + multipart para subidas
  • fieldset enmarca Plan — el foco es type
  • siguiente lección: atributos como required

Elegir el type correcto

  • texto corto: text
  • email/contraseña: email/password
  • cantidad o edad: number
  • opción exclusiva: radio con mismo name
  • interruptor independiente: checkbox
  • día de calendario: date
  • adjunto: file
  • oculto: hidden
  • multilínea sigue siendo textarea

Práctica — cambiar tipos

  1. Copia el alta; email→text
  2. password breve como text
  3. segundo number para cantidad
  4. radios con names distintos, luego corrige
  5. Newsletter + Pro; anota names esperados
  6. file sin multipart — conciencia
  7. Frase: type elige la cara del input

Errores fáciles

  • text para contraseñas
  • radios con names distintos
  • sin label
  • esperar subida file sin encoding
  • creer que type reemplaza action/name
  • input para texto largo en vez de textarea
  • confundir con la lección de atributos

Resumen

  • un input — muchas caras vía type
  • empareja type con los datos
  • radios comparten name; checkbox solo
  • etiqueta siempre lo visible
  • elementos de formulario y atributos de input son capas distintas
  • siguiente: atributos de input

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
5
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 51 de 68
Html Tutorial