04/02/2009
1
Fondo Social Europeo
JAVASCRIPTSesión III –Formularios HTML
Fondo Social Europeo
FORMULARIOS
HTML
04/02/2009
2
Fondo Social Europeo
Formularios HTML
• HTML nos permite añadir controles (o widgets) a nuestro documentos.
• El propósito de estos controles es recoger información del usuario, y enviarla a un servidor web, que se encargará de procesarlo.
▫ Por ejemplo: inscripción a un curso
Fondo Social Europeo
Formularios HTML
• Siempre que queramos introducir controles en nuestro documento, debemos utilizar la etiqueta <form> … </form>
• Dentro de esta etiqueta deben estar contenidos todos los controles, que pueden aparecer junto con otras etiquetas HTML (<table>, <p>, etc.)
• Un formulario debe tener un botón de envío. Al pulsarlo, nuestro navegador enviará los datos introducidos en el formulario al servidor web
• Concretamente, lo que se envían son unos pares (parámetro, valor)▫ (DNI, 49302920)
▫ (Nombre, Pepe)• Cada control del formulario genera un parámetro
04/02/2009
3
Fondo Social Europeo
Formularios HTML
• Tipo INPUT▫ TEXT
▫ RADIO
▫ CHECKBOX
▫ BUTTON
▫ FILE
▫ HIDDEN
▫ PASSWORD
▫ SUBMIT
• SELECT▫ Simple / múltiple
• TEXTAREA
Fondo Social Europeo
Formularios HTML
CódigoHTML:<form name="formulario" >
...
</form>
<form name="otro_formulario" >
...
</form>
Código JS (para acceder al formulario):var formularioPrincipal = document.formulario;
var formularioSecundario = document.otro_formulario;
04/02/2009
4
Fondo Social Europeo
Etiquetas de controles
• Para introducir controles utilizaremos cuatro etiquetas:
▫ <input> checkboxes, radio button, campos de texto (una línea), botones, selección de ficheros, campos ocultos.
▫ <textarea> campos de texto (varias líneas).
▫ <select> y <option> listas desplegables y „combos‟.
Fondo Social Europeo
Etiquetas de controles
• Todas las etiquetas tienen un atributo name=“nombre”
que indica el nombre del control. Es importante de cara a que:
▫ El script de servidor (JSP, PHP, ASP, etc.) que recibe los datos del formulario utilizará este nombre para acceder al dato introducido en dicho control.
• Todas las etiquetas tienen un atributo value=“valor”, cuyo significado varía en cada
control.
04/02/2009
5
Fondo Social Europeo
Etiquetas <input>
• La etiqueta <input> (vacía) nos permite introducir distintos tipos de controles
• El tipo de control se indica con el atributo type=“tipo_control”
• Hay una serie de atributos que tienen el mismo significado en todos los controles, y otros atributos cuyo significado varía según el tipo de control
Fondo Social Europeo
La etiqueta <input>
<inputtype=“tipo_control”
name=“nombre”
value=“valor”readonly=“readonly”
disabled=“disabled”
atributos particulares
/>
• readonly=“readonly”
▫ Indica que es un control de sólo lectura
• disabled=“disabled”
▫ Indica que el control está deshabilitado
04/02/2009
6
Fondo Social Europeo
Campos de texto
<form name="formulario" >
Introduzca la cadena a buscar:
<input type="text"
name="txtCadena" value="valor por
defecto" size="20“/>
</form>
Acceso al valor desde JS:
var valor = document.formulario.txtCadena.value
Fondo Social Europeo
Acceso a elementos de FORM
• Forma general de acceder a un elemento:
document.miForm.elElemento.propiedad
• Ejemplo:
document.calc.visor.value=„5‟;
04/02/2009
7
Fondo Social Europeo
Áreas de texto
<form name="formulario">
<textarea cols="30" rows="4"
name="taComentario">
Este libro me parece ...
</textarea>
</form>
Acceso al valor desde JS:
var valor = document.formulario.taComentario.value
Fondo Social Europeo
Contraseñas
<form name="formulario">
Contraseña: <input type="password"
name="clave">
</form>
Acceso al valor desde JS:
var valor = document.formulario.clave.value
04/02/2009
8
Fondo Social Europeo
Radiobutton
<form name="formulario">
<input type="radio" name="rbTitulo" value="II" checked>I.Informática
<input type="radio" name="rbTitulo" value="ITIG">I.T.I. Gestión
<input type="radio" name="rbTitulo" value="ITIS">I.T.I. Sistemas
</form>
Fondo Social Europeo
Radiobutton
Acceso al valor desde JS:
//array
var elementos = document.formulario.rbTitulo
alert(elementos[0].value + " : " + elementos[0].checked);
alert(elementos[1].value + " : " + elementos[1].checked);
alert(elementos[2].value + " : " + elementos[2].checked);
Devuelve
II
ITIG
ITIS
Devuelve
true/false según esté o no
seleccionado el
04/02/2009
9
Fondo Social Europeo
Radiobutton
Acceso al valor desde JS:
//array
var elementos = document.formulario.rbTitulo;
//recorrer el array
for (var i = 0; i < elementos.length; i++)
{
alert(“Elemento: “+elementos[i].value +
“seleccionado: “ + elementos[i].checked);
}
Fondo Social Europeo
Checkbox
<form name="formulario">
<input type="checkbox" name=extras value="garaje" checked>Garaje
<input type="checkbox" name=extras value="piscina">Piscina
<input type="checkbox" name=extras value="jardin">Jardín
</form>
04/02/2009
10
Fondo Social Europeo
Ckeckbox
Acceso al valor desde JS:
//array
var elementos = document.formulario.extras;
//recorrer el array
for (var i = 0; i < elementos.length; i++)
{
alert(“Elemento: “+elementos[i].value +
“seleccionado: “ + elementos[i].checked);
}
Fondo Social Europeo
Listas desplegables
<form name="formulario">
<select name="titulacion">
<option value="II" selected>Ingeniería Informática
<option value="ITIG">Ing. Téc. en Informática de Gestión
<option value="ITIS">Ing. Téc. en Informática de Sistemas
</select>
</form>
04/02/2009
11
Fondo Social Europeo
Lista desplegables
Acceso al valor seleccionado desde JS:
//LISTAS DESPLEGABLES
var lista = document.formulario.titulacion;
//Obtener el índice de la opción que se ha seleccionado
var indice = lista.selectedIndex;
//Con el índice y el array "options", se obtiene la opción seleccionada
var opcionSeleccionada = lista.options[indice];
//Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Texto seleccionado en la lista desplegable: "+ textoSeleccionado);
alert("Valor seleccionado en la lista desplegable: "+ valorSeleccionado);
Options: array creado
automáticamente por el
navegador para cada lista
desplegable
Fondo Social Europeo
Lista desplegables
Acceso al valor seleccionado desde JS:
//Código más reducido
alert(“Text seleccionado en la lista desplegable: "+
lista.options[document.formulario.titulacion.selectedIndex].text);
alert("Valor seleccionado en la lista desplegable: "+
lista.options[document.formulario.titulacion.selectedIndex].value);
04/02/2009
12
Fondo Social Europeo
Listas
<form name="formulario">
<select multiple size="3" name="idiomas">
<option value="ingles" selected>Inglés
<option value="frances">Francés
<option value ="aleman">Alemán
<option value ="holandes">Holandés
</select>
</form>
Fondo Social Europeo
Listas
Acceso al valor seleccionado desde JS:
for (i = 0; i < document.formulario.idiomas.options.length; i++)
{
if (document.formulario.idiomas.options[i].selected)
alert("Seleccionado idioma "+
document.formulario.idiomas.options[i].text);
}
04/02/2009
13
Fondo Social Europeo
Botones
<form name="formulario">
<input type="button" name="botNuevo" value="Añadir una más">
</form>
Fondo Social Europeo
Botón de Envío (Submit)
<form name="formulario">
<input type="submit" name="botMandar" value="Enviar datos">
</form>
04/02/2009
14
Fondo Social Europeo
Botón de restauración del
formulario(Reset)
<form name="formulario">
<input type="reset" name="botBorrar" value="Borrar Datos">
</form>
Fondo Social Europeo
Botón de imagen
<form name="formulario">
<input type=“image" name="botImagen“ src=“imagen.jpg”>
</form>
URL de la
imagen
04/02/2009
15
Fondo Social Europeo
Un ejemplo de formulario
<html>
<head>
<title>formulario 1</title>
</head>
<body>
<form method=“post” action="ej.cgi">
nombre<input name="nombre">
<br>
edad<input name=“edad"><br>
<input type=submit name="enviar">
<br>
<input type=reset name="limpiar">
</form>
</body>
</html>
Fondo Social Europeo
ACTIVIDAD
• Crear un formulario que presente el siguiente aspecto:
04/02/2009
16
Fondo Social Europeo
EL MODELO DE
OBJETOS JS
Fondo Social Europeo
Los objetos del navegador
04/02/2009
17
Fondo Social Europeo
Referencia a los objetos• A un objeto se puede hacer referencia de dos formas:
▫ Por su nombre: atributo NAME del elemento HTML (algunos elementos HTML como BODY tienen un nombre predeterminado como document)
El nombre se coloca detrás del objeto que lo contiene y separado por un punto (sintaxis de punto)
window.status
▫ Por su posición (o nombre de propiedad) en el array de elementos del objeto que lo contiene (sintaxis de array)
forms[0] forms["cajaTexto"]
• Adicionalmente se puede usar this o self para referenciar al objeto
actual; fuera de todo contexto se refiere a la ventana
• Si tan sólo manejamos una ventana del navegador podemos omitir el objeto superior de la jerarquía de contenido: window
Fondo Social Europeo
Referencia a los objetos: ejemplo• Sea el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Objetos de JavaScript</TITLE>
</HEAD>
<BODY>
<H1>Objetos de los documentos HTML</H1>
<FORM NAME="miFormulario">
<INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato">
</FORM>
</BODY>
</HTML>
• Al interpretar el código HTML se crean diferentes objetos
• El primer objeto que se crea es window, objeto de clase Window que
representa la ventana del navegador
04/02/2009
18
Fondo Social Europeo
Referencia a los objetos: ejemplo<BODY>
<H1>Objetos de los documentos HTML</H1>
<FORM NAME="miFormulario">
<INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato">
</FORM>
</BODY>
• El elemento BODY provoca la creación del objeto document, que representa
la página web que se está cargando en el navegador
• Al documento se con window.document
• Dentro del objeto window.document se crea otro objeto, de clase Form, que
representa el formulario definido en la página
• Y dentro del objeto de clase Form se crea otro objeto de clase Text, que
representa el cuadro de texto del formulario
Fondo Social Europeo
Referencia a los objetos: ejemplo<FORM NAME="miFormulario">
<INPUT NAME="cajaTexto" TYPE="text" VALUE="Dato">
</FORM>
• Los objetos correspondientes al formulario y al cuadro de texto reciben el nombre que se asigna al atributo NAME del correspondiente elemento HTML
• La ventana (window) sólo contiene un documento, al que se accede a través del objeto document; sin embargo, un documento puede tener varios formularios, cuyos objetos se guardan en un array denominado forms; así al
formulario se puede acceder (dentro del documento) directamente por su nombre o a través del array (por su posición, 0 en este caso, o por su nombre):
window.document.miFormulario
window.document.forms[0]
window.document.forms["miFormulario"]
04/02/2009
19
Fondo Social Europeo
Acceso a los controles dentro de un
formulario• Nuevamente, en un formulario puede haber varios controles; para acceder al
objeto de un control se puede usar directamente su nombre o el array de controles (representado tanto por la propiedad elementscomo por el nombre del formulario o la correspondiente posición del array forms); el
acceso al array se puede realizar por posición o por el nombre del objeto-control
• En este caso, el control es un cuadro de texto (clase Text):
window.document.miFormulario.cajaTexto
window.document.miFormulario[0]
window.document.miFormulario.elements[0]
window.document.forms[0].cajaTexto
window.document.forms[0].elements["cajaTexto"]
window.document.forms[0][0]
window.document.forms["miFormulario"]["cajaTexto"]
Fondo Social Europeo
Acceso a los controles dentro de un
formulario• Los objetos que se mantienen en arrays se van colocando en los arrays
en el orden en el que se crean
• El orden de los elementos en el archivo HTML determina el orden de colocación de los correspondientes objetos en el array elements
• Relaciones de contenido entre los objetos: