El elemento HTML button se utiliza para crear un botón en una página web que puede ser utilizado para realizar alguna acción o enviar un formulario.
Para utilizar el elemento button en nuestro código HTML, podemos utilizar la siguiente sintaxis:
<button>Texto del botón</button>
Atributos del elemento HTML button
También podemos agregar diferentes atributos al elemento button para cambiar su aspecto y funcionalidad. Algunos de los atributos más comunes son los siguientes:
type
El atributo type define el tipo de botón. Los valores permitidos son «submit» para enviar un formulario, «reset» para resetear los valores de un formulario, o «button» para crear un botón común. Por defecto, el valor es «submit».
<button type="submit">Enviar formulario</button>name
El atributo name define el nombre del botón. Este atributo es útil para enviar datos de formulario a través de un método POST o GET.
<button type="submit" name="enviar">Enviar formulario</button>value
El atributo value define el valor que se enviará junto con el nombre del botón en caso de ser presionado. Útil para identificar el botón que se utilizó para enviar datos en un formulario.
<button type="submit" name="enviar" value="Enviar datos">Enviar formulario</button>disabled
El atributo disabled deshabilita el botón, lo que significa que no se puede presionar.
<button type="submit" disabled>Enviar formulario</button>autofocus
El atributo autofocus selecciona automáticamente el botón al cargar la página, lo que significa que el usuario puede presionar «Enter» inmediatamente para realizar la acción correspondiente.
<button type="submit" autofocus>Enviar formulario</button>form
El atributo form especifica el ID del formulario al que pertenece el botón.
<form id="formulario">
<button type="submit" form="formulario">Enviar formulario</button>
</form>onclick
El atributo onclick define una función que se ejecutará cuando el botón sea presionado.
<button type="button" onclick="alert('¡Botón presionado!')">Presionar botón</button>En este ejemplo, al presionar el botón se muestra una alerta con el mensaje «¡Botón presionado!». Es importante tener en cuenta que la función «alert()» debe ser definida en nuestro código JavaScript para que se ejecute correctamente.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
