Introduccin al Desarrollo

Web: HTML y CSS

Parte I
HTML5: Ejemplo de formulario

Hola a todos. Mi nombreesMarMartnez,soyexpertaenE-learningyestndaresweb,ytrabajo

en la Ocina para la Armonizacin del Mercado Interior.

En el siguiente vdeo vamos a ver un ejemplo de un formulario en HTML5.

Antes de comenzar, deciros que podis contactar conmigo en la direccin de correo:

mmar.martinez.carrascosa@gmail.com

Adems mi cuenta de twitter relacionada con el tema es @Mar_Martinez_C

Como ya hemos analizado en lo que llevamos de curso, una de las caractersticas ms

importantes que nos trae el nuevo estndarHTML5sonlosnuevoselementosdisponiblespara
el manejo de formularios, ya que nos permite gestionarlos de manera nativa, y por tanto se
puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del
cliente.

Estofacilitamuchoeltrabajodeldesarrollador,porquenosetienequepreocuparporproblemas
decompatibilidadentredistintosnavegadores; ademssuponeunahorrodetiempoydeancho
de banda, ya que, por un lado, permite que el formulario NO sea enviado si no es vlido, y por
otro lado, permite informar al usuario de que alguno de los valores introducidos no cumplelos
requisitos denidos.

En este vdeo vamos a ver un ejemplo de un formulario en HTML5, y para ello vamos a usarla
aplicacin Notepad++ para la edicin del cdigo, y el navegador Google Chrome para ver los
resultados.

Para poder comprenderyaprovecharalmximolainformacinquevamosaveracontinuacin,

deberas haber visto previamente los vdeos: HTML5: Nuevas funcionalidades en formularios,
parte 1 y parte 2.

En primer lugar vamos a analizar cmo debe ser la estructura bsica de nuestro chero HTML5:

LoprimeroquedebemoscolocarsiempreesladeclaracindeDOCTYPE.Debeestarantesdela
etiqueta html.

A continuacin debemos tener este elemento raz: html. Este elemento contiene el documento
completo y nicamente el DOCTYPE est fuera de l. Debe contener dos elementos: head y
body.

Con lang indicamos el idioma base de los valores de los atributos y del texto del contenido.
Esta informacin puede ser utilizada por un agente de usuario de diferentes formas para
controlar la presentacin de la pgina. En este caso hemos asignado el espaol.

La etiqueta head es el contenedor de todos los elementos de cabecera. Debeincluirunttulo

para el documento, y puede contener scripts, estilos, meta informacin, etc.

"charset" UTF-8 sirve para especicar la codicacindecaracteresdemarcadodeldocumento.

Esto ya os sonar porque lo habis visto endetalleenotrosvdeosdelcurso,asquenovamos
a explicarlo en este.

La etiqueta title es obligatoria en todos los documentos HTML y dene el ttulo del
documento. Lo que signica que:

Dene el ttulo para la barra del navegador.

Proporciona un ttulo para la pgina cuando sta se aade a favoritos.

Y muestra un ttulo para la pgina en los resultados de los motores de bsqueda.

La etiqueta body indica que se trata de la seccin principal del documento. Est siempre
denida despus de la etiqueta de cierre del elemento head y antes de laetiquetadecierredel
elemento html.

El elemento h1 dene un encabezado de nivel 1. Como ya sabis, existen 6 niveles de

encabezado, y nos ayudan a organizar la informacin de un documento. En este caso lo
usamos para denir un texto como un titular, ms grande y destacado que cualquier otro texto.
La etiqueta p dene un prrafo, por lo que los navegadores aadirn un margen antes y
despus de este elemento. En este caso hemos escrito un prrafo descriptivo sobre el
contenido de la pgina que vamos a crear.

La etiqueta form se usa para crear formularios de entrada de datos en HTML. Este elemento
puede contener uno o ms de los siguientes elementos:

<input>,
<textarea>,
<button>,
<select>,
<option>,
<optgroup>,
<eldset>,
<datalist>,
<output>,
<label>.

Finalmente, tenemos un tipo de input submit para denir un botn que nos permita enviar el
formulario.

A continuacin podemos ver el resultado del cdigo escrito hasta el momentoenelnavegador

google Chrome.

Como podis observar, en la barrasuperiordelnavegadortenemoselttuloquehemosdenido

para la pgina.

Despus podemos ver un encabezado de tipo "h1", con un tamao grande y destacado.

Y debajo de l tenemos un prrafo con un texto descriptivo en un tamao de texto estndar.

Por ltimo, podemos ver el botn que hemos denido para enviar el formulario que vamos a
crear a continuacin.

A continuacin vamos a ir aadiendo elementos al formulario, usando los input type y los
nuevos atributos de contenido vistos en los videotutoriales, y vamos a ir viendo cmo se
comportan en el navegador google Chrome:

En primer lugar vamos a aadir un elemento input de tipo text, que contiene los siguientes
componentes:

Una etiqueta label: que como ya sabis a estas alturas del curso, dene una etiqueta para un
elemento input. Cabe destacar que cuando esta etiqueta recibe elfoco,automticamenteselo
cede al control asociado. Existen dos tipos de asociacin de lasetiquetasconloscontrolesde
formulario: asociacin implcita y asociacin explcita.

En la asociacin implcita, la etiqueta debe estar colocadainmediatamenteantesodespusde

su control enlamismalnea(oencimadelcontrolsilalneaesdiferente)oelcontroldebeestar
dentro de la etiqueta.

En la asociacin explcita, la asociacin se realiza identicando cada control con unatributoid

nico y asocindolo a travs del atributo for de la etiqueta "label" correspondiente.

Las normas de accesibilidad WCAG 2.0 recomiendan usar la asociacin explcita ya que
algunas tecnologas asistivas no manejan correctamente las etiquetas implcitas.

En este caso, la usamos de forma explcita, aunque ms adelante, veremos cmo usarla de
forma implcita tambin.

Adems tenemosunatributoplaceholderparamostraruntextopordefectodentrodelcampo.
En este caso es un ejemplo de un nombre y un apellido.

Tenemos tambin un atributo autofocus para que sea el campo que recibe el foco
automticamente cuando se carga la pgina.

Despus tenemos un atributo autocomplete para que se pueda seleccionar un valor

introducido en este campo con anterioridad.

Y por ltimo tenemos un atributo required, para denir este campo como obligatorio. Sinolo
rellenamos, el sistema nos avisa de que es un campo de entrada requerido.

Ahora vamos a pasar a ver cul sera el resultado de este cdigo en el navegador google
Chrome.

Como podis observar, nos ha aparecido un nuevo campo de input tipo "text", que cuando
cargamos la pgina, recibe el foco automticamente gracias al atributo "autofocus". Adems,
tenemos un texto mostrado por defecto que hemos denido mediante el atributo "placeholder".
Si intentamos escribir vemos que aparece el autocompletado con otros textos que hemos
introducido en este campo anteriormente. Y adems, si intentamos enviar el formulario sin
haber escrito nada dentro del campo, el sistema nos avisa de que este campo es obligatorio
rellenarlo.

A continuacin, vamos a aadir un elemento input de tipo password (contrasea) que

contiene los siguientes atributos:

un atributo pattern para denir la estructura de la contrasea enbaseaunaexpresinregular

denida,

un atributo placeholder para mostrar un texto por defecto dentro del campo. En este casoes
un ejemplo de unacontraseavlidasegnlaexpresinregulardenida,loquepuedeayudaral
usuario a entender que formato es el correcto para este campo de contrasea.

Y por ltimo tenemos un atributo de tipo required, para denir este campo como obligatorio.

Como podemos observar, ahora tenemos un nuevo campo en nuestro formulario: el campo
Contrasea, de tipo password. Tiene un texto por defecto que hemos denido con el atributo
placeholder. Adems, con elatributorequiredhemosdenidoestecampocomoobligatorio,por
lo que el sistema nos avisa si intentamos enviar el formulario sin haber rellenado este campo.
Como veis, el sistema nos est diciendo que debemos completarestecampo.Aestecampole
habamos denido, conelatributopattern,unaexpresinregular,porloqueelsistemanosdebe
avisar si escribimos un texto que no cumple con dicha expresin regular. Vamos a probar a
introducir un montn de letras para ver si el sistema nos avisa de que es incorrecto.

Efectivamente, el sistema nos avisa de que el formato no coincide con el denido en este
campo. As que vamos a cambiarlo por uno correcto, por ejemplo jjj9999, y si tratamos de
enviar el formulario ahora mismo,efectivamenteelsistemanosdejaenviarelformularioyaque
no contiene ningn error.

A continuacin vamosaaadirtrestiposnuevosdeinput:unodetipotel,unodetipoemaily
otro de tipo url, los tres con texto o un nmero denido como ejemplo para que el usuario
sepa lo que debe introducir en este campo.

Como podemos observar en el navegador, tenemos estos nuevos campos, en el caso del
campo telfono, como no hemos denido una expresin regular con pattern, nos va a dejar
introducir cualquier valor, y nos va a permitir enviar el formulariosindarnosningnmensajede
error.

En el campo de email, sin embargo, la cosa cambia, porque si introducimos una direccin de
correo no vlida, el sistema nos advierte de que la direccin de correo electrnico no es
correcta.

Para el caso de la pgina web ocurre lo mismo que con email. Si intentamos escribir una
direccin que no es correcta, el sistema nos advierte de que ladireccinurlnoescorrecta.Sin
embargo, si ponemos una direccin web correcta, el sistema nos permite enviar el formulario.
A continuacin vamos a aadir dos tipos de input ms: un tipo number y el otro es un tipo
date. El tipo number tiene los siguientes atributos:

min y max para jar los valores mnimo y mximorespectivamentepermitidosenelcampo(en

este caso el mnimo sera 2 y el mximo 14).

Adems tenemos el atributo placeholder paradenirunnmeropordefectoqueapareceren

el campo automticamente.

Finalmentepodemosverquetenemosunatributostep,quecomoyahabamosvistoenvdeos
anteriores, sirve para especicar los intervalos de valores vlidos para el campo. En este
ejemplo vale 2, y como su valor mnimoes2,susvaloresvlidosparaestecamposern:2,4,6,
8, 10, 12 y 14.

El siguiente tipo de input que hemosdenidoesuntipodeinputdate,conelatributominpara

jar una fecha mnima por defecto.

Como podemos observar ahora tenemos estos dos nuevos campos, el n de temas que era el
tipo number, y la fecha de envo que era el tipo date. En el caso del n de temas, tenemos un
valor denidopordefectode2,medianteelatributoplaceholder.Ademstenemosunmximoy
un mnimo por lo tanto no me deja disminuir la cifra por debajo de 2. El atributo mximo me
obligaba a tener un mximo permitido de 14, yademsconsteppodemoscomprobarquesolo
nos deja movernos en cifras de dos en dos, en este caso, cifras pares.

En cuanto al campo de fecha de envo, si lo pulsamos podemos ver un calendario en el que

podemos seleccionar una fecha, y quecontieneunafechamnimade16dejuliode2012,porlo
tanto, antes del 16 de julio nonosdejaseleccionarningunafecha.Estoloconseguamosconel
atributo min dentro del tipo date.

A continuacin vamos a aadir tres campos ms a nuestro formulario: el tipo color, el tipo
search y un tipo range. El tipo color contiene un atributo value, que nos permite
especicar el valor por defecto. Su tipo de valor diere segneltipodeinput,porejemplo,para
color especicaelcdigohexadecimaldelcolorpordefecto,peroporejemplocomopodemos
ver en el tipo submit del botn enviar, lo que dene en ese caso es el texto del botn.

En el caso del tipo de input search, lo que nos encontramos es un campo de bsqueda.

Y por ltimo hemos aadido un input de tipo range, que es un tipo de campo con un rango
especco de valores, delimitado en este caso por los valores 1 de mnimo y 10 de mximo.

Como podemos observar, ahoratenemosestostresnuevoscamposennuestroformulario.Uno

es el de color, que cuando lo pulsamos, nos permite seleccionar un color desde una paleta de
colores, y al que habamos puesto un color azul por defecto con su cdigo hexadecimal y el
atributo value.

En cuanto al campo de bsqueda, cuando nos colocamos en el campo y comenzamos a

escribir, podemos ver que aparece el aspa, para borrar lo escrito hasta el momento.

Y en cuanto al tipo de input range,podemosverquenospermiteseleccionarunvalordentrode

un rango de 1 a 10.

A continuacin vamos a aadir una agrupacin de campos de tipo radio, lo que signica que
solo 1 valor del grupo podr ser seleccionado al mismo tiempo. Tenemos un grupo de tres.

La etiqueta eldset se usa para agrupar elementos relacionadosentres,dentrodeunmismo

formulario. Esta etiqueta dibuja una caja alrededor de todos los elementos agrupados.

Conlaetiquetalegenddenimosunttulooleyendaparaunconjuntodeelementosagrupados
mediante un eldset.

En este caso, la etiqueta label la estamos usando de manera implcita.Noesincorrecto,pero

recuerda que lo recomendado es usar la asociacin explcita.

Cada opcin tiene un texto diferente denido mediante el atributo value.

Y por ltimo, el atributo checked nos permite especicar qu elemento debe estar
preseleccionado cuando la pgina se carga. Se usa en tipos de input checkbox o radio. En
este grupo, podemos ver que el atributo checked est en la primera opcin, deniendo por
tanto que esta opcin debe estar seleccionada cuando se carga la pgina.

Como podemos observar, ahora tenemos el nuevo campo o agrupacin de campos, en el que
tenemos tres opciones para seleccionar una prioridad. Este tipo de campo est enmarcado
gracias a la etiqueta eldset, y adems debido a que son de tipo radio solo podremos
seleccionar una opcin cada vez.

A continuacin vamos a aadir una agrupacin de camposdetipocheckbox,queadiferencia

de los de tipo radio, permite que ms de una opcin sea seleccionada al mismo tiempo.
Actan individualmente como conmutadores.

Como en el caso de radio, se ha usado la etiqueta eldset para agrupar los elementos y la
etiqueta legend para dar un ttulo a esta agrupacin. Adems se ha usado la etiqueta label
de forma implcita. Cada opcin tiene un texto diferente denido mediante elatributovalue,y
el atributo checked se ha colocado en la primera opcin para que sea esta la que est
seleccionada por defecto.

Como podemos observar ahora en el navegador, ha aparecido una nueva agrupacin de

campos de tipo checkbox, que nos permite realizar una seleccin de cada unadelasopciones
individualmente, pudiendo haber ms de una opcin seleccionada al mismo tiempo. Adems
mediante la etiqueta eldset se muestra un marco alrededor de la agrupacin de campos.

Con esto, hemos terminado de realizar nuestro formulario en HTML5.

Vamos a recordar un poco todo lo visto en el vdeo.

Hemos visto un campo de tipo text, en el que tenamos un"placeholder"conelquedenamos

un texto por defecto, que tena adems un "autofocus" y un "autocomplete".

Despus hemos visto una contrasea que tena denida una expresin regular gracias al
atributo "pattern", y adems tena un texto por defecto para ayudar al usuario a saber cmo
debe ser el formato que debe poner en el campo de contrasea.

Adems tenamos un telfono, un email y una pgina web, cada uno con un texto por defecto.

Despus tenamos un elemento de tipo "number", que nos permita incrementar odecrementar
el valor hasta un mximo y dentro de un valor mnimo, y mediante saltos de dos en dos.

Adems tenamos un campo date, que nos permita seleccionar una fecha a partir del 16 de
julio de 2012.

Tambin tenamos un control de tipo color, que nos permite seleccionar desde una paleta de
colores, un color determinado, el que queramos.

Adems tenamos un campo de tipo bsqueda, que, dependiendo del navegador que estemos
usando, nos mostrar el aspa para eliminar el texto cuando ya hemos escrito algo onadams
poner el foco dentro del campo.

Despus tenamos un input de tipo "range" que nos permite denir un rango de valores dentro
de un mnimo y un mximo (1 y 10), y luegotenamosunaagrupacindecamposdetiporadio,
que solo permite seleccionar una opcin de cada grupo, y una agrupacin de campos de tipo
checkbox, que nos permite seleccionar ms de una opcin al mismo tiempo.

Y hasta aqu el videotutorial Ejemplo de formulario en HTML5.

Espero que toda esta informacin te sea muy til. Muchas gracias por tu atencin y hasta
pronto.

AVISO IMPORTANTE
Este documento, su texto y grcos e imgenes, puede ser utilizado bajo una licencia Creative Commons de tipo
Atribucin, No-Comercial. En caso de utilizarse este material o de la creacin de un derivado, la atribucin se debe
respetar citandolafuentecomoActvate,GoogleEspaayexpresamente,siesposible,medianteunenlaceactivoa
http://google.es/activate.