HTML
Fundamentos de los formularios HTML: form, controles, envío de datos, métodos GET y POST, encoding y comportamiento nativo del navegador.
Un formulario reúne controles para capturar, validar y enviar datos.
<form action="/contact" method="post">
<label for="email">Correo</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>
<button type="submit">Enviar</button>
</form><form action="/orders" method="post">...</form>Representa una sección con controles que pueden enviarse como un conjunto.
El elemento define:
action.method.enctype.Form-associated elements incluyen:
button
fieldset
input
object
output
select
textareaNo todos se envían de la misma forma. Para participar como form data, un control normalmente necesita name, estar asociado al formulario y no estar disabled.
<input name="email" type="email">name es la clave usada al construir los datos:
email=hello@example.comid y name pueden coincidir, pero resuelven tareas diferentes:
id: relaciones dentro del documento.name: clave del dato enviado.<label for="email">Correo electrónico</label>
<input id="email" name="email" type="email">El texto visible nombra el control. Activar el label puede enfocar o cambiar el control asociado.
No uses placeholder como reemplazo del label.
<label>
Correo electrónico
<input name="email" type="email">
</label>Es válido, aunque la asociación explícita mediante for e id suele ser más flexible para layout y compatibilidad.
No coloques varios controles labelable dentro de un mismo label.
<input type="text" name="name">input es un elemento void. Su comportamiento depende de type.
Si omites o escribes un type inválido, el estado predeterminado suele ser text.
<textarea name="message" rows="6"></textarea>El valor inicial vive entre etiquetas, no en value:
<textarea name="message">Mensaje inicial</textarea>El espacio e indentación dentro pueden formar parte del valor inicial.
<select name="size">
<option value="small">Pequeña</option>
<option value="medium">Mediana</option>
<option value="large">Grande</option>
</select>El texto visible y el value enviado pueden ser distintos.
<button type="submit">Enviar</button>Dentro de un formulario, el default de button es submit. Declara type="button" para acciones que no envían:
<button type="button">Añadir otro campo</button><fieldset>
<legend>Método de contacto</legend>
<label>
<input type="radio" name="contact" value="email">
Correo
</label>
<label>
<input type="radio" name="contact" value="phone">
Teléfono
</label>
</fieldset>Agrupan controles relacionados y comunican una pregunta común.
Al enviar, se consideran controles exitosos según reglas del formulario.
Normalmente no se incluyen:
name.readonly sí permite enviar el valor; disabled, normalmente no.
<form id="profile-form" action="/profile" method="post">...</form>
<button type="submit" form="profile-form">
Guardar perfil
</button>El atributo form asocia un control con un formulario por ID, aunque no sea descendiente.
Esto aporta en layouts complejos, pero el orden DOM y la experiencia deben seguir siendo claros.
En ciertos formularios, presionar Enter dentro de un control puede activar el submit predeterminado.
No dependas solo de clicks de JavaScript. Escucha el evento submit del formulario cuando personalizas el proceso.
<input
name="email"
type="email"
required
maxlength="120"
>El navegador puede impedir el envío y presentar errores básicos.
No sustituye validación del servidor ni siempre ofrece mensajes adaptados al diseño. Es una base que puede mejorarse.
<form action="/search" method="get">...</form>GET representa una consulta y coloca datos en la URL.
<form action="/orders" method="post">...</form>POST envía un cuerpo para procesar o cambiar estado según la aplicación.
El método HTML no define por sí solo seguridad, idempotencia ni autorización.
<form action="/search" method="get">
<label for="query">Buscar</label>
<input id="query" name="q" type="search">
<button>Buscar</button>
</form>Debe funcionar mediante navegación normal. JavaScript puede mejorar resultados en vivo, pero conserva la acción real cuando sea posible.
<form action="/contact" method="post">
<fieldset>
<legend>Datos de contacto</legend>
<div>
<label for="name">Nombre</label>
<input
id="name"
name="name"
type="text"
autocomplete="name"
required
>
</div>
<div>
<label for="email">Correo</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>
</div>
<div>
<label for="message">Mensaje</label>
<textarea
id="message"
name="message"
rows="6"
required
></textarea>
</div>
</fieldset>
<button type="submit">Enviar mensaje</button>
</form>¿Por qué un input con id="email" pero sin name no suele aparecer en los datos enviados?
Porque id identifica el elemento dentro del documento; name define la clave con la que el control participa en el form data set.
Labels y nombres accesibles profundiza en cómo se identifica cada control.