Tag HTML button
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
Descripción
El tag
HTML button crea un botón. Su uso más común es el de funcionar como control en un formulario, pero también puede ser usado para realizar acciones (mediante scripts) en cualquier parte. Los botones también pueden ser definidos con el
tag HTML input, cuando su tipo es "button", pero el tag HTML button inserta botones que permiten contenido. Esto significa que puedes poner código HTML dentro de ellos.
Atributos
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Comienzo del código
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
Fin del código
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Comienzo del código
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>
Fin del código
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Comienzo del código
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>
Fin del código
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
| Código |
Visualización |
|
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a> |
Código HTML |
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir
código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
Comienzo del código
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>
Fin del código
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
- RTL: Derecha a izquierda.
- LTR: Izquierda a derecha.
Ejemplo:
Comienzo del código
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Fin del código
Asigna un nombre al elemento para referencias futuras. Se recomienda el uso del atributo "id" en su lugar para compatibilidad con
código XHTML.
Asigna un valor inicial al elemento. Depenediendo de la naturaleza del elemento este valor puede ser posteriormente cambiado por el usuario.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="primercampo" type="text" value="Aquí está el valor inicial" />
</div>
</form> |
|
type
Define el tipo del botón. Puede tener uno de estos valores insensibles a mayúsculas/minúsculas:
- submit: Crea un botón de envío (valor predeterminado). Cuando un botón de tipo "submit" es presionado, el formulario al que corresponde esnviado automáticamente.
- reset: Crea un botón "reset". Cuando un botón reset es presionado, todos los campos en el formulario vuelven a sus valores iniciales.
- button: Crea un botón "push". Este tipo de botones no tiene una acción predeterminada. Son usualmente definidos con scripts personalizados que manejas sus eventos.
disabled
Cuando se establece este atributo, el control es deshabilitado, lo que significa que no puede obtener el enfoque, que su valor no puede ser cambiado y que no será enviado junto con el formulario. Dependiendo del navegador los elementos deshabilitados pueden ser mostrados de una manera diferente.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="primerboton" type="button" value="Habilitado" /><br /><br />
<input name="segundoboton" type="button" value="Deshabilitado" disabled="disabled" /><br /><br />
<input name="textosegundo" type="text" value="Habilitado" /><br /><br />
<input name="textoprimero" type="text" value="Deshabilitado" disabled="disabled" />
</div>
</form> |
|
Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar dicha secuencia mediante el teclado (usualmente con la tecla "tab").
Establece una relación entre este elemento y una tecla de carácter, permitiendo al usuario activarlo mediante esa tecla (usualmente cuando es utilizada junto con la tecla "alt"). El resultado de la activación depende de la naturaleza del elemento actual. Para vínculos, esta acción automáticamente sigue el vínculo, y para otros elementos simplemente recibe el enfoque.
Eventos
- onfocus
- onblur
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Lista completa e información acerca de
eventos en HTML
Ejemplos
Usando dos tipos de botones para mostrar el mismo resultado.
| Código |
Visualización |
<form action="eg.php">
<div>
<input type="button" name="primerboton" value="Botón Input" /><br /><br />
<button type="button" name="segundoboton">Botón Button</button>
</div>
</form> |
|
Botón con contenido.
| Código |
Visualización |
<form action="eg.php">
<div>
<button type="button" name="botoncontenido">
<img src="{url}/img/links/button.jpg" width="88" height="31" alt="Botón para vínculos de HTMLQuick.com" /><br />
<b>Lindo botón!</b>
</button>
</div>
</form> |
|
