Botones en HTML
Los botones HTML son como cualquier otro botón en la pantalla y pueden realizar varias funciones. Los botones HTML se pueden usar para enviar o restablecer los datos del formulario, para mostrar cualquier signo de éxito o peligro, para crear un botón de enlace, etc.
En HTML, los botones se pueden crear utilizando y elementos. Sin embargo, el botón creado con elementos se ocupa solo de datos textuales, mientras que el botón creado con el elemento admite la carga de imágenes, una extensa lista de atributos de estilo y mucho más. Este artículo proporciona una guía detallada para los botones HTML con los siguientes resultados de aprendizaje.
- Cómo crear botones HTML
- Botones HTML con marco de bootstrap
- Botones HTML con W3.marco CSS
Cómo crear un botón HTML
Como se discutió anteriormente, se puede crear un botón HTML utilizando el elemento. La etiqueta del botón admite numerosos atributos que se pueden usar para aprovechar varias funciones de la etiqueta del botón. Tales como, puede pasar una función o script en su evento en el clic. Además, el atributo de tipo especifica la funcionalidad del botón que sería un botón de envío o un botón de reinicio. Echemos un vistazo a los atributos que son compatibles con el elemento del botón HTML.
La siguiente tabla enumera los atributos compatibles con la etiqueta del botón.
| Atributo | Valor | Descripción |
|---|---|---|
| enfoque automático | verdadero Falso | El botón se centraría en cargar la página |
| desactivado | verdadero Falso | El botón específico estaría deshabilitado |
| forma | form_id | Este atributo muestra que el botón está asociado con una de más formas |
| formación | Url | Este atributo especifica dónde se enviarán los datos del formulario. |
| formulario | Conseguir, publicar | Especifica el método HTTP para esa forma específica |
| formnovalidear | formnovalidear | Los datos del formulario no serán validados al enviar |
| formato | _blank, _elf, _parent, _top, franMename | Especifica la ubicación donde se mostraría la respuesta |
| nombre | nombre | Este atributo especifica el nombre del botón |
| tipo | restablecer, enviar, botón | Se especifica el tipo de botón |
| valor | texto | Se establece el valor inicial del botón |
| al hacer clic | guion | Ejecuta un script al hacer clic en el botón |
Practicemos estos atributos con la ayuda de los siguientes ejemplos.
Ejemplo 1: Enviar y restablecer botones
Este ejemplo muestra la creación de botones HTML con type = ”enviar" y type = ”reiniciar" Atributos de la etiqueta. Los valores del tipo atributo muestra que los datos se enviarán/descansarán al hacer clic en el botón.
El código proporcionado a continuación crea botones enviar y restablecer en la etiqueta de formulario.
Html
El código anterior crea un formulario que contiene dos botones con type = "enviar" y type = "restablecer". Se ejerce el evento OnClick de ambos botones y se ejecutará una función JavaScript en cada botón.
Javascript
función sub ()alerta ("presentación exitosa");
función res ()
alerta ("RESET DE DATOS");
Se crean dos funciones JS que se supone que deben llamarse al hacer clic en los botones.
Producción
Desde la salida, se observa que en los botones de envío y reinicio, se inicia una alerta en cada clic. Además, los datos se envían y se restablecen con éxito también.
Ejemplo 2: botones HTML con bootstrap
Los botones HTML se pueden asociar con las propiedades de CSS para diseñarlos para una mejor presentación. Bootstrap es un marco CSS ampliamente utilizado que tiene una clase incorporada para botones. El siguiente código HTML practica la clase de éxito, peligro y enlace de bootstrap para agregar algunos efectos a los botones.
Para agregar clases de bootstrap, debe agregar el siguiente enlace CDN a su documento HTML.
Producción
La salida muestra que el "btn-tucés"La clase tiene un color verde mientras que el"BTN-Danger"La clase convirtió el color del botón en rojo. Por otro lado, el "btn-link"La clase ha creado un botón de enlace.
Ejemplo 3: botones HTML con W3.marco CSS
El W3.El marco CSS se ha utilizado ampliamente debido a sus clases incorporadas. El siguiente código crea botones con W3.clases de CSS.
El código anterior practica las clases W3-Orange, W3-Round-Large, W3-Border y W3-Hover-Red del W3.marco CSS. Estas clases cambian el color, la forma, el borde y agregan los efectos de flota a los botones.
Producción
Desde la salida, se observa que el primer botón es redondeado y en color naranja. Mientras que el segundo botón tiene un efecto de desplazamiento y mover el cursor a él, el botón de color rojo.
Conclusión
Los botones HTML se pueden crear utilizando el elemento y el elemento utilizando el type = ”enviar" atributo. Sin embargo, un botón creado con el elemento ofrece más funcionalidad y estilo en comparación con el botón creado por la etiqueta. Este artículo proporciona una guía descriptiva para los botones HTML. Además, esta publicación también sirve al estilo de los botones HTML utilizando dos marcos CSS ampliamente utilizados, que incluyen W3.CSS y Bootstrap.