Cada formulario HTML se ocupa del lado del servidor con un atributo de acción. El atributo de acción HTML se utiliza para especificar dónde se enviarán los datos del formulario al servidor después de enviar el formulario. Como el destino de nuestros datos se almacena en el atributo de acción, todos y cada uno de los botones nos llevarán a la misma ubicación. Para superar esta dificultad, tenemos que usar el atributo de formación de la entrada y los botones HTML.
Enfoque: El atributo de formación se utiliza para especificar dónde enviar los datos del formulario. Después de enviar el formulario, se llama al atributo de formación. Los datos del formulario se enviarán al servidor después de enviar el formulario. Anula la función del atributo de acción de un elemento <form>. Vamos a implementar nuestro problema usando este atributo de ‘formación’
Aprendamos los pasos para realizar múltiples acciones con múltiples botones en un solo formulario HTML:
- Cree un formulario con el método ‘publicar’ y establezca el valor del atributo de acción en una URL predeterminada donde desea enviar los datos del formulario.
- Cree los campos de entrada dentro de según su preocupación.
- Cree un botón con el tipo enviar. Este botón activará el atributo de acción predeterminado del formulario y enviará nuestros datos de entrada a esa URL.
- Cree otro botón con el tipo enviar. También agregue un atributo de ‘ formación ‘ a este botón y asígnele el valor de la URL secundaria donde desea enviar los datos del formulario cuando se haga clic en este botón.
- El atributo de formación anulará el atributo de acción del formulario y enviará los datos a la ubicación deseada.
Sintaxis:
<form action="/DEFAULT_URL" method="post">
<!-- Input fields here -->
<!-- This button will post to the
/DEFAULT_URL of the form-->
<button type="submit">BUTTON 1</button>
<!-- This button will post to the custom
URL of the formaction attribute-->
<button type="submit" formaction="/URL2">
BUTTON 2
</button>
</form>
Ejemplo :
HTML
<!DOCTYPE html> <html lang="en"> <body> <form action="https://gfg.com/" method="post"> Username:<br> <input type="text" name="username"> <br> Email id:<br> <input type="text" name="email_id"> <br><br> <button type="submit" formaction="#"> Submit 1 </button> <button type="submit" formaction="#"> Submit 2 </button> </form> </body> </html>
Producción :
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA