Skip to content
Logo de la documentación HoneyCode

7. Formularios y Controles

Los formularios permiten a los usuarios interactuar con tu sitio web, enviando información como datos de contacto, búsquedas, registros y más.

📋 Estructura Básica del <form>

Section titled “📋 Estructura Básica del <form>”

El elemento <form> es el contenedor de todos los controles de entrada.

Estructura del formulario

Section titled “Estructura del formulario”
<form action="procesar.php" method="POST">
  <!-- Controles de entrada aquí -->
  <input type="text" name="nombre">
  <button type="submit">Enviar</button>
</form>

Componentes:

  • <form> - Contenedor del formulario
  • action - URL donde se envían los datos
  • method - Método HTTP (GET o POST)
  • Controles de entrada - Campos para datos
  • Botón de envío - Para enviar el formulario

Ejemplo básico

Section titled “Ejemplo básico”
<!-- Formulario de contacto simple -->
<form action="/contacto" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">


  <label for="email">Email:</label>
  <input type="email" id="email" name="email">


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

📝 Campos de Entrada <input>

Section titled “📝 Campos de Entrada <input>”

El elemento <input> es el más versátil para capturar datos.

Campos de texto

Section titled “Campos de texto”
<!-- text: Texto simple -->
<input type="text" name="nombre" placeholder="Tu nombre">


<!-- password: Contraseña (oculta caracteres) -->
<input type="password" name="password" placeholder="••••••••">


<!-- email: Email (valida formato) -->
<input type="email" name="email" placeholder="correo@ejemplo.com">


<!-- tel: Teléfono -->
<input type="tel" name="telefono" placeholder="+34 123 456 789">


<!-- url: URL (valida formato) -->
<input type="url" name="sitio" placeholder="https://ejemplo.com">


<!-- search: Búsqueda (con botón de limpiar) -->
<input type="search" name="buscar" placeholder="Buscar...">

Atributos comunes:

<!-- placeholder: Texto de ayuda -->
<input type="text" placeholder="Escribe aquí">


<!-- value: Valor inicial -->
<input type="text" value="Valor predeterminado">


<!-- maxlength: Longitud máxima -->
<input type="text" maxlength="50">


<!-- minlength: Longitud mínima -->
<input type="text" minlength="3">


<!-- size: Ancho visual -->
<input type="text" size="30">


<!-- readonly: Solo lectura -->
<input type="text" value="No editable" readonly>


<!-- disabled: Deshabilitado -->
<input type="text" disabled>


<!-- required: Campo obligatorio -->
<input type="text" required>


<!-- autocomplete: Autocompletar -->
<input type="email" autocomplete="email">
<input type="text" autocomplete="name">
<input type="password" autocomplete="current-password">

Tabla de tipos de texto:

TipoDescripciónValidación
textTexto generalNinguna
passwordContraseña ocultaNinguna
emailCorreo electrónicoFormato email
telTeléfonoNinguna (solo móvil)
urlURLFormato URL
searchBúsquedaNinguna

📄 Textarea y Select

Section titled “📄 Textarea y Select”

Elementos para texto largo y listas desplegables.

<textarea> - Área de texto

Section titled “<textarea> - Área de texto”
<!-- Textarea básico -->
<textarea name="mensaje" rows="5" cols="50"></textarea>


<!-- Con placeholder -->
<textarea
  name="comentario"
  placeholder="Escribe tu comentario aquí..."
  rows="4"
></textarea>


<!-- Con valor inicial -->
<textarea name="descripcion" rows="6">
Este es el texto inicial que aparecerá
en el textarea cuando se cargue la página.
</textarea>


<!-- Atributos -->
<textarea
  name="mensaje"
  rows="5"              <!-- Filas visibles -->
  cols="50"             <!-- Columnas visibles -->
  maxlength="500"       <!-- Longitud máxima -->
  minlength="10"        <!-- Longitud mínima -->
  placeholder="..."     <!-- Texto de ayuda -->
  required              <!-- Obligatorio -->
  readonly              <!-- Solo lectura -->
  disabled              <!-- Deshabilitado -->
  wrap="soft"           <!-- Ajuste de línea (soft/hard) -->
></textarea>

Características:

  • ✅ Para texto de múltiples líneas
  • ✅ Redimensionable por el usuario (CSS: resize)
  • ✅ Preserva saltos de línea y espacios
  • ✅ No tiene atributo value (contenido entre etiquetas)

Control de redimensionamiento (CSS):

/* Permitir redimensionar */
textarea {
  resize: both; /* horizontal, vertical, both, none */
}


/* Solo vertical */
textarea {
  resize: vertical;
}


/* No redimensionable */
textarea {
  resize: none;
}

🔘 Botones

Section titled “🔘 Botones”

Diferentes tipos de botones para formularios.

<button> - Botón

Section titled “<button> - Botón”
<!-- submit: Enviar formulario (por defecto) -->
<button type="submit">Enviar</button>


<!-- reset: Limpiar formulario -->
<button type="reset">Limpiar</button>


<!-- button: Botón genérico (para JavaScript) -->
<button type="button" onclick="alert('Hola!')">Clic aquí</button>


<!-- Con contenido HTML -->
<button type="submit">
  <img src="icono.png" alt=""> Enviar con icono
</button>


<!-- Deshabilitado -->
<button type="submit" disabled>No disponible</button>


<!-- Con atributos de formulario -->
<button type="submit" formaction="/otra-ruta" formmethod="POST">
  Enviar a otra ruta
</button>

<input type="button"> - Alternativa

Section titled “<input type="button"> - Alternativa”
<!-- submit: Enviar -->
<input type="submit" value="Enviar">


<!-- reset: Limpiar -->
<input type="reset" value="Limpiar">


<!-- button: Genérico -->
<input type="button" value="Botón" onclick="alert('Hola!')">


<!-- image: Botón con imagen -->
<input type="image" src="boton.png" alt="Enviar">

Diferencias:

ElementoContenido HTMLEstiloUso recomendado
<button>✅ SíMás flexiblePreferido
<input>❌ No (solo texto)LimitadoCasos simples

✅ Validaciones HTML5

Section titled “✅ Validaciones HTML5”

HTML5 incluye validaciones nativas sin necesidad de JavaScript.

Atributos básicos

Section titled “Atributos básicos”
<!-- required: Campo obligatorio -->
<input type="text" name="nombre" required>


<!-- minlength y maxlength: Longitud -->
<input type="text" name="usuario" minlength="3" maxlength="20">


<!-- min y max: Valores numéricos -->
<input type="number" name="edad" min="18" max="100">
<input type="date" name="fecha" min="2024-01-01" max="2024-12-31">


<!-- step: Incremento -->
<input type="number" name="precio" step="0.01">
<input type="range" name="volumen" step="5">


<!-- pattern: Expresión regular -->
<input type="text" name="codigo" pattern="[A-Z]{3}-[0-9]{4}">


<!-- multiple: Múltiples valores -->
<input type="email" name="emails" multiple>
<input type="file" name="archivos" multiple>

Validación por tipo

Section titled “Validación por tipo”
<!-- email: Valida formato de email -->
<input type="email" name="email" required>


<!-- url: Valida formato de URL -->
<input type="url" name="sitio" required>


<!-- tel: Teléfono (sin validación automática) -->
<input type="tel" name="telefono" pattern="[0-9]{9}">


<!-- number: Solo números -->
<input type="number" name="cantidad" min="1">


<!-- date: Fecha válida -->
<input type="date" name="nacimiento" max="2024-12-31">

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas los formularios, aprenderás:

  • ✅ Elementos semánticos HTML5
  • ✅ Estructura de página moderna
  • ✅ Header, nav, main, aside, footer
  • ✅ Artículos y secciones
🐝