Atributo form
El atributo form en HTML se utiliza dentro de elementos
como <input>, <button>, o
<select> que están fuera del contenedor del
formulario, es decir, fuera de <form>. Este atributo
permite que estos elementos pertenezcan a un formulario específico
mediante el id del formulario, haciendo que envíen sus datos
como si estuvieran dentro del contenedor.
Esto es especialmente útil para diseños complejos donde los elementos de entrada están separados del formulario principal.
Nota: El valor del atributo form debe
coincidir con el valor del atributo id del formulario al
que se asocia el elemento.
Ejemplo
En este ejemplo, el botón de envío está fuera del formulario pero se
asocia a él usando el atributo form.
Código del ejemplo
<form id="miFormulario" action="/submit-form">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
</form>
<!-- Botón fuera del formulario pero asociado a él con form="miFormulario" -->
<button type="submit" form="miFormulario">Enviar</button>
Atributo action
El atributo action en HTML especifica la URL a la que se enviarán los datos del formulario cuando se presione el botón de envío. Este atributo puede llevar rutas relativas o absolutas.
Por ejemplo, al definir action="/submit-form", el
formulario enviará sus datos a la ruta /submit-form en el
servidor actual. Si el atributo se deja vacío, los datos se enviarán a
la misma URL donde se encuentra el formulario.
Utilizar el action es fundamental para dirigir los datos
del formulario al servidor o API que los procesará, permitiendo que los
formularios interactúen con aplicaciones del lado del servidor.
Ejemplo
En este ejemplo, el formulario enviará sus datos a la URL
/submit-form cuando se presione el botón de "Enviar".
Código del ejemplo
<form action="/submit-form">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>
Atributo enctype
El atributo enctype en HTML define cómo se deben
codificar los datos de un formulario antes de enviarlos al servidor.
Este atributo es importante cuando el formulario contiene campos de
carga de archivos o necesita un formato específico de datos. Las
opciones más comunes para enctype son:
-
application/x-www-form-urlencoded: Esta es la codificación predeterminada y envía los datos en pares de clave-valor separados por&. Es adecuada para formularios que no contienen archivos. -
multipart/form-data: Usado cuando el formulario contiene archivos. Envía los datos en varias partes y es necesario cuando se usa el campo de entrada de tipofile. -
text/plain: Envía los datos como texto sin formato, aunque es menos común y no adecuado para la mayoría de los casos de envío de formularios.
En resumen, el atributo enctype es esencial cuando se
requiere enviar archivos o manejar formatos específicos de datos en los
formularios HTML.
Ejemplo
En este ejemplo, el formulario permite al usuario cargar un archivo y
usa el atributo enctype="multipart/form-data" para
garantizar que el archivo se envíe correctamente.
Código del ejemplo
<form action="/upload-file" enctype="multipart/form-data">
<label for="archivo">Selecciona un archivo:</label>
<input type="file" id="archivo" name="archivo" required>
<button type="submit">Subir archivo</button>
</form>
Atributo method
El atributo method en HTML define el método HTTP que el navegador utilizará para enviar los datos del formulario al servidor. Este atributo tiene dos valores principales:
-
GET: Envía los datos del formulario a través de la URL, lo que permite verlos en la barra de direcciones. Este método es adecuado para formularios donde los datos no son sensibles, como una búsqueda, y es útil cuando queremos permitir el marcaje de la URL para compartir o guardar. -
POST: Envía los datos de manera oculta en el cuerpo de la solicitud, lo que lo hace más seguro y adecuado para formularios con información sensible, como datos personales o contraseñas. Este método no expone los datos en la URL.
Elegir entre GET y POST depende de la
privacidad de los datos del formulario y el propósito del formulario.
Ejemplo
En este ejemplo, el formulario utiliza el método
POST para enviar un nombre de usuario de manera segura.
Código del ejemplo
<form action="/submit-user" method="POST">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Enviar</button>
</form>
Atributo target
El atributo target en un formulario especifica dónde se
debe abrir la respuesta tras enviar el formulario. Los valores más
comunes para target son:
-
_self: Abre la respuesta en la misma ventana o pestaña (este es el valor predeterminado). -
_blank: Abre la respuesta en una nueva ventana o pestaña. -
_parent: Abre la respuesta en el marco padre (si el formulario está dentro de un marco). -
_top: Abre la respuesta en toda la ventana del navegador, eliminando cualquier marco.
Utilizar el atributo target es útil para controlar la
experiencia del usuario y cómo interactúan con el contenido después de
enviar un formulario.
Ejemplo
En este ejemplo, el formulario abrirá la respuesta en una nueva
pestaña utilizando target="_blank".
Código del ejemplo
<form action="/submit-form" target="_blank">
<label for="info">Información:</label>
<input type="text" id="info" name="info" required>
<button type="submit">Enviar</button>
</form>
Atributo novalidate
El atributo novalidate en un formulario HTML se utiliza para desactivar la validación de los campos de formulario antes de enviarlos. Esto es útil en situaciones donde se desea que el formulario se envíe sin preocuparse por la validez de los datos ingresados.
Cuando se aplica novalidate, el navegador no realizará
ninguna verificación de los datos del formulario, permitiendo que se
envíen incluso si hay campos vacíos o datos que no cumplen con los
requisitos de validación.
Es importante utilizar este atributo con cuidado, ya que puede afectar la integridad de los datos que se envían al servidor.
Ejemplo
En este ejemplo, el formulario permite el envío sin validar los datos
ingresados gracias al atributo novalidate.
Código del ejemplo
<form action="/submit-form" novalidate>
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<button type="submit">Enviar</button>
</form>
Atributo formenctype
El atributo formenctype se utiliza en un formulario
HTML para especificar cómo deben ser codificados los datos que se envían
al servidor. Este atributo es especialmente relevante cuando se utiliza
el método POST y se suben archivos. Los valores más comunes
para formenctype son:
-
application/x-www-form-urlencoded: Este es el valor predeterminado y se utiliza para enviar datos simples como texto. Los datos se codifican como una cadena de pares clave-valor. -
multipart/form-data: Este valor se utiliza cuando se envían archivos. Permite la inclusión de datos binarios y asegura que los archivos se envíen correctamente. -
text/plain: Este valor envía los datos como texto sin formato. Sin embargo, este tipo de codificación no es comúnmente utilizada y puede ser incompatible con muchos servidores.
Elegir el valor correcto para el atributo formenctype es
crucial para garantizar que los datos se envíen y procesen correctamente
en el servidor.
Ejemplo
En este ejemplo, se utiliza el atributo
formenctype="multipart/form-data" para permitir la subida
de archivos.
Código del ejemplo
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Selecciona un archivo:</label>
<input type="file" id="file" name="file" required>
<button type="submit">Subir</button>
</form>
Atributo formmethod
El atributo formmethod se utiliza en un elemento
<button> o
<input type="submit"> para especificar el método HTTP
que se usará al enviar el formulario. Este atributo permite
sobreescribir el método especificado en el atributo
method del formulario. Los valores que puede aceptar son:
-
GET: Este método envía los datos del formulario a través de la URL. -
POST: Este método envía los datos en el cuerpo de la solicitud, manteniendo la URL limpia y segura.
Utilizar formmethod es útil cuando se desea utilizar
diferentes métodos para enviar datos desde el mismo formulario,
dependiendo del botón que se presione.
Ejemplo
En este ejemplo, se utilizan dos botones de envío: uno con
POST y otro con GET para enviar el mismo
formulario con diferentes métodos.
Código del ejemplo
<form action="/submit-form">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<button type="submit" formmethod="POST">Enviar como POST</button>
<button type="submit" formmethod="GET">Enviar como GET</button>
</form>
Atributo formnovalidate
El atributo formnovalidate se utiliza en un botón de envío dentro de un formulario. Su función es desactivar la validación del formulario en el momento del envío. Esto es útil cuando se desea enviar el formulario sin verificar los campos requeridos o las condiciones de validación establecidas.
Este atributo es especialmente relevante en formularios donde puede ser necesario realizar una acción sin que los campos sean validados, como enviar un formulario de cancelación o una opción que no requiera verificación de datos.
Ejemplo
En este ejemplo, el botón de cancelar envía el formulario sin realizar ninguna validación.
Código del ejemplo
<form action="/submit-form" method="POST">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
<button type="submit" formnovalidate>Cancelar</button>
</form>
Atributo onsubmit
El atributo onsubmit se utiliza en el elemento
<form> para especificar un script que se ejecutará
cuando se envíe el formulario. Este atributo permite realizar acciones
adicionales antes o después de que se envíen los datos, como validar
campos o ejecutar funciones JavaScript.
Por ejemplo, se puede utilizar para mostrar un mensaje de confirmación o realizar cálculos antes del envío. Este atributo es muy útil para mejorar la experiencia del usuario y garantizar que los datos sean correctos antes de ser enviados.
Ejemplo
En este ejemplo, se muestra un mensaje cuando se envía el formulario.
Código del ejemplo
<form action="/submit-form" method="POST" onsubmit="return confirm('¿Está seguro de que desea enviar el formulario?');">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<button type="submit">Enviar</button>
</form>
Atributo onreset
El atributo onreset se utiliza en el elemento
<form> para especificar un script que se ejecutará
cuando se restablezcan los campos del formulario. Este atributo es útil
para realizar acciones o mostrar mensajes después de que el formulario
se ha reiniciado.
Se puede usar, por ejemplo, para limpiar campos adicionales, mostrar un aviso o realizar otras acciones de limpieza que se deseen implementar después de restablecer el formulario.
Ejemplo
En este ejemplo, se muestra un mensaje cuando se restablece el formulario.
Código del ejemplo
<form action="/submit-form" method="POST" onreset="alert('Formulario restablecido');">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
</form>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias