Curso completo de HTML - Controles de Formularios (III)

Botón de borrado

La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecían vacías, a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la página con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los había. Este control recibe el nombre de botón de borrado o botón de reseteado (reset button ). La creación de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset":

 <INPUT TYPE="reset">
 
       

Este código provocará la aparición de un botón como el botón de envío con un texto por defecto que indica su función. Por ejemplo Internet Explorer 4.0 muestra el mensaje 'Restablecer'. Este texto dependerá del navegador que usen los visitantes de nuestra página, y dado que esto no siempre es deseable podemos usar el atributo VALUE, al igual que hacíamos con el botón de envío, para especificar el texto que prefiramos. Veamos un ejemplo algo más completo:

 <H2>
  <FONT COLOR="#8080FF">
        Formulario de identificación
  </FONT>
  </H2>
 
  <FORM>
 
  <P>Introduzca su nombre:
  <INPUT TYPE="text"
    NAME="nombre"
    VALUE="Introduzca su Nombre"
    SIZE="30">
  <P>Sexo:
  <INPUT TYPE="RADIO"
    NAME="sexo"
    VALUE="hombre"
    CHECKED>Hombre   
  <INPUT TYPE="RADIO"
    NAME="sexo"
    VALUE="mujer">Mujer
  <P>Comentarios:
  <INPUT TYPE="text"
    NAME="comentarios"
    SIZE="40">
  <P>
  <INPUT TYPE="submit"
    VALUE="Enviar">
  <INPUT TYPE="reset"
    VALUE="Restablecer">
  </FORM>
 
       

En la figura 12.15 podemos ver este formulario con unos datos introducidos por un usuario (arriba) y tras pulsar el botón de borrado (abajo). Si no hubiésemos puesto unos valores por defecto en nuestro código HTML los datos campos simplemente se hubieran quedado vacíos.

Al igual que hemos hecho con los controles anteriores concluiremos con un resumen del código del botón de borrado. En éste hemos incluido el atributo NAME, que, como comentamos al principio, está presente en todos los controles:

 
    <INPUT TYPE="reset"
    NAME="nombre"
    VALUE="Texto del botón">
  
 
       

Botón genérico

Para completar la colección de botones de los formularios, nos encontramos con la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna función definida, sino la que nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button":

 <INPUT TYPE="button"
    VALUE="Pulseme">
 
       

Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:

 
    <INPUT TYPE="button"
    VALUE="Texto del botón"
    ONCLICK="código de script">
  
 
       

No todos los navegadores soportan los lenguajes de script, y por tanto el botón genérico debe ser considerado como una extensión. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.

Por ahora no nos adentraremos en ningún lenguaje de script, ya que más adelante en esta obra, éstos serán tratados más en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. Estos ejemplos han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores.

El primero consistirá en un botón cuya función será cerrar una ventana del navegador. El código necesario será:

 <FORM>
 
  
    <INPUT TYPE="button"
    VALUE="Cerrar ventana"
    onClick="window.close();">
  
 
  </FORM>
 
       

Es probable que al pulsar el botón nos aparezca un mensaje de aviso del navegador pidiéndonos confirmación para cerrar la ventana (ver figura 12.16).

El segundo ejemplo es más usado aún y consiste en usar el botón con la misma función que un enlace hipertexto. El resultado es más atractivo, pero debemos usarlo con moderación, ya que no todos los visitantes tendrán navegadores que entiendan este código:

 <FORM>
 
  
    <INPUT TYPE="button"
    VALUE="Cargar otra ventana"
    onClick="window.location.replace
    ('button2.html');">
  
 
  </FORM>
 
       

En el directorio botones podemos encontrar un archivo con ambos códigos para que el lector pueda probarlos. En la figura 12.16 vemos una muestra de este documento junto con el cuadro de diálogo con el que Internet Explorer 4.0 pide confirmación para cerrar la ventana tras pulsar el botón del primer ejemplo.

   <BUTTON name="reset"
      type="restablecer">
    Restablecer<IMG src="pics/imagen.gif"
      alt=" ">
    </BUTTON>