formularios html · 04/02/2009 5 fondo social europeo etiquetas • la etiqueta (vacía) nos...

04/02/2009

1

Fondo Social Europeo

JAVASCRIPTSesión III –Formularios HTML


FORMULARIOS

HTML

04/02/2009

2


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


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


Formularios HTML

• Tipo INPUT▫ TEXT

▫ RADIO

▫ CHECKBOX

▫ BUTTON

▫ FILE

▫ HIDDEN

▫ PASSWORD

▫ SUBMIT

• SELECT▫ Simple / múltiple

• TEXTAREA


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


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‟.


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


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


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


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


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


Áreas de texto

<form name="formulario">

<textarea cols="30" rows="4"

name="taComentario">

Este libro me parece ...

</textarea>

</form>


var valor = document.formulario.taComentario.value


Contraseñas


Contraseña: <input type="password"

name="clave">

</form>


var valor = document.formulario.clave.value

04/02/2009

8


Radiobutton


<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>


Radiobutton


//array

var elementos = document.formulario.rbTitulo

alert(elementos[0].value + " : " + elementos[0].checked);



Devuelve

II

ITIG

ITIS

Devuelve

true/false según esté o no

seleccionado el

04/02/2009

9


Radiobutton


//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);

}


Checkbox


<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


Ckeckbox


//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);

}


Listas desplegables


<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


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


Lista desplegables


//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


Listas


<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>


Listas


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


Botones


<input type="button" name="botNuevo" value="Añadir una más">

</form>


Botón de Envío (Submit)


<input type="submit" name="botMandar" value="Enviar datos">

</form>

04/02/2009

14


Botón de restauración del

formulario(Reset)


<input type="reset" name="botBorrar" value="Borrar Datos">

</form>


Botón de imagen


<input type=“image" name="botImagen“ src=“imagen.jpg”>

</form>

URL de la

imagen

04/02/2009

15


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>


ACTIVIDAD

• Crear un formulario que presente el siguiente aspecto:

04/02/2009

16


EL MODELO DE

OBJETOS JS


Los objetos del navegador

04/02/2009

17


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


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


Referencia a los objetos: ejemplo<BODY>

<H1>Objetos de los documentos HTML</H1>

<FORM NAME="miFormulario">


</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


Referencia a los objetos: ejemplo<FORM NAME="miFormulario">


</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


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"]


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:

formularios html · 04/02/2009 5 fondo social europeo etiquetas • la etiqueta (vacía) nos...

Documents