|
|
|||||
| 1 2 3 4 5 |
|
Los formularios nos permiten interactuar con el usuario, podríamos decir, en dos sentidos:
El usuario introduce dicha información en los campos del formulario, la cual podemos usar para realizar otros procesos.
La estrutura de un formularo es:
<FORM NAME="nombre">
cuerpo del formulario
</FORM>
Donde el atributo NAME= proporciona un nombre al formulario y en el cuerpo del formulario se colocan los distintos elementos que permiten introducir los datos.
Vamos a clasificarlos la introducción de datos en tres clase:
La introducción de los datos se consigue por medio de la siguiente etiqueta:
<INPUT TYPE="tipo" NAME="nombre" VALUE="valor">
donde:
El siguiente fragmento de código define un cuadro de texto y un botón que al pulsarlo hace aparecer un cuadro de alerta con lo que el usuario dígito en el cuadro de texto.
|
Guión: Cuadro
de alerta
|
La ejecuación del guión sería algo como:
El propósito de la función leer() en este guión es recoger la infomación que se escribió en el cuadro de texto y mostrarla como parte de un cuadro alert().
Note que la sentencia jerárquica document.form2.ctexto.value esta recorriendo los elementos de la página hasta llegar al texto específico que escribimos en el cuadro.
El siguiente guión muestra como se puede pasar información desde los elementos del formulario a la propia función, antes de que la función sea ejecutada.Básicamente el guión emplea dos botones para permitir que se elija un color de fondo azul o rosa.
|
Guión: Color
de fondo 1
|
El resultado del guión sería algo similar a:
Observe que la función nuevocolor(color) permite al usuario que pase lo que el quiere que suceda, en este sentido podríamos decir que es dinámica.
Vamos a modificar el guión anterior de forma que ahora no aparezca el mensaje: Eligió el color en un botón de alerta, sino que en un cuadro de texto.
|
Guión: Color
de fondo 2
|
En este guión nuevamente transferimos una cadena de caracteres a la función, pero en esta ocasión dicha cadena será usada para crear un enlace de hipertexto y para realizar una busqueda Yahoo!:
|
Guión: Busqueda
en Yahoo
|
Y el resultado del guión es:
El usuario introduce una cadena de texto en el cuadro de texto y da click en el botón para iniciar la búsqueda. Se invoca la función y el valor se toma del cuadro de texto. El valor se añade al URL de Yahoo! para emplear su motor de búsqueda. El URL completo se asigna en la variable busqueda y se le proporciona al comando location.href, quien abre una nueva página con dicha información.
Cuando el texto que se desea introducir es muy grande, por ejemplo un comentario, es adecuado usar un formulario de multiples líneas.
Esto se consigue con la siguiente etiqueta
<TEXTERA NAME="nombre" ROWS="númerof" COLS="númeroc">
donde númerof y númeroc denotan el número de filas y de columnas respectivamente.
El siguiente fragmento de código HTML muestra como construir una región de texto.
|
Guión: Región
de texto
|
Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los ejemplos anteriores, escoja de entre varias opciones que se le presentan, es necesario usar un formulario en forma de menú.
Esto se logra con la etiqueta
<SELECT NAME="nombre" >
El siguiente guión le permite elegir el color de fondo de su página.
|
Guión: Item
de selección
|
Cuando queremos que el usuario elija una única opción de entre varias, podemos hacer uso de los botones de radio, que se logran con la etiqueta:
<INPUT TYPE="" NAME="nombre" VALUE="valor">
donde
Los botones de radio son de utilidad para elaborar preguntas de selección única, como la se muestra en el siguiente guión
|
Guión: Color
de fondo 3
|
La ejecuación del guión se vería algo semejante a:
Si sen(x) es negativo y tan(x) es positivo, entonces el ángulo x se encuentra en el:
Cidse
- Revista
virtual Matemática, Educación e Internet -
ITCR
Derechos Reservados