|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
JavaScript y formularios (II)
* Javascript y checkbox:
La validación de que el usuario marque alguno de los checkbos de nuestro formulario es un asunto que no se adpata a la realidad de uso, ya que por propia definición los checkbox estan para que se elija uno, varios o ninguno. Si deseamos que el usuario tenga que marcar una } sólo una opción es mejor sustituir los checkbox por botones de radio, que son los elementos que en un formulario hacen eso precisamente.
Pero podemos ampliar la propia utilidad de estos elementos usando Javascript. Veamos unos ejemplos:
- Podemos obligar al usuario a que marque sólo un número determinado de opciones dentro de un conjunto de ellas. ver ejemplo.
- A pesar de lo dicho antes, si nos interesa los checkbox también pueden ser autoexcluyentes, pero sólo es conveniente su uso en casos como el de este ejemplo, en el que obligamos al usuario a elegir entre una opción que selecciona todas las demas o marcar las que desea una a una. ver ejemplo.
- Es posible implementar un botón que marque de una vez todos los checkbox de una colección, y otro que los desmarque. ver ejemplo.
- Y también otro adicional que invierta la selección previa. ver ejemplo.
- O establecer un único botón que alterne entra marcar y desmarcar todas las
opciones a la vez.
ver
ejemplo.
- El siguiente script nos permite cargar en una nueva ventana hasta 4 paginas a la vez. ver ejemplo.
A veces, cuando estamos creando un formulario complejo, nos puede interesar contar cuantos checkbox ha seleccionado nuestro visitante. Eso es lo que hace el siguiente ejemplo. ver ejemplo.
* Javascript y radio button:
Los radio button, por propia definición, permiten pocas florituras mediante Javascript, ya que su misión es permitir una sóla selección entre un grupo de ellas. No obstante, podemos dar a estos elementos alguna funcionalidad extra mediante este lenguaje de programación. Y como muestra algún que otro botón:
- Podemos asociar un mensaje de alerta al radio botón, de tal forma que cuando el usuario pinche en él se active este mensaje de advertencia. ver ejemplo.
- O también que en vez de ser un feo mensaje de advertencia sea una suave pregunta de confirmación. ver ejemplo.
- Si asociamos dos botones de radio con una caja de texto podemos conseguir que sólo se pueda introducir datos en la caja si se selecciona el radio que nosotros establecemos (tipico ejemplo de las condiciones de aceptación de unas reglas). ver ejemplo.
- Y con dos botones de radio podemos crear un efecto de movimiento, que podemos aplicar para llamar la atención del visitante. ver ejemplo.
- El siguiente script deberíamos presentarlo en el tema sobre colores en las paginas web, pero es también un buen ejemplo de la aplicación de radio botones para el cambio de propiedades de la pagina. Al pinchar en un botón cambiamos el color de fondo y obtenemos en dos cajas de texto el nombre Nestcape del color y su valor hexadecimal. ver ejemplo.
Javascript y textarea:
Las areas de texto nos dan mas juego cuando les aplicamos código Javascript, ya que son unos elementos que por propia definición son mas configurables. Veamos unos ejemplos:
- Un script basico es aquel que nos permite limitar el número de caracteres que el usuario puede entrar el la caja. En este ejemplo si excede el número permitido se le pasa un mensaje de error, invitandole a introducir de nuevo el texto con las limitaciones establecidas. ver ejemplo.
- Pudiendo hacer este script mas bonito si no permitimos que en un primer momento pueda introducir mas caracteres de los permitidos y ademas le indicamos en un contador cuantos caracteres le quedan para llegar al límite. ver ejemplo.
- También podemos hacer que el texto introducido en la caja de justifique por sí sólo, y así recibiremos un texto formateado correctamente. Se puede conseguir facilmente que la justificación se pruduzca al perder el foco el textarea, con lo que el usuario puede aprecia el cambio antes de enviar el formulario (anímese e inténtelo). ver ejemplo.
- Y continuando con el formateo del texto, aquí tenemos este script que nos convierte el introducido en la caja en código HTML con saltos de línea, ideal para convertir la información plana introducida por el usuario en código visible igual pero en un navegador. ver ejemplo.
- Un script útil es el que nos permite confeccionar con un textarea una entrada de datos explicativa y editable, para facilitar el trabajo a nuestro visitante. ver ejemplo.
- En sus viajes por la red habra visto el típico ejemplo de código en un textarea, que se puede seleccionar por completo pulsando un enlace o un botón. Aquí va un ejemplo con un enlace. ver ejemplo.
- Pero también podemos hacer que se seleccione todo el texto símplemente poniendo el cursor sobre cualquier parte del mismo (es decire, al coger el foco el textarea). ver ejemplo.
- Y si queremos, la seleción se puede realizar al pulsar un botón, y podemos añadir una caja de texto que indique el tamaño en KB del código dentro del textarea. ver ejemplo.
- Otro uso de una caja de texto puede ser la de mostrar cierta información al visitante. En este ejemplo identificamos su navegador, y para que no pueda modificar el texto de información hacemos el textarea de sólo lectura. ver ejemplo.
- A veces nos puede interesar calcular el número de palabras que se han introducido en un textarea. Pués bien el siguiente script hace precisamente eso. ver ejemplo.
- Otro uso que podemos dar a un textarea es servir de explicación para los datos que se deben introducir en diferentes campos de un formulario. En el siguiente ejemplo al situar el cursor en cada campo aparece un mensaje explicativo del mismo en la caja de texto inferior. ver ejemplo.
- Cuando queremos utilizar en un script el comando "document.write" nos encontramos a veces con dificultades en la sintaxis. El siguiente script nos facilita el trabajo, ya que si introducimos el texto que queremos pintar nos devuelve el código Javascript adecuado. ver ejemplo.
- El siguiente ejemplo muestra cómo podemos mediante JavaScript ir cambiando lel color de un texto en un textarea a medida que vamos introduciendo letras (Sólo para Internet Explorer). ver ejemplo.
- Vimos en el capítulo de formularios con estilo cómo podíamos colorear las berras de desplazamiento en I.Explorer 5.5. En el siguiente ejemplo utilizamos JavaScript para combiar los colores dinamicamente. ver ejemplo.
Javascript y listas de selección:
Normalmente la unión de Javascript y listas de selección lleva a la creación de menús de navegación, bien entre paginas de un mismo sitio web bien como menú de enlaces con otros sitios. Esta aplicación de las listas de selección la veremos mas adelante, dentro del capítulo formularios y menús.
Pero también podemos encontrar otros usos del lenguaje Javascript aplicado a las isitas de selección. Veamos algunos ejemplos:
- Imagine que queremos que nuestro visitante seleccione un día del més en curso. Podríamos introducir una caja de texto simple para realizar esta operación, o podríamos usar una lista de selección que contuviera símplemente opciones del 1 al 31. Pero podemos implementar esto de una manera correcta si facilitamos al visitante una lista de selección que incluye los días del més en curso, y que se renueva sóla cada més que pasa. ver ejemplo.
- Mediante una lista de selección y un textarea podemos crear una lista con explicación de cada opción. ver ejemplo.
- Si unimos dos listas podemos crear un mecanismo de selección múltiple, de tal forma que según el valor seleccionado en la primera cambiaran los valores de elección en la segunda. Note en este script cómo si seleccione la opción "otros" surgira una ventana que le prguntara cual es el nuevo país, incluyéndolo entonces en la lista. ver ejemplo.
- El siguiente script es muy complejo en su implementación, ya que contiene en su código una cadena de valores hexadecimales. Introduciendo el Código Postal de un estado americano en la caja de texto aparecera el estado correspondiente en la lista de selección. Si quiere configurarlo para otro país, en la línea donde pone "stateRange" debe hacer constar el código postal correspondiente a cada ciudad seguido de dos iniciales que le identifiquen unívocamente, y luego introducir una etiqueta <OPTION> cuyo valor sean estas iniciales. Como ejemplo de esto he introducido Madrid con su código, el 28041. ver ejemplo.
- Y si las listas de selección estandar no le parecen adecuadas, en el siguiente ejemplo puede ver cómo queda una lista "fabricada" a medida. Contiene imagenes en las opciones y efectos de difuminado al desparecer. Los enlaces no estan activados. ver ejemplo.
- Si tenemos una lista de elementos dentro del textarea podemos facilitar la navegación por ellos mediante dos botones que permiten ir desplazandonos por la lista. ver ejemplo.
Javascript y botones:
Los elementos de formulario tipo botón son uno de los tipos mas útiles, y no sólo en un formulario completo, si no también como elementos aislados, ya que siempre podemos asociarlos a funciones de Javascript, de tal forma que al pinchar el botón se ejecute esta. Vamos a ver ahora unos cuantos ejemplos del uso de botones con Javascript:
- Un ejemplo clasico es el botón que nos permite ver el código fuente de una pagina. ver ejemplo.
- En un formulario podemos implementar unos mensajes de confirmación cuando el usuario envía o/y borra los datos del mismo. ver ejemplo.
- Podemos asímismo crear un botón dinamico, que va cambiando el texto que en él aparece y el enlace a la pagina que lleva. ver ejemplo.
- O podemos crear un botón con estilos, con trés estados diferentes: inicial, al recibir el ratón y al quedar de nuevo suelto. ver ejemplo.
- Otro ejemplo clasico del uso de los botones son los botones de pagina anterior y pagina siguiente (Back y Forward), que nos permiten navegar por las paginas que hemos visitado anteriormente. Nota: en el ejemplo no se puede apreciar el efecto, ya que la ventana se abre nueva, por lo que no tiene historia).ver ejemplo.
- Vamos a crear ahora un botón saltarín, que siempre llama la atención. ver ejemplo.
- Y podemos implantar un botón que se escribe a sí mismo. ver ejemplo.
- Rizando el rizo, podemos crear un botón con estilo, que cambia sus mensajes de diferentes formas y que nos enlaza cada vez con una pagina diferente. Es un bonito script facil de personalizar. ver ejemplo.
- El siguiente botón muestra dentro de él un reloj digital, y si se pincha da información al usuario del tiempo que lleva viendo la pagina. ver ejemplo.
- Otro botón muy útil es aquel que permite al usuario imprimir la pagina web. Lo que sí recomiendo (tanto como si se usa esta herramienta como si no) es que procuremos que si nuestras paginas muestran información útil para nuestro visitante la diseñemos de tal forma que se pueda imprimir facilmente, y para esto es necesario no abusar de los banners publicitarios ni de otros "obstaculos". ver ejemplo.
- Y a veces es conveniente situar en la pagina un botón que permita al usuario explorar los discos de su equipo. ver ejemplo.
 |
 |