Formularios y Controles de Usuario

Formularios y Controles de Usuario en HTML

Los formularios en HTML permiten a los usuarios ingresar información que puede enviarse y procesarse en un servidor. Incluyen diversos tipos de controles como campos de texto, botones, listas desplegables y más.

Estructura básica (<form>)

Se utiliza <form> con atributos principales:

action: destino al que se enviarán los datos.
method: método de envío (GET o POST).

<form action="" method="post">
   <!-- Controles aquí -->
</form>

Campos de entrada (<input>)

Los campos de entrada permiten capturar diferentes tipos de datos:

<input type="text" name="nombre" placeholder="Nombre" required>
<input type="email" name="correo" placeholder="Correo electrónico">
<input type="password" name="clave" required>
<input type="number" name="edad" min="18" max="99">
<input type="date" name="nacimiento">
<input type="checkbox" name="suscribir"> Suscribirme
<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Femenino
<input type="file" name="documento">

Áreas de texto y botones (<textarea>, <button>)

<textarea name="mensaje" rows="4" cols="40"></textarea>

<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
<button type="button">Botón simple</button>

Listas desplegables (<select>, <option>, <optgroup>)

<select name="pais">
   <option value="bo">Bolivia</option>
   <option value="mx">México</option>
   <optgroup label="Europa">
      <option value="es">España</option>
      <option value="fr">Francia</option>
   </optgroup>
</select>

Etiquetas y agrupamientos (<label>, <fieldset>, <legend>)

<label for="usuario">Usuario:</label>
<input type="text" id="usuario" name="usuario">

<fieldset>
   <legend>Datos personales</legend>
   <input type="text" name="nombre" placeholder="Nombre">
   <input type="number" name="edad" placeholder="Edad">
</fieldset>

Otros elementos (<datalist>, <output>, <progress>, <meter>)

<datalist id="navegadores">
   <option value="Chrome">
   <option value="Firefox">
   <option value="Edge">
</datalist>
<input list="navegadores" name="navegador">

<output name="resultado">0</output>

<progress value="70" max="100"></progress>

<meter value="0.6">60%</meter>

Resumen

Crear formularios con <form> y definir action y method.
Usar campos de entrada variados: <input> de texto, correo, contraseña, número, fecha, checkbox, radio y archivos.
Incluir áreas de texto con <textarea> y botones <button> de diferentes tipos.
Implementar listas desplegables con <select>, <option> y <optgroup>.
Etiquetar y agrupar elementos usando <label>, <fieldset> y <legend>.
Otros elementos útiles: <datalist>, <output>, <progress> y <meter>.