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