Objetos DOM para formularios

jаvascript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente un array llamado forms y que contiene la referencia a todos los formularios de la página.

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.

A continuación se verán los objetos que hacen parte del formulario:

Objetos text, textarea y password

Estos objetos representan los campos de texto dentro de un formulario. 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.

<!doctype html>
<html> 
<head> 
<title> Ejemplo password</title> 
</head> 

<body> 
<script language= "jаvascript" type= "text/jаvascript">

function Mostrar() 
{
alert('Tu nombre es ' + formulario.nombre.value);
alert('Tu password es ' + formulario.pass.value);
}

</script> 

<form name="formulario" id="formulario">

Nombre:<br> <input type="text" name="nombre" value="" maxlength="15"><br><br>

Password:<br><input type="password" name="pass" maxlength="10"><br>

</form>

<a href="jаvascript:Mostrar();">Mostrar datos</a><br>

</body> 
</html>

Ver ejemplo

Objeto button

Hay tres tipos de botones: uno genérico, 'button', que no tiene acción asignada, y dos específicos, 'submit' y 'reset'. Estos dos últimos tienen una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.

Propiedades

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

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

Métodos

click(): Realiza la acción de pulsado del botón. [3].

Ejemplo:

<!doctype html>
<html> 

<head> 
<title>Ejemplo button</title> 
</head> 

<body>
<script language= "jаvascript" type= "text/jаvascript">

function Mostrar(boton)
{
alert('Ha hecho clic sobre el botón: ' + boton.name+', de valor: '+boton.value);
return true;
}

</script>

<form name="formulario">

Un botón: <input type="button" name="Boton1" value="El botón 1" onclick="Mostrar(this);"><br><br>

Un botón: <input type="button" name="Boton2" value="El botón 2" onclick="Mostrar(this);"><br><br>

Un botón: <input type="button" name="Boton3" value="El botón 3" onclick="Mostrar(this);"><br>

</form>

</body>
</html>

Ver ejemplo

Objeto checkbox

Las "checkboxes" 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 equivalente a "true" o "false".

Propiedades

hecked: 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.

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

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

Métodos

click(): Realiza la acción de pulsado del botón. [4].

Ejemplo:

<!doctype html>
<html> 

<head> 
<title>Ejemplo checkbox</title> 
</head> 

<body>
<script language= "jаvascript" type= "text/jаvascript">

function Mostrar()
{
msg="Opcion 1:"+formulario.check1.checked+"n"
msg+="Opcion 2:"+formulario.check2.checked+"n"
msg+="Opcion 3:"+formulario.check3.checked+"n"
alert(msg);
}

</script>

<form name="formulario" id="formulario">

<input type="checkbox" name="check1" checked> Opción 1<br>
<input type="checkbox" name="check2"> Opción 2 <br>
<input type="checkbox" name="check3" checked> Opción 3<br>

</form>

<a href="jаvascript:Mostrar()">Ver valores</a>

</body>
</html>

Ver ejemplo

Objeto radio

A diferencia de los checkbox, que permiten elegir varias posibilidades entre las dadas, los objetos radio sólo permiten elegir una de entre todas las que hay. Están pensados para posibilidades mutuamente 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.

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

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

Nota: 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. [5].

Ejemplo:

<!doctype html>
<html> 

<head> 
<title>Ejemplo radio</title> 
</head> 

<body>
<script language= "jаvascript" type= "text/jаvascript">

function Mostrar()
{
msg="Elementos:"+formulario.edad.length+"n";
msg+="Menor de 18 años: "+formulario.edad[0].checked+"n";
msg+="Entre 18 y 60 años: "+formulario.edad[1].checked+"n";
msg+="Mayor de 60 años: "+formulario.edad[2].checked+"n";
alert(msg);
}

</script>

<form name="formulario" id="formulario">
Edad:<br><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>

<a href="jаvascript:Mostrar()">Ver valores</a>

</body>
</html>

ver ejemplo

Objeto select

Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que se puede escoger alguna (o algunas) de sus opciones.

Propiedades

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.

Ejemplo:

<!doctype html>
<html> 

<head> 
<title>Ejemplo select</title> 
</head> 

<body>
<script language= "jаvascript" type= "text/jаvascript">

function Mostrar(boton)
{
msg="Elementos:"+formulario.edad.length+"n";
msg+="Edad: "+formulario.edad.options
[formulario.edad.selectedIndex].value+"n";
alert(msg);
}

</script>

<form name="formulario" id="formulario" >
Edad:<br><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>

<br>
<a href="jаvascript:Mostrar()">Ver valores</a>

</body>
</html>

Ver ejemplo

Objeto hidden

Gracias a este objeto se puede almacenar información extra en el formulario de forma completamente invisible para el usuario, pues no se verá en ningún momento que se tienen 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.