HTML + CCS

Programación WEB

Formularios web en HTML5
Magdalena Cantabella Sabater

Curso 2012/2013
Tema 4, Programación Web
Email- mmcantabella@ucam.edu
1
Universidad Católica San Antonio de Murcia -Tlf: (+34) 968 27 88 00 info@ucam.edu - www.ucam.edu

Formularios web
»Permiten insertar datos, tomar decisiones, comunicar información y cambiar el
comportamiento de una aplicación.
»En HTML5añaden capacidad
de procesamiento a tiempo real a los
navegadores y de forma estandarizada.

Tema 4, Programación Web

2

Contenido
»Nuevos tipos de entrada.
»Nuevos atributos.
»Nuevoselementos para formularios.

Tema 4, Programación Web

3

Tipos de entrada
»Destacamos

Tema 4, Programación Web

4

Tipo email
»El navegador comprueba automáticamente que el texto es unemail válido.
» Si la validación falla no será enviado.
< input type=“email” name= “miemail” id=“miemaill”>

Tipo search
»Al detectar este tipo el navegador cambia el diseño del elemento para talpropósito.

» No controla la entrada.
< input type=“search” name= “busqueda” id=“busqueda”>

Tema 4, Programación Web

5

Tipo url
»Funciona igual que email pero para validar direccionesweb.
» Si la validación falla no será enviado.
< input type=“url” name= “miurl” id=“miurl”>

Tipo tel
»Campo para números telefónicos.
» No requiere sintaxis, pero adapta el campo según eldispositivo.
< input type=“tel” name= “telefono” id=“telefono”>

Tipo color
»Provee una interfaz para seleccionar colores.
» El valor esperado es un valor en hexadecimal #00FF00.

< input type=“color”name= “micolor” id=“micolor”>
Tema 4, Programación Web

6

Tipo number
»Sólo es válido si recibe una entrada numérica.
» min= mínimo valor aceptado para el campo.
» max= máximo valoraceptado para el campo.
» step= valor incrementado o disminuido en cada paso.
< input type=“number” name= “numero” id=“numero” min=“0” max=“10”
step=“5”>

Tipo range
»Permite al usuario seleccionar...