Este capítulo describe los diferentes atributos para el elemento HTML <form>.
El atributo 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 Enviar. En el siguiente ejemplo, los datos del formulario se envían a un archivo llamado “action_page.php”. Este archivo contiene un script del lado del servidor que maneja los datos del formulario:
Ejm
<form action="/action_page.php"> <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>
Sugerencia: 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.
Ejm
<form action="/action_page.php" target="_blank">
El atributo 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 de URL (con method=”get”) o como transacción de publicación HTTP (con method=”post”). El método HTTP predeterminado al enviar datos de formulario es GET.
Ejm
<form action="/action_page.php" method="get">
Notas sobre GET:
- Agrega los datos del formulario a la URL, en pares de nombre/valor
- ¡NUNCA uses 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
- GET es bueno para datos no seguros, como cadenas de consulta en Google
Notas sobre POST:
- 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
Consejo: ¡siempre usa POST si los datos del formulario contienen información confidencial o personal!
El atributo autocomplete
El atributo autocomplete especifica si un formulario debe tener la opción de autocompletar activada o desactivada.
Cuando autocomplete está activado, el navegador completa automáticamente los valores en función de los valores que el usuario ha ingresado anteriormente.
Ejm
<form action="/action_page.php" autocomplete="on">
El atributo novalidate
El atributo novalidate es un atributo booleano. Cuando está presente, especifica que los datos del formulario (entrada) no deben validarse cuando se envían.
Ejm
<form action="/action_page.php" novalidate>
Listado de todos los atributos form
| Atributo | Descripción |
|---|---|
| accept-charset | Especifica las codificaciones de caracteres utilizadas para el envío de formularios. |
| action | Especifica dónde enviar los datos del formulario cuando se envía un formulario. |
| autocomplete | Especifica si un formulario debe tener la función de autocompletar activada o desactivada. |
| enctype | Especifica cómo se deben codificar los datos del formulario al enviarlos al servidor (solo para method=”post”). |
| method | Especifica el método HTTP a utilizar al enviar datos de formulario. |
| name | Especifica el nombre del formulario. |
| novalidate | Especifica que el formulario no debe validarse cuando se envía. |
| rel | Especifica la relación entre un recurso vinculado y el documento actual. |
| target | Especifica dónde mostrar la respuesta que se recibe después de enviar el formulario. |