Los formularios son muy
importantes cuando se necesita obtener información del usuario. Muchas veces el usuario
no escribe los datos que se le piden o no los escribe de manera correcta. Existen
secuencias cgi que comprueban que la información esté correcta, pero Javascript la
revisa casi al instante con lo que ya no se tiene que esperar a que se cargue la otra
página que nos indica en donde nos equivocamos como sucede con las secuencias cgi.
Para que Javascript revise la información escrita en el formulario
es necesario saber como nombrar al formulario y a sus elementos (cuadros de texto,
menús,
botones, etc).
Ahora veremos como nombrar al formulario y a sus elementos; además
de la forma de referirnos a ellos cuando utilizamos Javascript, en un futuro veremos
alguna formas de comprobar la información del usuario.
Como cualquier persona que domine un poco de HTML sabe, el código
para escribir un formulario es:
<form
action="/cgi-bin/guest mehod="post" name="nombre" >
Elementos.....
</form> |
action y method son variables propias de la secuencia cgi, en el caso de
Javascript estas variables no son necesarias (aunque no deben ser borradas si la utilidad
del formulario es recabar información del usuario)
Los Elementos son los cuadros de texto, botones, etc. Al ir
entre <form> y </form>
se convierten en parte del formulario
Recordemos cuales son los elementos de un formulario y la forma HTML
de escribirlos.
| Nombre |
Ejemplo |
HTML |
Info |
| Button |
|
<input type="button" value="Botón" name="B1"> |
Info |
| - |
|
|
|
| CheckBox |
|
<input type="checkbox" name="C1" value="ON" checked> |
Info |
| - |
|
|
|
| Hidden |
|
<input type="hidden" name="H1" value="oculto"> |
Info |
| - |
|
|
|
| Password |
|
<input type="password" name="T1" value = "pass " size="12"> |
Info |
| - |
|
|
|
| Radio |
|
<input type="radio" value="V1" checked name="R1"> |
Info |
| - |
|
|
|
| Reset |
|
<input type="reset" value="Restablecer" name="B2"> |
Info |
| - |
|
|
|
| Select |
|
<select name="D1" size="1"> <option value="numero_uno"> Opcion</option> </select> |
Info |
| - |
|
|
|
| Submit |
|
<input type="submit" value="Enviar" name="B1"> |
Info |
| - |
|
|
|
| Text |
|
<input type="text" name="T1" size="13" value="Texto"> |
Info |
| - |
|
|
|
| Textarea |
|
<textarea rows="2" name="S1" cols="11">Area
de texto</textarea> |
Info |
Para referirse al formulario utilizamos la siguiente
línea de código: document.nombre_forma
Entre document y nombre_forma va
un punto.
nombre_forma debe ser sustituido por el nombre de tu
formulario.
Para referirse a un elemento de un formulario utilizamos la siguiente
línea de código: document.nombre_forma.nombre_elemento
Entre nombre_forma y nombre_elemento
va un punto
nombre_elemento debe ser sustituido por el nombre del
elemento
En las próximas entregas se incluirá la forma de manejar cada uno de los elementos aquí
mostrados.
La mayoría de los elementos mostrados arriba manejan tres variables,
que son:
type
defaultValue
name
Sólo de lectura, la primera expresa el tipo de elemento de formulario, la segunda el
valor inicial del elemento y la tercera el nombre que le diste al elemento.
