7 Manipulacion de Datos en Formularios

FORMULARIOS
Diseño de
la Java
estructura
web Script
Adaptado al curso de Diseñador web y multimedia
GUIA DEL
ALUMNO
Fco Javier Lucas M. Página 1

Contenido
Formularios ................................................................................................................................. 3
El objeto form .......................................................................................................................... 3
Los objetos text, textarea y password ................................................................................. 4
El objeto button ................................................................................................................... 5
El objeto checkbox ............................................................................................................... 6
El objeto radio ..................................................................................................................... 7
El objeto select ..................................................................................................................... 8
El objeto hidden ................................................................................................................ 10

Formularios
En este capítulo finalizamos el estudio de los objetos del navegador viendo cómo manipular
formularios. Este punto es especialmente importante: si aprendemos correctamente a
manipular todos los objetos de un formulario, podremos hacer funciones que nos permitan
validarlo antes de enviar estos datos a un servidor, ahorrándole la faena de tener que verificar
la corrección de los datos enviados.
El objeto form
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el
objeto document, los formularios se agrupan en un array dentro de document. Cada elemento
de este array es un objeto de tipo form.
Propiedades
action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la
dirección en la que los datos del formulario serán procesados.
elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en
el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en
este orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será
elements[0], el checkbox será elements[1] y la lista de selección será elements[2].
encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE
del form.
method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la
información del formulario (GET/POST).
Métodos
reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET
dispuesto en el form.
submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo
SUBMIT dispuesto en el form.
Vistas ahora las propiedades y métodos del objeto form, pasamos a estudiar, uno por uno,
todos los objetos contenidos en el formulario.
Los objetos text, textarea y password
Estos objetos representan los campos de texto dentro de un formulario. Además, el objeto
password es exactamente igual que el text salvo en que no muestra los caracteres introducidos
por el usuario, poniendo asteriscos (*) en su lugar.
Propiedades
dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a uno de
estos objetos por defecto.
name. Es una cadena que contiene el valor del parámetro NAME.
value. Es una cadena que contiene el valor del parámetro VALUE.
maxlength. Número máximo de caracteres que puede contener el campo de texto.
Métodos
blur(). Pierde el foco del ratón sobre el objeto especificado.
focus(). Obtiene el foco del ratón sobre el objeto especificado.
select(). Selecciona el texto dentro del objeto dado.


<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">

</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario" method="GET">
Nombre: <input type="text" name="nombre" value="Tu nombre" maxlength="15"><br>
Password: <input type="password" name="pass" maxlength="10"><br>
</form>
<a href="javascript:Mostrar();">Mostrar datos</a><br>
</BODY>
</HTML>
El objeto button
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción asignada, y
dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen una acción asignada
al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.
Propiedades
Métodos
click(). Realiza la acción de pulsado del botón

<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
Un boton: <input type="button" name="Boton1" value="El boton 1"
OnClick="Mostrar(this);"><br><br>
OnClick="Mostrar(this);"><br><br>
OnClick="Mostrar(this);"><br>
</form>
</BODY>
</HTML>
El objeto checkbox
Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que aparece
a su izquierda. El cuadrito pulsado equivale a un "sí" y sin pulsar a un "no" o, lo que es lo
mismo, a "true" o "false".
Propiedades
checked. Valor booleano que nos dice si el checkbox está pulsado o no
defaultChecked. Valor booleano que nos dice si el checkbox debe estar seleccionado por
defecto o no
Métodos
click(). Realiza la acción de pulsado del botón

<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
<input type="checkbox" name="check1" checked> Opcion 1<br>

<input type="checkbox" name="check2"> Opcion 2<br>
<input type="checkbox" name="check3" checked> Opcion 3<br>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>
El objeto radio
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas,
los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para
posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de
18 años, no se puede estar a la vez soltero y casado, etc.).
Propiedades
checked. Valor booleano que nos dice si el radio está seleccionado o no.
defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o
no.
length. Valor numérico que nos dice el número de opciones dentro de un grupo de elementos
radio.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo
valor en NAME.
Métodos
click(). Realiza la acción de pulsado del botón.

<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
Edad:<br>
<input type="radio" name="edad" value="<18"> Menor de 18 años.<br>
<input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60 años.<br>
<input type="radio" name="edad" value=">60"> Mayor de 60 años.<br>
</form>
</BODY>
</HTML>
El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una
lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.
Propiedades
del objeto select
length. Valor numérico que nos indica cuántas opciones tiene la lista
name. Es una cadena que contiene el valor del parámetro NAME
options. Se trata de un array que contiene cada una de las opciones de la lista. Este array tiene,
a su vez, las siguientes propiedades:
defaultSelected. Valor booleano que nos indica si la opción está seleccionada por defecto.
index. Valor numérico que nos da la posición de la opción dentro de la lista.

length. Valor numérico que nos dice cuántas opciones tiene la lista.
options. Cadena con todo el código HTML de la lista.
selected. Valor booleano que nos dice si la opción está actualmente seleccionada o no.
text. Cadena con el texto mostrado en la lista de una opción concreta.
value. Es una cadena que contiene el valor del parámetro VALUE de la opción concreta de la
lista.
selectedIndex. Valor numérico que nos dice cuál de todas las opciones disponibles está
actualmente seleccionada.

<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
Edad:<br>
<select name="edad">
<option value="<18" SELECTED>Menor de 18 años</option>
<option value=">18 y <60">Entre 18 y 60 años</option>
<option value=">60">Mayor de 60 años</option>
</select>
</form>
</BODY>
</HTML>
El objeto hidden
Gracias a este objeto podemos almacenar información extra en el formulario de forma
completamente transparente para el usuario, pues no se verá en ningún momento que
tenemos estos campos en el documento.
Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene
sentido pues el usuario no va a modificarlo) y que no se puede editar.
Propiedades
value. Es una cadena que contiene el valor del parámetro VALUE

7 Manipulacion de Datos en Formularios

Cargado por

Copyright:

Formatos disponibles

7 Manipulacion de Datos en Formularios

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

7 Manipulacion de Datos en Formularios

Cargado por

Copyright:

Formatos disponibles

FORMULARIOS

Fco Javier Lucas M. Página 1

El objeto form .......................................................................................................................... 3

Los objetos text, textarea y password ................................................................................. 4

El objeto button ................................................................................................................... 5

El objeto checkbox ............................................................................................................... 6

El objeto radio ..................................................................................................................... 7

El objeto select ..................................................................................................................... 8

El objeto hidden ................................................................................................................ 10

Los objetos text, textarea y password

name. Es una cadena que contiene el valor del parámetro NAME.

value. Es una cadena que contiene el valor del parámetro VALUE.

maxlength. Número máximo de caracteres que puede contener el campo de texto.

blur(). Pierde el foco del ratón sobre el objeto especificado.

focus(). Obtiene el foco del ratón sobre el objeto especificado.

select(). Selecciona el texto dentro del objeto dado.

name. Es una cadena que contiene el valor del parámetro NAME.

value. Es una cadena que contiene el valor del parámetro VALUE.

click(). Realiza la acción de pulsado del botón

checked. Valor booleano que nos dice si el checkbox está pulsado o no

name. Es una cadena que contiene el valor del parámetro NAME.

value. Es una cadena que contiene el valor del parámetro VALUE.

click(). Realiza la acción de pulsado del botón

<input type="checkbox" name="check1" checked> Opcion 1<br>

name. Es una cadena que contiene el valor del parámetro NAME.

value. Es una cadena que contiene el valor del parámetro VALUE.

click(). Realiza la acción de pulsado del botón.

del objeto select

name. Es una cadena que contiene el valor del parámetro NAME

index. Valor numérico que nos da la posición de la opción dentro de la lista.

options. Cadena con todo el código HTML de la lista.

text. Cadena con el texto mostrado en la lista de una opción concreta.

name. Es una cadena que contiene el valor del parámetro NAME.

value. Es una cadena que contiene el valor del parámetro VALUE

También podría gustarte