versión para imprimir

UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES
Licenciatura en Artes Multimediales
Informática General 2016
Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
Formularios
Objetos del navegador
Son los objetos que están disponibles en JavaScript para controlar cualquier
elemento presente en la página web. Cuando se carga una página, el navegador
crea una jerarquía de objetos en memoria que sirven para controlar los distintos
elementos de dicha página.
Jerarquía de objetos del navegador
Objetos del navegador
Todos los objetos comienzan en un objeto que se llama window. Además de ofrecer
control, el objeto window da acceso a otros objetos como el documento (la página
web). Para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por
el objeto window. JavaScript entiende que la jerarquía empieza en window aunque
no se escriba.
Jerarquía de objetos del navegador
Las propiedades de un objeto pueden ser a su vez otros objetos. El objeto
document, por ejemplo, contiene todas las propiedades y métodos necesarios para
controlar muchos aspectos de la página.
Algunas propiedades del objeto window
•
•
•
location
outerHeight
outerWidth
Algunos métodos del objeto window
•
•
•
•
•
•
•
•
alert(texto)
back()
close()
open()
print()
prompt()
moveBy(pixelsX, pixelsY)
resizeTo(pixelsAncho,pixelsAlto)
Objeto document
Con el objeto document se controla la página web y todos los elementos que
contiene. El objeto document es la página actual que se está visualizando en ese
momento.
Algunas propiedades del objeto document
•
•
•
•
bgColor
Form
linkColor
title
Formularios HTML
Permiten al usuario interactuar con aplicaciones web: En buscadores; En formularios
de contacto; En menúes de navegación; Como elementos de interacción.
<form> </form>
El tag form encierra todos los elementos del formulario: Botones, Cuadros de texto,
Listas desplegables, Etc.
<form action="url" method="post"></form>
Atributos:
action (url indica la URL que se encarga de procesar los datos del formulario)
method="post" o "get" (la forma en que se envían los datos)
enctype="application/x-www-form-urlencoded" o "text/plain" o "multipart/form-data"
label
<label>Título del campo</label>
Para definir el título de un campo
Atributos
for="id_de_elemento" (indica a qué campo hace de título)
input
<input type="text" name="nombre" id="nombre">
Atributos
type="text | password | checkbox | radio | submit | reset | file | hidden | button |
image"
name="nombre"
id="nombre"
Atributo type, nuevos valores en HTML5
email | url
number | range (Se determinan restricciones con los atributos max, min, step)
color | search | tel
date | datetime-local | time | month | week
Otros atributos de input
value="texto" (valor inicial)
size="nro de caracteres" (solo para text y password)
maxlength="nro de caracteres" (text y password)
checked (preselecciona checkbox y radio)
tabindex="nro orden"
Nuevos atributos de input en HTML5
placeholder="texto" (valor de referencia)
required (determina que es obligatorio completar el campo)
autofocus (pone el foco en el campo cuando se carga la página)
pattern="regexp" (el valor que se complete tiene que coincidir con la expresión
regular especificada)
input type="text"
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" size="40" maxlength="100">
El atributo placeholder permite poner un valor de referencia, pero no se envía. Si se
usa el atributo value, el valor se envía, se guarda o se controla por programación.
input type="password"
<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" name="contrasena" size="40"
maxlength="8">
No se puede ver lo que se escribe en el campo
input type="checkbox"
<input type="checkbox" name="rojo" id="rojo">
<label for="rojo">Rojo</label>
<input type="checkbox" name="verde" id="verde”>
<label for="verde">Verde</label>
<input type="checkbox" name="azul" id="azul”>
<label for="azul">Azul</label>
Para activar y desactivar varias opciones relacionadas pero no excluyentes
input type="radio"
<input type="radio" name="radio" id="si" value="si">
<label for="si">Sí</label>
<input type="radio" name="radio" id="no" value="no">
<label for="no">No</label>
Permite selccionar sólo una opción
Se usa el atributo name para indicar que pertenecen al mismo grupo de opciones
input type="submit"
<input type="submit" name="enviar" id="enviar" value="Enviar">
Envia los datos del formulario según lo especificado en el action
input type="reset"
<input type="reset" name="borrar" id="borrar" value="Borrar">
Borra los datos ingresados en el formulario
textarea
<label for="comentarios">Comentarios</label>
<textarea name="comentarios" id="comentarios" cols="45" rows="5"></textarea>
Para permitir ingresar gran cantidad de texto
select
<label for="cantidad">Cantidad</label>
<select name="cantidad" id="cantidad">
<option value="uno">Uno</option>
<option value="dos">Dos</option>
<option value="tres">Tres</option>
</select>
Para listas o menues de opciones
select / option
Atributos para select
size="nro" (filas de la lista que se muestran)
multiple (permite seleccionar más de una opción)
Atributos para option
selected (seleccionado por defecto)
fieldset / legend
La etiqueta <fieldset> agrupa los campos del formulario y la etiqueta <legend>
asigna un nombre a cada agrupación.
Formularios en JavaScript
El objeto form depende en la jerarquía de objetos del objeto document. De un
formulario dependen todos los elementos que hay dentro, como pueden ser campos
de texto, cajas de selección, áreas de texto, botones de radio, etc.
Para acceder a un formulario desde el objeto document podemos hacerlo de dos
formas:
• A partir de su nombre, asignado con el atributo NAME de HTML.
• Mediante la matriz de formularios del objeto document, con el índice del
formulario al que queremos acceder.
<form name="formulario1">
<input type="text" name="campo1" id="campo1">
<input type="text" name="campo2" id="campo2">
</form>
Podremos acceder con su nombre:
document.formulario1
O con su índice, si es el primero:
document.forms[0]
De similar manera accedemos a los elementos de un formulario, que dependen del
objeto form:
• A partir del nombre del objeto asignado con el atributo NAME de HTML.
• Mediante la matriz de elementos del objeto form, con el índice del elemento al
que queremos acceder.
<form name="formulario1">
<input type="text" name="campo1" id="campo1">
<input type="text" name="campo2" id="campo2">
</form>
Para acceder al campo1:
document.formulario1.campo1
document.forms[0].campo1
document.formulario1.elements[0]
document.forms[0].elements[0]
También podemos acceder a cualquier elemento con el método getElementById()
Recordar que el ID debe ser único en la página.