Mundo Web - Caminando entre formularios IV

CAMINANDO ENTRE FORMULARIOS (IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Los objetos BUTTON, SUBMIT y RESET.-

Vamos a tratar en este capítulo estos 3 objetos, que aunque se diferencian un poco en su uso su apariencia, sus propiedades y sus eventos son análogos. La principal diferencia en su uso estriba en que el elemento button es símplemente un botón para ejecutar un código JavaScript cualquiera, no teniendo asociada por defecto ninguna acción; el elemento submit ejecuta el envío de los datos del formulario al ser pulsado; por último, el elemento reset borra todos los campos del formulario, dejando estos con su valor poor defecto.

La apariencia de button, submit y reset es la misma, y si no se les aplica ningún estilo aparecen siempre como un botón rectangular grís con un texto negro dentro.

Las principales propiedades de estos objetos son:

name : es la propiedad que va a asignar a cada botón un nombrae identificador para poder referirnos luego a él y acceder a sus propiedades.
width : que fija la anchura que va a tener el botón. Si no se especifica este valor, el botón tendrá el ancho necesario para contener el texto indicado mediante la propiedad value.
height : que fija la altura del botón.
value : esta propiedad determina el texto que va a aparecer contenido en el botón.

Vamos a ver un ejemplo que maneje estas propiedades, y para ello vamos a construir una función de JavaScript que cambie el texto de un botón en el que no se ha definido la anchura, para que veamos cómo cambia esta con el texto del botón:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
document.form1.boton.value='así que te has atrevido a pincharme';
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="boton" value="pinchame" onClick="cambia()">
</form>
</body>
</html>

que podemos ver en acción pinchando aquí.
disabled : esta propiedad bloquea el botón de tal forma que el texto se colorea de color grís y no se puede accionar el mismo.

Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad para crea un botón de envío de datos que sólo se active al seleccionar un radio button de un conjunto de ellos:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function activa(){
document.form1.boton.disabled=false;
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="form1">
elije una opción:   
<input type="radio" name="radio1" onClick="activa()">música
<input type="radio" name="radio2" onClick="activa()">cine
<input type="radio" name="radio3" onClick="activa()">deporte
<input type="submit" name="boton" value="enviar" onClick="return false" disabled>
</form>
</body>
</html>

que vemos en funcionamiento en el siguiente ejemplo.

Por otra parte, estos objetos poseen los siguientes eventos:

onFocus : este evento funciona como el método onClick para estos objetos, por lo que me refiero a lo abajo explicado.
< STRONG > onBlur : < /STRONG > no tiene un uso práctico para estos objetos.
onClick : este es sin duda el evento más onClick con los botones, ya que por propia definición el objetivo de un botón es ser pinchado.

Su uso principal es llamar a una función JavaScript al ser pinchado el botón, del que ya hemos visto varios ejemplos a lo largo de estos artículos, por lo que no voy a insistir en ello.

Sólo hacer una consideración de uso: cuando tenemos en un formulario un botón del tipo submit o reset y por algún motivo queremos anular su acción intrínseca (enviar los datos del formulario o borrarlos), basta con colocar un evento onClick en el botón que nos devuelva false, del tipo:

<input type="submit" value="enviar" onClick="return false">
onMouseOver , onmouseOut, ondblClick, onkeyPress : estos eventos son aceptados por estos objetos, y su aplicación práctica la vamos a ver mediante un ejemplo, cuyo código es:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
document.forms[0].elements[0].value='?me vas a pinchar?'
}
function descambia(){
document.forms[0].elements[0].value='pinchame'
}
function gracias(){
alert('!gracias por pincharme!')
}
</script>
</head>
<body>
<center>
<form name="form1">
<input type="button" name="boton" value="pinchame" onMouseOver="cambia()" onMouseOut="descambia()" onClick="gracias();"></center>
</form>
</body>
</html>

y su resultado lo podemos apreciar en la siguiente pantalla.

Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8