Unidad 8. Formularios (XVIII)

8.30. Etiqueta <button>

 

Mediante la etiqueta button podemos crear botones clicables. Su principal uso es en formularios, aunque se pueden usar para otros propósitos en una página web, por ejemplo para ejecutar Javascript. Por defecto, los navegadores muestran el aspecto típico de un botón pero pueden ser personalizados fácilmente mediante hojas de estilo, de hecho esta es una de las principales razones para usar esta etiqueta button en lugar del botón estándar: input type="submit".

Si colocamos el botón dentro de una etiqueta form se comportará como el botón estándar en el sentido que se ejecutará el programa indicado en el atributo action de la etiqueta form, y con el method indicado. Un ejemplo de la versión básica de la etiqueta buttom con una imagen y un texto sería este:

 <form action="#" method="post" >
  <p>Término a buscar: <input type="text" name="nom" /></p>
  <p><button><img src="graficos/buscar.png" width="15px"> Buscar</button></p>
</form>

Término a buscar:

Buscar

Podemos situar el botón fuera de la etiqueta form, en otra parte de la página, y ligarlo al formulario con un identificativo común en el atributo form de la etiqueta button y en el atributo id de la etiqueta form.

Además, la etiqueta button dispone de los atributos formaction y formmethod  que realizan la misma función que los atributos action y method de la etiqueta form, este sería un ejemplo de todo esto:

<form id="formu1" >
  <p>T&eacute;rmino a buscar:<input type="text" name="nom3" /></p>
</form>
<p>
<button form="formu1" formaction="#" formmethod="post"><img src="graficos/buscar.png" width="15px" /> Buscar</button>
</p>

Término a buscar:

Buscar

La etiqueta button también dispone de los siguientes atributos:

type, por defecto toma el valor submit, que se comporta como el type="submit" de la etiqueta form. El valor reset, que se comporta como el type="reset" de la etiqueta form. Y el valor button que no tiene asignado ningún comportamiento, se puede utilizar para disparar eventos asociados a otros elementos.

formnovalidate, se comporta como el atributo novalidate de la etiqueta form.

formenctype, para definir el tipo de encriptación cuando se trata de un botón submit. Los valores son : application/x-www-form-urlencoded, es el valor por defecto; multipart/form-data, para cuando se usa con input y type="file"; text/plain para texto sin formato.

Podemos personalizar el botón con hojas de estilo, por ejemplo, vamos a aplicar el siguiente estilo que incluye la propiedad cursor: pointer para que el cursor cambie de forma cuando lo ponemos encima del botón:

style="cursor:pointer;
  background-color: antiquewhite ;
  color: darkslategray;
  border-color: chocolate;
  border: 9px groove (internal value);
  border-radius: 7px; "

 

Término a buscar:

Buscar

Para practicar cómo crear un formulario sencillo puedes realizar este ejercicio paso a paso: Formulario básico.