Tipos de Inputs (<input>)

El elemento <input> es posiblemente el elemento más importante de los formularios HTML. Es extremadamente versátil y su comportamiento cambia drásticamente dependiendo del valor de su atributo type.

No tiene etiqueta de cierre y se usa en combinación obligatoria de un atributo name (para que el servidor sepa el nombre del dato que está procesando) y, preferiblemente, un atributo id para asociarlo con su etiqueta correspondiente <label>.

Tipos Comunes de Input

Texto Básico (type="text")

Un campo de línea única para ingresar texto (nombres, títulos).

<label for="nombre">Nombre Completo:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ej: Juan Pérez">

(El atributo placeholder muestra un texto de sugerencia en gris antes de que el usuario empiece a escribir).

Contraseñas (type="password")

Oculta visualmente lo que el usuario está escribiendo (reemplazándolo con puntos o asteriscos).

<label for="pwd">Contraseña:</label>
<input type="password" id="pwd" name="pwd">

Correo Electrónico (type="email")

HTML5 fuerza una validación automática de que el formato de texto ingresado se parezca a un correo electrónico (contiene un @ y un dominio).

<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email">

Casillas de Verificación (type="checkbox")

Para opciones donde se pueden seleccionar cero, una, o varias.

<input type="checkbox" id="acepto" name="terminos" value="si">
<label for="acepto">Acepto los términos y condiciones</label>

Botones de Opciones (type="radio")

Para opciones excluyentes, donde solo se puede seleccionar una. Todos los inputs de un mismo grupo deben compartir exactamente el mismo atributo name para que actúen de esta manera.

<p>Elige tu color favorito:</p>
<input type="radio" id="rojo" name="color" value="rojo">
<label for="rojo">Rojo</label>

<input type="radio" id="azul" name="color" value="azul">
<label for="azul">Azul</label>

Botón de Envío (type="submit")

Se usa para crear el botón que envía todo el formulario. (Un <button type="submit">Enviar</button> funciona exactamente igual).

<input type="submit" value="Guardar Cambios">