Curso HTML 8. Formularios básicos

Formularios Básicos en HTML

Los formularios en HTML son la principal vía de interacción entre el usuario y el servidor. Mediante ellos podemos recoger datos, enviarlos y procesarlos. A continuación profundizaremos en cada elemento y atributo relevante para crear formularios robustos y accesibles.

1. La etiqueta

y sus atributos

La etiqueta <form> encierra los controles de usuario (campos, botones, select, etc.) y define cómo se envían esos datos al servidor.

Atributos principales de <form>

Ejemplo de formulario básico

<form action='/procesar' method='post' enctype='application/x-www-form-urlencoded' autocomplete='on'>
  <!-- Campos y controles irán aquí -->
</form>

2. Controles de formulario

Cada control tiene su función, atributos específicos y formas de validación.

2.1. Campo de texto (<input type='text'>)

• Atributos: name, id, value, placeholder, maxlength, size, required, pattern, readonly, disabled, autofocus.
• Validación: pattern usa expresiones regulares.

<label for='usuario'>Usuario:</label>
<input 
  type='text' 
  id='usuario' 
  name='usuario' 
  placeholder='Introduce tu usuario' 
  maxlength='20' 
  required 
  pattern='[A-Za-z0-9]+' 
/>

2.2. Campo de contraseña (<input type='password'>)

Oculta el texto introducido.

<label for='clave'>Contraseña:</label>
<input 
  type='password' 
  id='clave' 
  name='clave' 
  minlength='8' 
  required 
/>

2.3. Campo de correo electrónico (<input type='email'>)

Valida la sintaxis de email.

<label for='email'>>Email:</label>
<input 
  type='email' 
  id='email' 
  name='email' 
  placeholder='ejemplo@dominio.com' 
  required 
/>

2.4. Campo numérico (<input type='number'>)

Control de valores numéricos con atributos min, max y step.

<label for='edad'>Edad:</label>
<input 
  type='number' 
  id='edad' 
  name='edad' 
  min='18' 
  max='99' 
  step='1' 
  required 
/>

2.5. Casillas de verificación (<input type='checkbox'>)

Permite múltiples selecciones independientes.

<fieldset>
  <legend>Intereses:</legend>
  <label>
    <input type='checkbox' name='intereses' value='musica' /> Música
  </label>
  <label>
    <input type='checkbox' name='intereses' value='deportes' /> Deportes
  </label>
  <label>
    <input type='checkbox' name='intereses' value='cine' /> Cine
  </label>
</fieldset>

2.6. Botones de opción (<input type='radio'>)

Permiten selección única dentro de un grupo (mismo name).

<fieldset>
  <legend>Género:</legend>
  <label>
    <input type='radio' name='genero' value='masculino' required /> Masculino
  </label>
  <label>
    <input type='radio' name='genero' value='femenino' /> Femenino
  </label>
</fieldset>

2.7. Área de texto (<textarea>)

Para textos multilínea.

<label for='comentario'>Comentario:</label>
<textarea 
  id='comentario' 
  name='comentario' 
  rows='5' 
  cols='40' 
  placeholder='Escribe tu comentario aquí...' 
  required
>
</textarea>

2.8. Menú desplegable (<select> / <option>)

Permite seleccionar una o varias opciones.

<label for='pais'>>País:</label>
<select id='pais' name='pais' required>
  <option value='' disabled selected>-- Selecciona --</option>
  <optgroup label='Europa'>
    <option value='es'>España</option>
    <option value='fr'>Francia</option>
  </optgroup>
  <optgroup label='América'>
    <option value='mx'>México</option>
    <option value='ar'>Argentina</option>
  </optgroup>
</select>

2.9. Envío de archivos (<input type='file'>)

Para subir uno o varios archivos. Requiere enctype='multipart/form-data' en el <form>

<label for='foto'>>Foto de perfil:</label>
<input 
  type='file' 
  id='foto' 
  name='foto' 
  accept='image/png, image/jpeg' 
  required 
/>

<!-- Botón de enviar -->
<button type='submit'>Enviar formulario</button>

<!-- Botón de reset para limpiar campos -->
<button type='reset'>Limpiar formulario</button>

<form id='miForm' action='/submit' method='post'>
  <label for='edad'>Edad:</label>
  <input type='number' id='edad' name='edad' min='18' max='99' required />
  <button type='submit'>Enviar</button>
</form>

<script>
// Seleccionamos el formulario
var form = document.getElementById('miForm');
form.addEventListener('submit', function(event) {
  var edad = document.getElementById('edad').value;
  if (edad < 18 || edad > 99) {
    alert('La edad debe estar entre 18 y 99 años.');
    event.preventDefault(); // Detiene el envío
  }
});
</script>