UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

Utilización de formularios desde código

eugeniaperez.es

ut 2: lenguajes de scripting

 

eugeniaperez.es

Estructura de un formulario

  • Descarga de Bitbucket los proyectos:
    • DW.UT2.GET
    • https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut2.get.git
    •  
    • DW.UT2.POST
    • https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut2.post.git
    •  
  •  
  •  

UT 2: lenguajes de scripting

Estructura de un formulario

La etiqueta principal es <form> </form> que engloba el comienzo y el final del formulario.

Necesita inicializar dos atributos para que el formulario sea funcional:

  • action
  • method

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

El primer atributo es action.  Este atributo contiene la URL donde se redirigirán los datos del formulario o bien la dirección a la cual se enviará por correo electrónico:

 

eugeniaperez.es

<form action=”mailto:direcciondelcorreo@correo.com” method=”post” enctype=”text/plain”>
</form>


<form action=”book.php” method=”get”>
</form>

UT 2: lenguajes de scripting

Estructura de un formulario

  • El segundo es method. Indica el método por el cual el formulario envía los datos.
  • Sus opciones son POST o GET: 
    • POST: los datos viajan ocultos. Sirve para enviar información al servidor (insert, update, etc).
    • GET (es el valor por defecto): los datos viajan directamente por la URL. Sirve para solicitar información (lectura, solicitar un recurso, etc)

 

eugeniaperez.es

ut 2: lenguajes de scripting

 

eugeniaperez.es

Estructura de un formulario

  • Cuando se tiene un formulario con campos, lo normal es utilizar POST.
  •  

ut 2: lenguajes de scripting

 

eugeniaperez.es

Estructura de un formulario

  • Por GET los parámetros viajan en la URL de la siguiente manera:
  •  
  • or 
http://www.mydomain.com?nombre1=valor1&nombre2=valor2
showClient.php?id=1&active=true

UT 2: lenguajes de scripting

Estructura de un formulario

  • Enctype: que define el tipo de codificación que empleamos para enviar el formulario al servidor, se suele indicar cuando el formulario permite enviar archivos adjuntos (POST).
    • application/x-www-form-urlencodedDefault. 
    • multipart/form-data ( file upload control)
    • text/plain (spaces are converted to “+” symbols, but no special characters are encoded).

 

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

Métodos del objeto FORM

  • MiFormulario.submit() Envía el formulario
  • MiFormulario.reset() Resetea los campos de formulario

 

eugeniaperez.es

<form ...>
    ...
    <input type="submit" name="book" value="Reservar"/>
    <input type="reset" name="reset" value="Limpiar"/>
</form>

UT 2: lenguajes de scripting

Estructura de un formulario

Elementos de formulario HTML5

  • color
  • date, time, datetime, datetime-local
  • email, tel, url
  • month, 
  • week
  • number
  • range
  • search

 

eugeniaperez.es

Especificación de controles:

UT 2: lenguajes de scripting

Estructura de un formulario

Atributos para elementos de formulario HTML5

  • autocomplete, autofocus
  • height and width
  • min and max -> date
  • minlength and maxlength -> text
  • multiple (upload field)
  • pattern (regexp)
  • placeholder
  • required

 

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

Características de formulario HTML5

  • novalidatelas inhabilita
  • autocomplete: a on (por defecto) o a off. Permite el autocompletado.

 

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

  • POST vs. GET: 
    • POST: los datos viajan ocultos. Sirve para enviar información al servidor (insert, update, etc).
    • GET (es el valor por defecto): los datos viajan directamente por la URL. Sirve para solicitar información (lectura, solicitar un recurso, etc). Pueden ser cacheadas en el navegador, indexadas por buscadores, etc.

 

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

Proyecto GET

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

Estructura de un formulario

Proyecto POST

 

 

eugeniaperez.es

ut 2: lenguajes de scripting

 

eugeniaperez.es

Estructura de un formulario

  • Algunos aspectos que nos hemos saltado...
    • ​Pero que están documentados...
    • Jasmine -> pruebas unitarias en JS (Pág. 60)
    • Expresiones regulares en JS (Pág. 76)
    • AJAX con JS (Pág. 79)
    •  
    •  
  •  

UT2.B Formularios

By eugenia_perez

UT2.B Formularios

  • 590
Loading comments...

More from eugenia_perez