HTML Atributos del formulario
Este capítulo describe los diferentes atributos del elemento HTML <form>.
El atributo de Action
El atributo action define la acción que se realizará cuando se envíe el formulario.
Por lo general, los datos del formulario se envían a un archivo en el servidor cuando el usuario hace clic en el botón de enviar.
En el siguiente ejemplo, los datos del formulario se envían a un archivo llamado "action_page.html". Este archivo contiene un script del lado del servidor que maneja los datos del formulario:
Ejemplo
Al enviar, envíe los datos del formulario a "action_page.html":
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo »
Consejo: Si se omite el atributo action, la acción se establece en la página actual.
El atributo Target
El atributo target especifica dónde mostrar la respuesta que se recibe después de enviar el formulario.
El atributo target puede tener uno de los siguientes valores:
| Valor | Descripción |
|---|---|
| _blank | La respuesta se muestra en una nueva ventana o pestaña |
| _self | La respuesta se muestra en la ventana actual |
| _parent | La respuesta se muestra en el marco principal |
| _top | La respuesta se muestra en el cuerpo completo de la ventana |
| framename | La respuesta se muestra en un iframe con nombre |
El valor predeterminado es _self, lo que significa que la respuesta se abrirá en la ventana actual.
Ejemplo
Aquí, el resultado enviado se abrirá en una nueva pestaña del navegador:
<form action="/action_page.html" target="_blank">
Inténtalo tú mismo »
El atributo del Method
El atributo method especifica el método HTTP que se utilizará al enviar los datos del formulario.
Los datos del formulario se pueden enviar como variables URL (con method="get") o como transacción posterior HTTP (con method="post").
El método HTTP predeterminado al enviar datos de formulario es GET.
Ejemplo
Este ejemplo utiliza el método GET al enviar los datos del formulario:
<form action="/action_page.html" method="get">
Inténtalo tú mismo »
Ejemplo
Este ejemplo utiliza el método POST al enviar los datos del formulario:
<form action="/action_page.html" method="post">
Inténtalo tú mismo »
Notas sobre GET:
- Agrega los datos del formulario a la URL, en pares nombre/valor
- ¡NUNCA utilice GET para enviar datos confidenciales! (¡Los datos del formulario enviado son visibles en la URL!)
- La longitud de una URL es limitada (2048 caracteres)
- Útil para envíos de formularios en los que un usuario desea marcar el resultado como favorito
- GET es bueno para datos no seguros, como cadenas de consulta en Google
Notas sobre la publicación:
- Agrega los datos del formulario dentro del cuerpo de la solicitud HTTP (los datos del formulario enviado no se muestran en la URL)
- POST no tiene limitaciones de tamaño y se puede utilizar para enviar grandes cantidades de datos.
- Los envíos de formularios con POST no se pueden marcar como favoritos
Consejo: ¡Utilice siempre POST si los datos del formulario contienen información personal o confidencial!
El atributo Autocompletar
El atributo autocomplete especifica si un formulario debe tener activado o desactivado el autocompletado.
Cuando la función de autocompletar está activada, el navegador completa automáticamente los valores basándose en los valores que el usuario ha ingresado anteriormente.
Ejemplo
Un formulario con autocompletar activado:
<form action="/action_page.html" autocomplete="on">
Inténtalo tú mismo »
El atributo Novalidate
El atributo novalidate es un atributo booleano.
Cuando está presente, especifica que los datos del formulario (input) no deben validarse cuando se envían.
Ejemplo
Un formulario con un atributo novalidar:
<form action="/action_page.html" novalidate>
Inténtalo tú mismo »
HTML Ejercicios
Lista de todos los atributos de <form>
| Atributo | Descripción |
|---|---|
| accept-charset | Especificar las codificaciones de caracteres utilizadas para el envío del formulario |
| action | Especificar dónde enviar los datos del formulario cuando se envía un formulario |
| autocomplete | Especificar si un formulario debe tener activado o desactivado el autocompletado |
| enctype | Especifique cómo se deben codificar los datos del formulario al enviarlos al servidor (solo para method="post") |
| method | Especifique el método HTTP que se utilizará al enviar datos del formulario |
| name | Especifique el nombre del formulario |
| novalidate | Especifique que el formulario no debe validarse cuando se envía |
| rel | Especifica la relación entre un recurso vinculado y el documento actual |
| target | Especificar dónde mostrar la respuesta que se recibe después de enviar el formulario |
