Atributos de formulario HTML
Los formularios dieron el esqueleto. Los atributos de formulario afinan el comportamiento — action vacío, get vs post, autofill, checks y nombrar el form. Tipos de input y form= después.
Por qué importan los atributos
Dos formularios parecidos pueden comportarse distinto. Los atributos en form cambian destino, estilo HTTP, autofill y validación sin campos nuevos.
Respuesta directa
1) action + method. 2) action vacío → página actual. 3) autocomplete. 4) novalidate solo a propósito. 5) id/name del form para scripts.
📊 Form attributes at a glance
| Attribute | Role | Beginner tip |
|---|---|---|
| action | Where the browser sends the data | Empty often means “this page” |
| method | get (query string) or post (request body) | Prefer post for private or large data |
| autocomplete | Autofill hint for the form | off for sensitive practice forms |
| novalidate | Skip built-in HTML checks on submit | Demo tool — not a production default |
| name / id | Identify the form element itself | Useful when scripts or CSS target the form |
Formulario de contacto con atributos
Amplía el esqueleto: mantén campos etiquetados y decora la etiqueta de apertura form.
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>
Leer el demo de contacto
- id/name identifican el formulario
- action es ruta explícita
- post mantiene el mensaje fuera de la barra
- autocomplete=on permite autofill
- name de campos clavean el payload
- required es de campo
Búsqueda GET y novalidate opcional
La búsqueda suele usar get para la query en la URL. No datos sensibles. autocomplete=off para práctica. novalidate solo demos especiales.
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>
<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->
Leer el demo de búsqueda
- get añade ?q=
- autocomplete=off reduce autofill
- sin required se envían vacíos
- novalidate es solo recordatorio
- nunca get para contraseñas
action vacío y GET frente a POST
- vacío/omitido → URL actual
- get para filtros y búsqueda
- post para registro y mensajes
- method solo no es seguridad
Práctica — afinar atributos
- Vacía action
- Cambia method de la búsqueda
- autocomplete=off en contacto
- novalidate temporal con required
- Quita novalidate
- Confirma id del form y name de campos
- Frase: los atributos afinan destino, estilo, autofill y checks
Errores fáciles
- Sorpresa con action vacío
- Contraseñas con get
- novalidate permanente en vivo
- Confundir name del form con name del campo
- Creer que off es garantía de seguridad
- Intercambiar action y method
Resumen
- Los atributos afinan el envío
- action + method núcleo; vacío → URL actual
- autocomplete y novalidate opcionales
- name/id del form vs name de campo
- post para privado
- siguiente: elementos de formulario
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior