Documentos de Académico
Documentos de Profesional
Documentos de Cultura
www.desarrolloweb.com
Botones y HTML
A pesar de ser los formularios una de las partes más importantes de toda aplicación web, es
bien cierto que el lenguaje HTML nos ofrece pocas (por no decir ninguna) opciones para
adaptar sus elementos al diseño de nuestra página.
Efectivamente, son pocos los componentes sobre los que podemos actuar para cambiar su
aspecto externo. Tenemos la opción de dar más o menos longitud a un textarea o a una caja
de texto, de configurar el tamaño de la fuente de las mismas, de "trucar" una lista de selección
mediante espacios para conseguir que tenga un tamaño adecuado, etc. Pero uno de los
elementos más operativos, los botones de formulario, quedan casi fuera de estas
configuraciones.
Referencia: En nuestro manual de HTML podrás encontrar una serie de artículos sobre
formularios que te ayudarán en la tarea de confeccionar estos elementos interactivos.
Así, siempre que introduzcamos en nuestra página un elemento submit, reset o button, su
aspecto será del tipo:
enviar
Botones y CSS
Las Hojas de Estilos en Cascada (CSS) son sin duda una de las herramientas más útiles que
podemos usar en nuestras páginas web. Nos permiten definir el aspecto con el que se van a
presentar todos y cada uno de los elementos de una página web, consiguiendo con ello la
buscada separación entre datos y presentación, tan buscada por los desarrolladores.
Mediante CSS podemos mejorar notablemente el aspecto de nuestros botones de formulario,
siempre y cuando el navegador usado por nuestro visitante soporte la aplicación de estilos a
estos elementos, es decir, todos los navegadores de 5ª y 6ª generación.
Referencia: Dispones en DesarrolloWeb de un manual de hojas de estilo CSS que te
enseñará a utilizar esta tecnología para crear páginas más atractivas y precisas.
Como ejemplo, vamos a modificar el aspecto externo del botón de la página anterior, dándole
un fondo azul, quitándole el aspecto 3D y poniendo el texto en blanco, con fuente Verdana de
10 pixels. También vamos a definir su tamaño exacto. El código necesario será:
<style type="text/css">
.boton{
font-size:10px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:80px;
height:19px;
}
</style>
<div align="center">
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
<input type="text" name="prueba"><br><br>
<input type="submit" value="enviar" class="boton">
</form>
</div>
Cuyo resultado es el siguiente:
enviar
Analizando un poco el código anterior, vemos que hemos definido una clase de estilo, .boton,
que define los atributos deseados para nuestro botón. La clase viene definida estableciendo,
dentro de las etiquetas <style...>...</style> el nombre de la misma precedido por un punto,
unas llaves y dentro de ellas los atributos deseados con sus valores.
De esta forma podemos fijar el aspecto concreto de nuestros botones, teniendo libertad para
defirnir cuantas clases necesitemos.
Como ventajas de este método están la total configuración de aspecto y que seguimos
teniendo un botón submit estándar (por lo que si pulsamos la tecla Enter se enviarán los datos
del formulario). Las pegas son que estas características de estilos para botones no son
aceptadas por Netscape 4x y que seguimos teniendo la limitación de botones rectangulares.
Descargar los códigos e imágenes
Botones e imágenes
En multitud de ocasiones tenemos que construir páginas web en las que la forma general de
los elementos de la misma no es rectángular, por lo que la inclusión de botones de formulario
estándares romperían este diseño, al introducir elementos rectángulares en la composición.
En estos casos podemos recurrir a la simulación de botones mediante imágenes, con lo que la
libertad de diseño es completa, pudiendo construir botones ovalados, circulares, triángulares,
etc. Supongamos que hemos construido la siguiente imagen gif:
Sólo nos queda ahora darle vida mediante código JavaScript, lo que se consigue de forma fácil,
incluyendo la imagen dentro de un enlace que llame al método submit del objeto form, con el
que accedemos al formulario.
El código necesario es del tipo:
<style type="text/css">
.enlace{cursor:default;}
</style>
<div align="center">
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
<input type="text" name="prueba"><br><br>
<a class="enlace" href="#" onclick="document.forms.form1.submit();return false">
<img src="images/boton.gif" width="85" height="24" border="0" alt="enviar">
</a>
</form>
</div>
Cuyo resultado es el siguiente:
Obtenemos así un botón con los lados redondeados, y que resulta compatible con todos los
navegadores, al ser en realidad una imagen. Hemos añadido una clase de estilo (.enlace) para
que al situar el cursor sobre el botón no aparezca la mano típica de los enlaces, sino la flecha
característica de los botones; la pega es que esto último sólo funciona en Internet Explorer y
Netscape 6x, mientras que en Netscape 4x seguirá apareciendo la mano.
La principal diferencia entre usar una imagen y usar un botón estándar es en el caso de la
imagen hemos perdido la funcionalidad de foco de los botones, es decir, que si ahora situamos
el cursor en la caja de texto y pulsamos la tecla Enter, los datos del formulario no se enviarán.
Vamos a ver cómo podemos arreglar esto.
Nota: En algunos navegadores, por ejemplo Internet Explorer 6, no se llega a perder la funcionalidad del
envío del formulario con la pulsación de la tecla Enter.
Con esto, obtenemos los dos extremos que nos van a hacer falta para nuestro truco.
El siguiente paso es crear una tabla tal que contenga en sus extremos laterales las imágenes
anteriores, quedando en el centro una celda vacía (para que se mantengan los tamaños de las
celdas sin contenido introducimos en ellas un gif transparente de 1x1 pixels, bs.gif):
En la celda vacía vamos a situar el botón con estilos del ejemplo 2, obteniendo con ello una
repreducción de lo que era la imagen entera, pero que ahora será una tabla-botón:
<style type="text/css">
.boton2{
font-size:10px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:70px;
height:15px;
}
</style>
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
<div align="center"><input type="text" name="prueba"></div><br>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19"
border="0" alt=""></td>
<td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0"
alt=""></td>
<td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5"
height="19" border="0" alt=""></td>
</tr>
<tr align="center">
<td height= "17" bgcolor="#638cb5"><input type="submit" name="envio" value="enviar"
class="boton2"></td>
</tr>
<tr>
<td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0"
alt=""></td>
</tr>
</table>
</form>
enviar
Este botón es de colores, tiene los lados curvos y admite los eventos típicos de los botones
estándar, por lo que si situamos en cursor en la caja de texto y pulsamos Enter, los datos se
enviarán.
Además, también podemos acceder a ls demás propiedades de un botón, por ejemplo a
disabled (Internet Explorer y Netscape 6x), que activa o desactiva un botón, de tal forma que
aparece normal o "muerto", sin tener operatividad. El código necesario para ello es:
<div align="center"><a href= "#"onclick="document.forms.form1.envio.disabled=true;return false;">desactivar</a></div>
Con esto hemos conseguido el objetivo buscado: un botón cross-browser (compatible con los
diferentes navegadores), que además soporte los eventos característicos de este tipo de
elementos de formulario.
El inconveniente es que los textos que aparecen en la imagen deben ser fijos, salvo que
definamos diferentes imágenes para los posibles casos. En caso de páginas que deban soportar
multi-idioma, esto se convierte en un obstáculo importante. Vamos a ver cómo podemos hayar
una solución a esto.
Descargar los códigos e imágenes
}
document.onkeydown = capturaTecla;
</script>
</head>
<body>
<div align="center">
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
<input type="text" name="prueba">
</form>
</div>
<table class="tablaBoton" cellpadding="0" cellspacing="0" border="0" align="center" onclick="envia()">
<tr>
<td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19"
border="0" alt=""></td>
<td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0"
alt=""></td>
<td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5"
height="19" border="0" alt=""></td>
</tr>
<tr align="center">
<td height= "17" bgcolor="#638cb5"><a href= "#"onclick="contador=true;envia2();return false"
class="enlace">enviar</a></td>
</tr>
<tr>
<td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0"
alt=""></td>
</tr>
</table>
</body>
</html>
Cuyo resultado es el siguiente:
enviar
Notad cómo hemos establecido dos funciones diferentes, envia() y envia2(), una llamada
desde el enlace y otra desde el evento onclick de la tabla, y una variable booleana, contador. El
objeto es que al pulsar sobre "enviar" no se envién dos veces los datos del formulario (ya que
el texto está dentro del enlace y dentro de la tabla).
La gran ventaja que presenta este botón ficticio es que es "casi" compatible con todos los
navegadores, es totalmente configurable por nosotros y soporta acceso al texto que debe
aparecer en el botón, con lo que es ideal para aplicaciones multi-lenguaje, en las que el texto
debe depender del idioma elegido por el usuario.
Conclusión
Como véis, usando la imaginación y las herramientas simples de que disponemos, es fácil
convertir elementos "sosos" de nuestras páginas en partes importantes del diseño de las
mismas. Siempre existe alguna solución a nuetras necesidades de diseño, y para encontrarla
basta con liberar nuestra mente y dejar que nuestras ideas fluyan.
Descargar los códigos e imágenes