PDF de programación - 2 - Formularios y JavaScript

Imágen de pdf 2 - Formularios y JavaScript

2 - Formularios y JavaScriptgráfica de visualizaciones

Publicado el 14 de Enero del 2017
558 visualizaciones desde el 14 de Enero del 2017
422,6 KB
24 paginas
2-­‐Formularios
 y
 JavaScript
 

Course:
 Developing
 web-­‐based
 applica=ons
 

Cris*na
 Puente,
 Rafael
 Palacios
 

2010-­‐2011
 

1
 

Creación
 de
 formularios
 

Formularios
 

•  Un formulario HTML es una sección de un documento que contiene contenido
normal, código, elementos especiales llamados controles (casillas de verificación
(checkboxes), radiobotones (radio buttons), menús, etc.

<FORM action="http://algunsitio.com/prog/usuarionuevo.php"
method="post">

Nombre: <INPUT type="text" id="nombre"><BR>

Apellido: <INPUT type="text" id="apellido"><BR>

email: <INPUT type="text" id="email"><BR>

<INPUT type="radio" name="sexo" value="Varón"> Varón<BR>

<INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>

<INPUT type="submit" value="Enviar"> <INPUT type="reset">

</FORM>

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

3
 

Formularios
 

– El elemento form actúa como contenedor de controles dentro
de una página web.
– Atributos:



•  Action: Programa que manejará el formulario completado y

enviado (el atributo).

•  Name: Nombre con el que se referirá al formulario en acciones

posteriores. No es obligatorio pero conviene ponerlo!!!.

•  Method: El método por el cual se enviarán los datos del usuario
al servidor (el atributo). (Get por URL, Post por entrada estándar
stdio)

•  Accept-charset: Una codificación de caracteres que debe ser
aceptada por el servidor para poder manejar este formulario

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

4
 

Formularios
 

– Métodos de envío de formularios:

–  get: Con el método HTTP "get", el conjunto de datos del formulario
se agrega al URI especificado por el atributo action (con un signo de
interrogación ("?") como separador) y este nuevo URI se envía al
agente procesador.

–  post: Con el método HTTP "post", el conjunto de datos del

formulario se incluye en el cuerpo del formulario y se envía al
agente procesador.

–  El método "get" cuando no tiene efectos secundarios.
–  Si el servicio asociado con el procesamiento de un formulario causa

efectos secundario (si el formulario modifica una base de datos),
debería usarse el método "post".

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

5
 

Formularios
 

<html> 
<head> 
   <title>Ejemplo de PHP</title> 
</head> 
<body> 
<H1>Ejemplo de procesado de formularios</H1> 

<FORM ACTION="procesa2.php" METHOD="GET"> 
Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR> 
Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR> 
<INPUT TYPE="submit" VALUE="Enviar"> 
</FORM> 
</body> 
</html>

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

6
 

Formularios
 

•  Controles:
 
 text
 input
 
 

–  La etiqueta <input> define la introducción de variables.
– 

Junto a esta etiqueta solemos encontrar los siguientes
atributos:
type="" Indicará el tipo de variable a introducir.

– 
–  maxlenght="" Seguido de un valor que limitará el número

– 

máximo de carácteres a introducir en ese campo.
size="" Seguido de un valor que limitará el numero de
carácteres a mostrar en pantalla.

–  value="" Indica que no hay valor inicial del campo.
–  name="" Indicará el nombre que se asigna a un determinado

campo.

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

7
 

http://www.w3schools.com/tags/tag_input.asp

Formularios
 

•  Controles:
 
 text
 inputs
 especiales
 
–  Estos tipos especiales son útiles para teléfonos móviles

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

8
 

Formularios
 

•  Controles,
 botones
 
 
– Se definen mediante la tag <input> a la que le acompañan los
atributos:
– type, Seguido de submit para enviar los datos del formulario y
seguido de reset para borrar los datos que se han introducido, o
button para ejecutar alguna acción.
– value, Indica el texto que incorporaran los botones.
Normalmente, enviar y borrar
– name, Para identificar al botón

<input type="button" value="Cerrar esta
ventana" onclick="window.close();">

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

9
 

http://www.w3schools.com/tags/tag_input.asp

Formularios
 

•  Controles,
 checkbox
 
– El campo se elegirá marcando de entre varias opciones una
casilla cuadrada. (Principal diferencia con radiobutton).
– Puede haber una opción seleccionada por defecto (checked)
– Se puede seleccionar más de una opción.
<INPUT TYPE="label" value="correcto">
<INPUT TYPE="checkbox" name="c1" value= "1" onClick="if(this.checked ==
true){alert('verdadero!'); this.checked=false;}">
<INPUT TYPE="label" value="falso">
<INPUT TYPE="checkbox" name="c2" value= "0" onClick="if(this.checked ==
true){alert('falso!'); this.checked=false;}">

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

10
 

http://www.w3schools.com/tags/tag_input.asp

Formularios
 

•  Controles,
 input
 especiales
 
–  Tipos especiales de inputs:
–  Password Indica que el campo a introducir será una palabra de paso.
–  hidden El visitante no puede modificar su valor ya que no está visible. Se
manda siempre junto al atributo value= seguido de su valor entre comillas.
–  Sus atributos son los mismos que para text.

Mostrará asteriscos en lugar de letras escritas.

<input type="password" name="clave" maxlength="5" size="6">

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

11
 

http://www.w3schools.com/tags/tag_input.asp

Formularios
 

•  Controles,
 radio
 
–  El campo se elegirá marcando de entre varias opciones una casilla
–  Sólo puede tener una casilla activa.

circular.

<input type="radio" name="g1" value="Leche"> Leche<br>
<input type="radio" name="g1" value="Mant"> Mantequilla<br>
<input type="radio" name="g1" value="Queso" check="checked"> Queso

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

12
 

http://www.w3schools.com/tags/tag_input.asp

Formularios
 

•  Controles,
 listas
 desplegables
 

– Las etiquetas <select>.....</select> encierran los valores que
podremos elegir a partir de una lista. Los atributos que
acompañan a la etiqueta de apertura son:
– name="" Indicará el nombre del campo de selección.
– Size="" Indicará el número de opciones visibles. Si le
asignamos 1, la selección se presentará como un menú
desplegable. Si le asignamos un valor mayor se presentará
como una lista con barra de desplazamiento.
– múltiple indica si se pueden realizar múltiples selecciones.

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

13
 

http://www.w3schools.com/tags/tag_select.asp

Formularios
 

•  Controles,
 listas
 desplegables
 

– Las diferentes opciones de la lista se indicarán mediante la
etiqueta <option>
– Puede acompañarse del atributo selected para indicar cual es
la opción que aparecerá por defecto.
– Si no lo especificamos, siempre será la primera de la lista

<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

14
 

2
 

Acceso
 desde
 JavaScript
 a
 los
 
objetos
 de
 los
 formularios
 

Localizar
 el
 objeto
 (u=lizando
 this)
 
•  Nombres
 en
 la
 creación
 del
 objeto:
 

<select
 name="nombre_var"
 
 


 OnChange="nombre_funcion(this)">
 

</select>
 

•  Obtener
 el
 objeto
 dentro
 de
 la
 función
 JavaScript:
 

func*on
 nombre_funcion(elem)
 
{
 

alert(elem.value);
 

}
 

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

16
 

Localizar
 el
 objeto
 (u=lizando
 getEelementById)
 
•  Nombres
 en
 la
 creación
 del
 objeto:
 

<select
 name="nombre_var"
 
 


 id="nombre_objeto"
 

 OnChange="nombre_funcion()">
 

</select>
 

•  Obtener
 el
 objeto
 dentro
 de
 la
 función
 JavaScript:
 

var
 elem;
 
elem=document.getElementById("nombre_objeto");
 

Departamento
 de
 Sistemas
 Informá=cos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 Aplicaciones
 Web
 
2011
 

17
 

Localiz
  • Links de descarga
http://lwp-l.com/pdf483

Comentarios de: 2 - Formularios y JavaScript (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad