UTEQ Mariela Ramrez Martnez

ITI15 DAW

Formularios en HTML Los formularios son una caracterstica del estndar HTML Que permite a los autores recolectar informacin provista por los visitantes. Estos formularios pueden resultar tiles para reunir informacin personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autor necesite. En este tutorial exploraremos todas las herramientas disponibles para construir formularios en HTML. Entrada textual Existen tres tipos de entrada textual que pueden recolectar informacin como nombres, comentarios, opiniones, etc. Entrada de lnea Este control recolecta informacin textual en una sola lnea, lo que significa que el usuario no podr utilizar la tecla "enter" para ir a la siguiente lnea (en la mayora de los formularios, la tecla "enter" presionada en uno de estos campos, enva el formulario que lo contiene). Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la pgina se carga, puede ser definido usando el atributo "value". El valos pasado al agente procesador ser el texto ingresado por el usiario, es decir, el contenido de la caja de texto.

Entradas de password Este control acta exactamente como el de entrada de lnea con la excepcin de que "esconde" los caracteres ingresados mostrndolos como puntos o asteriscos para evitar que los usuarios ven su contenido. Es definido utilizando el valor "pass" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comnmente usado para el ingreso de contraseas. Entrada de multi-lnea Este control permite a los usuarios ingresar texto en una o ms lneas. se inserta utilizando el tag HTML textarea y puede ser usado para recolectar reportes, comentarios, cartas, etc. En este tag, el contenido ser el texto inicial.

UTEQ Mariela Ramrez Martnez

ITI15 DAW

Botones radio Los botones radio trabajan de la misma forma que las casillas de verificacin con una pequea diferencia: los botones radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar ms de una a la vez. Esto significa que cuando un usuario elige una opcin, las dems son automticamente deseleccionadas. El valor inicial para el grupo depende del navegador (la mayoria muestra todos los controles sin marcar). Esto puede ser cambiado usando el atributo booleano "checked". Listas Estas listas pueden ser construdas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML option (opcin simple) y el elemento HTML optgroup (grupo de opciones). El ltimo elemento es el nico prescindible para construir este tipo de listas. Los controles de lista pueden ser usadas para recolectar informacin al igual que los botones radio (slo una opcin) o como casillas de verificacin (mltiples opciones), dependiendo de la presencia del atributo booleano "multiple". Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected". Botones Un botn es un dispositivo primordialmente diseado para realizar una accin con el formulario que lo contenga. De echo, existen dos tipos bsicos de botones: para enviar el formulario y para reestablecerlo (devuelve todos los campos a sus valores iniciales). Existe slo un tipo ms de botn que no posee una accin predefinida (la misma debe ser especificada con un lenguage del lado cliente).

Los botones pueden insertarse a travs del tag HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).

Botones de envo Este tipo de botones enva automticamente el formulario en que se encuentra cuando es presionado. Es insertado utilizando el tag HTML input con el valor "submit" en su atributo "type".

UTEQ Mariela Ramrez Martnez

ITI15 DAW

El elemento <input>

El elemento <input> tiene nuevos valores para el atributo type.

search: El elemento representa una caja de bsqueda. Los saltos de lnea son quitados del valor ingresado pero no se modifica ninguna otra sintaxis. tel: El elemento representa un control para editar un nmero de telfono, porque los nmeros telfonicos varan ampliamente en el mundo. Puedes usar atributos como pattern y maxlength para restringir los valores ingresados en la caja. url: El elemento representa un control para editar una URL. Se quitan los saltos de lnea y espacios en blanco antes y despus del valor ingresados. email: El elemento representa una direccin de correo electrnico. Los saltos de lnea se quitan automticamente del valor ingresado. Puede ingresarse una direccn de correo no vlida, pero el campo de ingreso slo funcionar si la direccin ingresada satisface la produccin ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext est definida en RFC 5322, seccin 3.2.3 y ldh-str est definida en RFC 1034, seccin 3.5.

Nota: si el atributo multiple est agregado, pueden ingresarse muchas direcciones de correo electrnico en ese campo <input>, como una lista separada por espacios, pero no est implementado actualmente en Firefox. El elemento <input> tambin tiene nuevos atributos:

list: El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como ayudas y sern mostrados como propuestas en el rea de sugerencias del campo input. pattern: Una expresin regular contra la que es verificado el valor del control, que puede ser usada con valores de type de text, tel, search, url y email. formmethod: Una cadena que indica qu mtodo HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se enva; sobrescribe el method del elemento <form>, si se define. El formmethod slo se aplica cuando el type es image o submit, y, para los mtodos PUT y DELETE, slo funcionar con un destino que est en el mismo dominio (poltica del mismo origen).

UTEQ Mariela Ramrez Martnez

ITI15 DAW

El elemento <form>

El elemento <form> tiene un nuevo atributo:

novalidate: Este atributo previene que el formulario sea validado antes del envo. El elemento <datalist>

El elemento <datalist> representa la lista de elementos <option> como sugerencias cuando se llena un campo <input>.

Puedes usar el atributo list en un elemento <input> para enlazar a un campo de ingreso especfico con un elemento <datalist> determinado.

<label>Superhroe favorito</label> <input list="superheroes" name="list" /> <datalist id="superheroes"> <option label="Iron Man" value="Iron Man"> <option label="The Hulk" value="The Hulk"> </datalist> El elemento <output>

El elemento <output> representa el resultado de un clculo.

Puedes usar el atributo for para especificar una relacin entre el elemento output y otros elementos en el documento que afectan el clculo (por ejemplo, ingreso de datos o parmetros). El valor del atributo for es una lista separada por espacios de IDs de otros elementos.

UTEQ Mariela Ramrez Martnez

ITI15 DAW

El atributo placeholder

El atributo placeholder en elementos <input> y <textarea> provee una ayuda a los usuarios acerca de qu debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener enters o saltos de lnea.

<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/> El atributo autofocus

El atributo autofocus te permite especificar que una parte del formulario debe tener foco para ingresar informacin cuando se carga la pgina, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Slo un elemento del formulario en un documento puede tener el atributo autofocus, que es de tipo boolean. Este atributo puede ser aplicado a los elementos <input>, <button>, <select> y <textarea>. La excepcin es que autofocus no puede ser aplicado a un elemento <input> si el atributo type hidden est seleccionado (esto quiere decir, no se puede enfocar automticamente un elemento escondido).

La propiedad label.control del DOM

La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <label> de HTML. La propiedad control devuelve el controlador etiquetado, es decir el controlador para quien est hecha la etiqueta, que est determinado por el atributo for (si est definido) o por el primer elemento controlador descendiente.

Validacin restringida

El HTML5 brinda sintaxis y elementos de API para posibilitar la validacin de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validacin del lado del servidor, que todava es necesaria por seguridad e integridad de la informacin, la

UTEQ Mariela Ramrez Martnez

ITI15 DAW

validacin del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la informacin ingresada.

Sintaxis de HTML para la validacin restringida

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.

El atributo required en los elementos <input>, <select> y <textarea> indica que se debe ingresar algn dato. (En el elemento <input>, required slo se aplica con ciertos valores del atributo type.) El atributo pattern en el elemento <input> restringe el valor para que concuerde con una expresin regular especfica. Los atributos min y max del elemento <input> restringen los valores mximos y mnimos que pueden ser ingresados. El atributo step del elemento <input> (cuando se usa en combinacin con los atributos min y max) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no ser validado. El atributo maxlength de los elementos <input> y <textarea> restringe el mximo nmero de caracteres (en puntos de cdigo unicode) que el usuario puede ingresar. Los valores url y email para type restringen el valor para una URL o direccin de correo vlida respectivamente. Adems, puedes prevenir la validacin restringida especificando el atributo novalidate en el elemento <form>, o el atributo formnovalidate en el elemento <button> y en el elemento <input> (cuando type es submit o image). Estos atributos indican que el formulario no ser validado cuando se envie.

API de validacin restringida

Las siguientes propiedades y mtodos del DOM relacionadas con la validacin restringida estn disponibles para scripts del lado del cliente:

UTEQ Mariela Ramrez Martnez

ITI15 DAW

En objetos HTMLFormElement, el mtodo checkValidity(), que devuelve verdadero si todos los elementos asociados del formulario que necesitan validacin satisfacen las restricciones y falso si no lo hacen. En elementos asociados al formulario: la propiedad willValidate, que es falso si el elemento no satisface las restricciones. la propiedad validity, que es un objeto ValidityState que representa los estados de validacin en que est el elemento (p.e., condiciones de restriccin que han fallado o exitosas). la propiedad validationMessage, que es un mensaje que contiene todas las fallas en las restricciones que pertenecen a ese elemento. el mtodo checkValidity(), que devuelve falso si el elemento falla en satisfacer alguna de las restricciones o verdadero si pasa lo contrario. el mtodo setCustomValidity(), que establece un mensaje de validacin personalizado, permitiendo imponer y validad restricciones ms all de las que estn predefinidas. Marcado semntico y diseo de pgina Hay una gran historia acerca de una universidad que, cuando construy sus campus, no creo un solo sendero para caminar. Simplemente sembraron reas de csped y esperaron.

Un ao ms tarde, el pasto se desgast en donde la gente caminaba ms frecuentemente. As que es en donde la universidad construy las aceras.

Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba. Los nuevos elementos semnticos del HTML5 se basaron en exactamente esa misma lgica (vase el W3C gua de diseo para "Pave the Cowpaths"). Los elementos semnticos describen su significado o propsito claramente al navegador y al desarrollador. Comprese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una divisin o una seccin de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno. < div >

UTEQ Mariela Ramrez Martnez

ITI15 DAW

Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>. Esto da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propsito de ese marcado. < div id ="header"> En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del elemento a ambos desarrolladores y navegadores. < header > El W3C obtuvo datos de miles de millones de pginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descart div1, div2, etc. , tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas. Aqu estn algunos de los nuevos elementos semnticos en HTML5: article aside figcaption figure footer header hgroup mark nav section time Debido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos elementos hacen.