UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

Utilización de formularios desde código

eugeniaperez.es

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

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

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

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

• novalidate: las 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