El formulario HTML contiene otros elementos de formulario como cuadro de texto, casilla de verificación, botón de opción, botón de envío y muchos más.
Para crear un formulario HTML, se usa la etiqueta <form>________</form> ya que es una etiqueta emparejada, por lo que se requieren ambas etiquetas de inicio y cierre. Otros elementos de formulario se colocan dentro de estas etiquetas. Se puede colocar en cualquier parte de la etiqueta del cuerpo del elemento HTML.
Sintaxis:
<body>
<form>
</----other form elements ---->
</form>
</body>
Hay dos formas de crear botones personalizados con el botón PUSH en un documento HTML.
Método 1: usar texto como botón pulsador. El botón pulsador no tiene un comportamiento predeterminado como los botones Enviar y Restablecer, por lo que se requiere la codificación básica para este botón en términos de secuencias de comandos del lado del cliente que se ejecutan cuando el visitante del sitio web hace clic en el botón.
Sintaxis:
<button name="click me">Click Me</button>
La etiqueta <button> se utiliza para crear un pulsador. Es una etiqueta emparejada, por lo que es obligatorio que la etiqueta de inicio (<button>) tenga una etiqueta de cierre (</button>). Cree un formulario HTML simple con codificación básica utilizando la etiqueta <form> y los botones con el comportamiento predeterminado y el comportamiento del cliente para ver la diferencia en la URL cuando se ejecuta el script del lado del cliente. Por defecto Método atributo de Formulario, la etiqueta toma el valor GET si no se especifica. Para este ejemplo, estamos utilizando el método GET, ya que este método obtiene los datos de los campos del formulario HTML ingresados por el usuario en el sitio web, se realiza la codificación y luego la información del formulario se agrega al final de la URL.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Push button</title> </head> <body> <h2>Push Button</h2> <form> Username: <input type="text" name="name" placeholder="Enter Username" size="20"> <br><br> Password: <input type="password" name="password" size="20"><br><br> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> <button name="click">Click Me</button> </form> </body> </html>
Salida de URL cuando se hace clic en el botón Enviar
Salida: cuando se hace clic en el botón Restablecer
Salida: cuando se hace clic en Texto como botón pulsador
Método 2: usar la imagen como botón pulsador. Para mejorar la apariencia de los botones, se pueden incluir imágenes en los botones personalizados.
Sintaxis:
<button name="Click Me"><img src="click.jpeg"></button>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Push button</title> </head> <body> <h2>Push Button</h2> <form> Username: <input type="text" name="name" placeholder="Enter Username" size="20"> <br><br> Password: <input type="password" name="password" size="20"><br><br> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> <button name="button"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220124213826/clickme.png"> </button> </form> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por annieahujaweb2020 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA