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