html5 Formularios

FORMULARIOS
Contenido
INTRODUCCIÓN .............................................................................................................. 1
CONTROLES INPUT DE VERSIONES ANTERIORES A HTML5 ........................... 2
NUEVOS CONTROLES INPUT DE HTML5 3/12 ........................................................ 5
FORMULARIO. NUEVOS ATRIBUTOS ..................................................................... 12
VALIDAR FORMULARIOS .......................................................................................... 16
PRÁCTICA ....................................................................................................................... 18
INTRODUCCIÓN
Los formularios están compuestos por controles que solicitan datos al usuario. Los
formularios son de uso común, por ejemplo, al realizar una compra en una tienda on-line, al
solicitar una cuenta de correo o al darnos de alta en una red social debemos introducir
información en distintos campos de formularios.
Un formulario HTML es una sección de un documento Web limitada por las etiquetas
<form>….<form/> que contiene texto, código, controles (casillas de verificación,
desplegables, botones de opción, etc.), y etiquetas (texto que acompaña a los controles).
Además, los formulario siempre poseen un botón para enviar la información introducida a
un servidor con el fin de procesar los datos.
Las características del envío del formulario se indican en los atributos method y
action de la etiqueta form.
Formularios HMTL5 Página 1

Las características de method y action (a continuación) pueden ponerse como
ventanas emergentes en el párrafo anterior (son características de HTML de versiones
anteriores pero me parecen suficientemente importantes como para reseñarlas)
 method: Especifica como se envía los datos del formulario, puede contener los
valores get o post. El método get es el valor por defecto y determina que la
información será enviada como una cadena de texto anexa a la dirección Web
de destino. Si se utiliza el método post los datos se envían al servidor como
parte del cuerpo de la petición.
 action: Este atributo indica el destino de la información del formulario. Si los
datos se van a enviar a una dirección de correo electrónica, el valor debe ser
mailto:dirección@dominio, en cambio, si la información va a ser tratada por un
programa se debe indicar la URL1 del mismo.
Formulario enviado por correo a la dirección minombre@dominio
<form method=”post” action="mailto:minombre@dominio">
Formulario enviado con la URL destino para ser tratado por el programa script.cgi
<form method=”get” action="http://www.dominio/cgi-bin/script.cgi">
HTML5 amplía el número de controles, muchos relacionados con fechas y horas,
también hay nuevos elementos de formulario como barras de tiempo, control de selección
de colores, etc. Con la nueva versión de HTML se han enriquecido las características de los
formularios para realizar operaciones que antes solo podían implementarse utilizando
JavaScript. HTML5 incorpora nuevos tipos de datos, restricciones, expresiones regulares,
atributos (autofocus, solo lectura, placeholder), control de autocompletado, validaciones
automáticas, eventos (valid,invalid), pseudoclases CSS (input:invalid, input:valid), etc.
 Los ejemplos que se muestran en este tema están adaptados para verse en Opera
(a no ser que se especifique otra cosa), pues este es el primer navegador que incorpora la
mayor parte de todas las operaciones que tienen que ver con los formularios en HTML5.
CONTROLES INPUT DE VERSIONES ANTERIORES A HTML5

Uno de los controles de uso más habitual son aquellos que se crean con la etiqueta
input que se utilizan para mostrar campos de formulario que permiten a los usuarios
introducir datos de distintos tipos. El comportamiento de la etiqueta input se puede
modificar asignando distintos valores al atributo type.
<body>
<form>
…..
<input type=”tipodecontrol”…. otros atributos….>
1
Uniform Resource Locator. Es la cadena de caracteres que representa una dirección única utilizada
para localizar los recursos en Internet. La primera parte de una URL indica el protocolo a utilizar (http:\\ o
ftp:\\), la segunda parte indica la dirección IP o nombre de dominio donde se localiza el recurso. Por ejemplo:
http://es.wikipedia.org

…..
</form>
Los valores del atributo type creados en versiones anteriores a HTML5 y que están
vigentes todavía son los siguiente:
 button: crea un botón ordinario que no tiene ninguna función preestablecida.
 checkbox: define controles que representan casillas de verificación.
 file: este tipo de control permite a los usuarios elegir un fichero para enviar.
 hidden: define un control que permite introducir valores que no se mostrarán en

el formulario pero sí serán enviados con él.
 image: crea un botón de tipo submit (de envio) con una imagen.
 password: el control resultante se utiliza para introducir contraseñas, se

caracteriza porque oculta al usuario los caracteres que se introducen.
 radio: define un control del tipo botón de opción, en el caso de definir varios
controles de este tipo con el mismo valor del atributo name, sólo uno de ellos
podrá ser elegido de cada vez.
 reset: crea un botón que borra todos los campos del formulario.
 submit: crea un botón de envío de formulario.
 text: define un control que se utiliza para introducir texto genérico.
Los controles que funcionan como un botón tienen habitualmente un detector de

eventos (onclick) y una llamada a una función JavaScript, por ejemplo,
<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8">
<title>Ejemplo de botón/función JavaScript</title>
<script >
//Función JavaScript llamada desde el controlador de eventos
//del control <input type="button">
function hacerResumen(datos){
var cadena="";
cadena=datos.nombre.value.toUpperCase()+"
"+datos.apellido.value.toUpperCase();
if (datos.migrupo[0].checked)
cadena+=" es hombre"
else
if (datos.migrupo[1].checked)
cadena+=" es mujer";
datos.resultado.value= cadena;
}
</script>
</head>
<body>

<form name="datos" method="get" action="tratarinfo.asp">
Nombre: <input type="text" size="10" name="nombre">
Apellidos: <input type="text" size="10" name="apellido"><p/>
Hombre <input name="migrupo" type="radio" value="hombre">
Mujer <input name="migrupo" type="radio" value="mujer"><p/>

<input type="button" name="bresult" value="Resumen"
onclick="hacerResumen(this.form)">
<input type="text" size="20" name="resultado">
</form>
</body>
</html>
 Todas la etiquetas de formulario pueden contener dos atributos id y name. El

valor del atributo id debe ser único en el documento Web y se utiliza para identificar al
mismo desde JavaScript o CSS. El valor del atributo name identifica cada uno de los
campos al enviar el formulario y puede repetirse en un documento Web, por ejemplo, para
indicar que varios botones de opción forman parte del mismo grupo y son excluyentes.
<input name="migrupo" type="radio" value="hombre" checked>

<input name="migrupo" type="radio" value="mujer">

Crea un formulario que muestre un formulario similar al siguiente
NUEVOS CONTROLES INPUT DE HTML5

HTML5 aporta nuevos controles input que dotan a la Web de funcionalidades y
elementos gráficos de apoyo. A continuación se explican de forma detallada los controles
input estandarizados por HTML5.
 <input type=”search”>. Este control tiene un funcionamiento similar al
type=”text” con las únicas diferencias de que no permite saltos de línea y que
indica que será utilizado para una operación de búsqueda. Puede contener el
atributo value cuyo valor será el que se muestra por defecto. Este campo viene a
apoyar a HTML5 en el camino hacia la Web semántica.
<form>
<label for=”busc”>Introduce la palabra a buscar</label>
<input type=”search” name=”tipo” id=”busc” value=”supercalifragilistico”/>
</form>
 <input type=”number”>. Permite la introducción de valores numéricos e

incluye dos botones para facilitar esta operación . Representa un valor
numérico que puede ser un número entero positivo, un número negativo (si
empieza con un guión -), un número con decimales (si se le indica un punto .) o
un número en notación científica (con la letra e, seguida de un símbolo positivo
+ o negativo – y la cantidad exponencial). Un ejemplo de un número con
notación científica sería: -12345.678e+90 que equivale a -12345.678 x 109. Se
pueden añadir atributos para determinar el valor mínimo (min), el valor máximo
(max), el valor de salto (step) y el valor por defecto (value). Para comprobar su
funcionamiento probar el código siguiente en un navegador.

<form>
<label for=”donacion”>Introduce tu aportación: </label>
<input type=”number” id=”donacion” min=”100” max=”1000000” step=”100”
value=”1000”/>
</form>
 <input type=”range”>. Muestra una barra que se puede utilizar para

seleccionar un número entre dos valores predeterminados que evoluciona a
intervalos regulares. Admite el uso de los atributos min (valor mínimo), max
(valor máximo), step (valor de salto) y value (valor inicial).
<form>
<label for=”distancia”>Introduce la distancia recorrida: </label>
<input type=”range” id=”distancia” min=”0” max=”10” value=”0”/>
</form>
 <output>. Este control se puede utilizar en combinación con <input

type=”range”> para conocer el valor seleccionado en la barra en cada
momento. Para ello se tiene que utilizar el detector de eventos onformchange y
asignarle el valor de un control identificado por su id (por ejemplo el id del
type=”range”). El valor de un control está contenido en su propiedad value.
Para comprender su funcionamiento se muestra el siguiente ejemplo:
<form>
<label for=”distancia”>Introduce la distancia recorrida: </label>
<input type=”range” id=”distancia” min=”0” max=”10” value=”0” step=”2”/>
<output onformchange=”value = distancia.value+ „ km‟”>0 km</output>
</form>
 <input type=”color”>. Este elemento representa un color. Utiliza la notación

RGB #A0F59E pero también permite seleccionar colores con el ratón. Podemos
ver su funcionamiento en el siguiente ejemplo:
<form>
<label for=”hcolor”>Selecciona un color: </label>
<input type=”color” id=”hcolor”/>
</form>

 <input type=”tel”>. Este nuevo control representa un campo de texto que
indica un número de teléfono. No tiene ningún formato en particular, por lo que
se pueden incluir espacios o guiones.
<form>
<label for=”telefono”>Introduce tu número de teléfono: </label>
<input type=”tel” id=”telefono”/>
</form>
 <input type=”url”> Este control se corresponde con un campo de texto en el

que se pueden incluir direcciones URL absolutas. Si no se ha introducido los
datos del protocolo http:// en el comienzo de la dirección, este se añade
automáticamente al perder el foco.
<form>
<label for=” hurl “> Introduce una dirección Web:</label>
<input type=”url” name=”hurl” >
</form>
 <input type=”email”>. El atributo type=”email” permite crear un control

específico para la introducción de direcciones e-mail aportando un elemento
más al concepto de Web semántica. Si se introduce un email con formato
incorrecto se muestra un mensaje de aviso al pulsar el botón submit (Enviar).
<form name=”miForm”>
Introduce una dirección de correo electrónico
<input type=”email” name=”hcorreo”>
<input type=”submit” value =”Enviar”/>
</form>

Utilizando los nuevos controles de formulario HTML5, crear un formulario para
hacer una encuesta en la que se solicitan los siguientes datos:
 Teléfono
 Dirección de correo electrónico
 Número de hijos
 Años trabajados
 Años de estudios
 Página Web del periódico más leído
 Color preferido
 Botón de envío
Entre los nuevos controles de formulario de HTML5 se encuentran aquellos que

permiten introducir datos de tipo fecha/hora.
Mediante la etiqueta input se pueden definir controles para introducir una fecha, un
mes, una semana, un día, una hora, etc. Para ello podemos utilizar los siguientes controles:
 <input type=”date”>. Permite seleccionar una fecha con formato de
“día/mes/año”.
 <input type=”month”>. Permite seleccionar un mes y año.

 <input type=”week”>. Permite seleccionar semana y año.
 <input type=”time”>. Permite seleccionar un dato con el formato

hora:minutos. Los datos se pueden introducir directamente en el control o
utilizar los botones .
 <input type=”datetime”>. Permite seleccionar hora y fecha (UTC2). Es una

combinación de los controles de tipo date y time. Permite una fecha y hora
válida en un formato como 0037-12-13T00:00Z, 1979-10-14T12:00:00.001-
2
Uniform Resource Locator. Es la cadena de caracteres que representa una dirección única utilizada
para localizar los recursos en Internet. La primera parte de una URL indica el protocolo a utilizar (http:\\ o
ftp:\\), la segunda parte indica la dirección IP o nombre de dominio donde se localiza el recurso. Por ejemplo:
http://es.wikipedia.org

04:00 o 8592-01-01T02:09+02:09. Si se indica un número, serán los
milisegundos transcurridos desde el 01/01/1970
 <input type=”datetime-local”>. Permite seleccionar hora y fecha (hora local).

Es similar al control de tipo datetime pero se considera que la hora es la que se
corresponde con la hora local.
Utilizando los controles para datos de tipo fecha/hora, crear un formulario para
planificar vacaciones y reuniones anuales, para ello se deben solicitar los siguientes datos:
 Fecha de inicio de las vacaciones de navidad
 Mes habitual de vacaciones de verano
 Semana blanca preferida
 Hora de entrada al trabajo
 Fecha y hora de reunión anual
A continuación se presentan más controles de formulario que incorpora HTML5 y
que amplían las posibilidades de captura de datos en las páginas Web.
 <datalist>. El elemento datalist está pensado para ser un sistema de
sugerencias de un control input. Básicamente es un contenedor en el que se
incluyen aquellas entradas habituales de un campo de tal forma que si al ir
introduciendo un texto, este coincide con alguna de los valores del datalist, se
muestra el elemento como sugerencia. Se puede utilizar el atributo label para
acompañar a cada uno de los valores del datalist. Para enlazar un elemento
datalist desde un control input se utiliza el atributo list= idDatalist, como se
puede ver en el código que se muestra a continuación:
<form name="miform">
<input type=”text” name=”hDibujos” list=”sugerencias”/>
Introduce tu serie de dibujos animados favorita:
<datalist id=”sugerencias”>
<option value=”Simpson” label=”No infantil”>
<option value=”Padre de familia” label =”No infantil”>
<option value=”Heidi” label=”Infantil”>
</datalist>
</form>

 <fieldset>. Este elemento permite realizar agrupaciones de elementos en el
formulario. De esta forma es posible organizar los campos en la pantalla para
facilitar la localización de los mismos. El control fieldset permite utilizar el
atributo disabled, de tal forma que si es igual a “true” todos los elementos que
contiene se desactivan y no permiten la introducción de datos. A continuación
podemos ver un ejemplo de grupo activado y grupo desactivado.
<fieldset name=”datosp” disabled=”true”>
<strong>Datos personales</strong><p/>
Nombre: <input type=”text” name=”nombre” id=”nombre” />
Edad: <input type=”text” name=”edad” id=”edad” />
</fieldset><br/>
<fieldset name=”contacto”>
<strong>Contacto</strong></p>
E-mail: <input type=”text” name=”email” id=”email” />
Web: <input type=”text” name=”web” id=”web” />
</fieldset>
</form>
 <label>. Esta etiqueta se utiliza para acompañar a un control input. Su uso

implica que al hacer clic sobre un texto que esté calificado como label el foco
pasa al input con el que está enlazado, en cambio si no es así el control lo
asume el mismo texto. Para enlazar una etiqueta label con un control input se
debe utilizar el atributo for=”idInput”. En el siguiente formulario se puede
comprender el comportamiento de esta etiqueta analizando el funcionamiento de
los botones de opción al quitar/incluir la etiqueta label.

<label for=”animal”>Animal</label>
<input type=”radio” name=”tipo” id=”animal” /><br />
<label for=”planta”>Planta</label>
<input type=”radio” name=”tipo” id=”planta” />
</form>
 <legend>. Esta nueva etiqueta se coloca después de fieldset y sirve para

introducir un texto explicativo del contenido, como podemos observar a
continuación:
<fieldset name=”datosp” >
<legend><strong>Datos personales</strong></legend><p/>
Nombre: <input type=”text” name=”nombre” id=”nombre” />
Edad: <input type=”text” name=”edad” id=”edad” />
</fieldset>
</form>
Utilizando los nuevos controles HTML5 hacer un formulario para hacer un

estudio de los hábitos de los usuarios. Se deben hacer agrupaciones de campos del
formulario por temas.
 Datos personales: nombre, dirección email, teléfono.
 Deporte y música favorita
FORMULARIO. NUEVOS ATRIBUTOS

En HTML5 se han desarrollado atributos que aportan nuevas características de
funcionamiento y apariencia de los controles de formulario. Así nos encontramos con
atributos que facilitan la introducción de datos, que limitan la entrada de valores, que
garantizan entradas válidas, etc.

 En general, los navegadores ignoran aquellos atributos que no reconocen.
A continuación se presentan los nuevos atributos de controles de formulario:
 autocomplete: Permite el estado on y off (el valor por defecto es off) y hace que
el campo se rellene o no automáticamente si el sistema es capaz de identificar la
información. Para probar el siguiente ejemplo, introducir datos, a continuación
pulsar sobre el botón enviar (se abrirá el software cliente de correo por defecto)
y al volver sobre la página y recargarla pasar a introducir nuevos datos, si el
texto comienza por los mismos caracteres que los ya introducidos, el navegador
mostrará la sugerencia correspondiente.
//Ejemplo realizado en Chrome
<form name=”miform” action="mailto:mio@servidor.com" method="post">
Nombre:<input type="text" name="hnombre" autocomplete=”on”/><br />
Apellidos: <input type="text" name="hapellidos" /><br />
<input type="submit" value="enviar" />
</form>
 autofocus. Este atributos permite decidir y controlar, desde el código HTML, el

campo que debe activarse inicialmente al cargar la página Web. Anteriormente,
esta situación se controlaba utilizando JavaScript. El atributo de autofocus sólo
debe incluirse en un control para cada formulario.
Nombre: <input type="text" name="hnombre" autofocus /><p />
Apellidos: <input type="text" name="hapellidos" /> <p/>
<input type="submit" value="enviar" />
</form>
 list. Este atributo se utiliza para enlazar un control input con un control datalist
para crear un sistema de sugerencias.
<input type="text" name="hCiudad" list="sugerencias"/>

Introduce una ciudad de partida
<datalist id="sugerencias">
<option value="Barcelona">
<option value="Bilbao">
<option value="Madrid">
</datalist>
</form>
 maxlength. Este atributo permite especificar la cantidad máxima de caracteres

permitidos en un campo input.
dni: <input type="text" maxlength="8"/>
</form>
 multiple. Cuando un control de formulario contiene el atributo multiple permite

que el usuario seleccione más de un valor. Este atributo ya existía en versiones
anteriores de HTML para los controles <select> e <input type=”checkbox”>.
En HTML5 se puede utilizar también para campos input cuyo type es email o
file. Para los tipos email este atributo facilita la introducción de varias
direcciones de correo en un mismo campo de formulario (direcciones separadas
por comas) y para los tipos files permite la selección de varios ficheros de una
vez.

<label for="hemail">CC: </label>
<input id="hemail" type="email" list="contactos" size="50" multiple>
<datalist id="contactos">
<option value="pedro@academiapostal.com">
<option value="rosa@academiapostal.com">
</datalist>
</form>


<input id="hfich" type="file" multiple><p/>

<input type="button" value="Ver Fichero" onClick="verFich();"/>
</form>
Para conocer los ficheros seleccionados se puede utilizar el siguiente script en

el ejemplo anterior.
<script>
function verFich(){
var ficheros=document.getElementById('hfich');
for (i=0; i<=ficheros.files.length;i+=1){
alert(ficheros.files[i].name)
}
}
</script>
 placeholder. Es un nuevo atributo que pertenece a los campos input. Sirve para
mostrar un texto dentro de la caja de texto y se visualiza siempre y cuando el
campo esté vacío y no tenga el foco. En cuanto el cursor está dentro del campo
el texto desaparece.
<input name="hnombre" type="text" placeholder="Tu nombre">
<input type="submit" name="btnEntrar" value="Entrar">
</form>
 readonly. Este atributo puede tener dos valores true o false (el valor por defecto
es off). En el caso de que el valor sea true, el usuario no puede modificar su
contenido.
Centro de estudios:
<input type="text" name="hAc" value="Academia Postal" readonly="true" />
Nombre:<input type="text" name="hnombre" autocomplete /><br />
</form>

 size. Se utilizar el atributo size para determinar el tamaño del campo de un
control input.
DNI: <input type="text" name="hdni" size="8" /><p/>
Edad: <input type="text" name="hedad" size="2" />
</form>
 step. El atributo step determina el intervalo de valores que se produce al pulsar

sobre los botones de incremento de los campos específicos para números y para
fechas.
Nota: <input type="number" name="points" min="0" max="10" step="3" />
</form>
Utilizando los atributos estudiados modificar hacer un formulario que solicite los
datos de inscripción en un curso de un centro de estudios.
VALIDAR FORMULARIOS
Hasta ahora para validar los formularios era necesario recurrir código JavaScript para
controlar el valor de los campos. Con el uso de HTML5 la validación se simplifica en gran
medida gracias al uso de nuevos atributos en las etiquetas de los controles de formulario.
HTML5 valida los campos del formulario al pulsar el botón <input
type=”submit”…/> que tiene como función enviar el contenido de los controles a un
servidor o a una dirección email en función de los atributos method y action de la etiqueta
<form>.
Los atributos que se validan en HTML5 de forma automática son:
 pattern. Este atributo indica, mediante una expresión regular, el formato de
contenido que tiene que tener un campo. Se puede aplicar en cualquier campo
input que permita múltiples caracteres (text, search, url, tel, email y password).
Por ejemplo: [0-9]{8}[A-Z]{1} permitiría la introducción de 8 números y de 1
letra en mayúsculas. Para que funcione correctamente es necesario que la
etiqueta <input> posea el atributo name y title.
<form name="miform" action="prueba.asp" method="get">
NIF: <input type="text" name="codigo" pattern="[0-9]{8}[A-z]{1}"
title="Introduce 8 dígitos y una letra"/>
<input type="submit" value="Enviar">

</form>
 min y max. Estos atributos determinan los valores mínimo y máximo que se
permiten en aquellos controles de formulario específicos para números o fechas.
<form name="miform" action="paraver.php" method="get">>
Nota: <input type="number" name="points" min="0" max="10" />
<input type="submit" value="Enviar"/>
</form>
 required. Para indicar que un campo es obligatorio se utiliza el atributo

required=”true” (por defecto tiene el valor false). La obligatoriedad del campo
se analiza al pulsar sobre el botón submit del formulario.
<form name="miform" action="mailto:mio@servidor.com" method="post">
Introduce tu e-mail:
<input type="mail" name="hdni" autofocus required="true" /><p/>
Introduce tus estudios
<input type="text" name="hest" size="24" />
<input type="submit" value="Enviar">
</form>

Utilizando los nuevos controles HTML5 hacer un formulario con un aspecto
similar al de la imagen que posea las características indicadas.
PRÁCTICA
A continuación se muestra el código de un formulario que contiene un resumen de los
nuevos controles y atributos de HTML5.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="mailto:mio@servidor.com">

<table border="1" cellpadding="5">
<tr>

<td>Campo de sólo lectura</td>
<td><input type="text" name="sololec" value="Formulario"
readonly="true"/></td>
</tr>
<tr>

<td>Campo con número máximo de caracteres</td>
<td>
<input type="text" name="mitext" maxlength="5" size="5"
autocomplete="on" autofocus>
</td>
</tr>
<tr>


<td>URL</td>
<td>
<input type="url" name="miurl" list="urls">
<datalist id="urls">
<option label="El pais" value="http://www.elpais.es">
<option label="El mundo" value="http://www.elmundo.es">
<option label="La voz de galicia"
value="http://www.lavozdegalicia.es">
</datalist>
</td>
</tr>
<tr>

<td>Campo con placeholder</td>
<td>

<input name="nombre" placeholder="Escribe tu nombre"
required></td>
</tr>
<tr>

<td>Email</td>
<td>
<label>Para<input type="email" multiple name=cc list="contactos">
</label>
<datalist id="contactos">
<option value="amigo1@miDominio.es">
</datalist>
</td>
</tr>
<tr>
<tr>

<td>Telefono</td>
<td>
<input type="tel" pattern="[0-9]{11}" title="Introduce 11 números
como máximo">
</td>
</tr>
<tr>

<td>Rango</td>
<td><input name="rango" type="range" min="0" max="100" step="5"
value="40">
<output onformchange="value = rango.value">40</output>
</td>

</tr>

<td>Numero</td>
<td><input name="numero" type="number" min="0" max="100" step="5"
value="40"></td>
</tr>
<tr>

<td>Fecha</td><td><input name="fecha" type="date"></td>
</tr>
<tr>

<td>Semana</td><td><input name="semana" type="week"></td>
</tr>
<tr>

<td>Mes</td><td><input name="mes" type="month"></td>
</tr>
<tr>

<td>Hora</td><td><input name="hora" type="time"></td>
</tr>
<tr>

<td>Datetime</td><td><input name="datetime" type="datetime"></td>
</tr>
<tr>

<td>Local Datetime</td>
<td><input name="datetimelocal" type="datetime-local"></td>
</tr>
<tr>

<td>Color</td><td><input name="color" type="color"></td>
</tr>
<tr><strong></strong>

<td>Consulta Busqueda</td><td><input name="consulta"
type="search"></td>
</tr>
<tr>
<td>Selecciona dos ficheros</td>
<td><input id="hfich" type="file" multiple></td>
</tr>
</table>

<p/><input type="submit" value="Enviar">
</form>
</body>

 Se debe analizar el funcionamiento del código anterior de HTML5 en las
últimas versiones de los navegadores más utilizados: IE, Opera, Chrome, Safari y Firefox.
Hay navegadores que no interpretan los atributos o controles de HTML5 y también hay
diferencias en la forma en que muestran los controles o realizan la validación.

html5 Formularios

Cargado por

Copyright:

Formatos disponibles

html5 Formularios

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

html5 Formularios

Cargado por

Copyright:

Formatos disponibles

FORMULARIOS

Formularios HMTL5 Página 1

CONTROLES INPUT DE VERSIONES ANTERIORES A HTML5

Formularios HMTL5 Página 2

 checkbox: define controles que representan casillas de verificación.

 hidden: define un control que permite introducir valores que no se mostrarán en

 password: el control resultante se utiliza para introducir contraseñas, se

 submit: crea un botón de envío de formulario.

 text: define un control que se utiliza para introducir texto genérico.

Los controles que funcionan como un botón tienen habitualmente un detector de

Formularios HMTL5 Página 3

 Todas la etiquetas de formulario pueden contener dos atributos id y name. El

<input name="migrupo" type="radio" value="hombre" checked>

Formularios HMTL5 Página 4

NUEVOS CONTROLES INPUT DE HTML5

 <input type=”number”>. Permite la introducción de valores numéricos e

Formularios HMTL5 Página 5

 <input type=”range”>. Muestra una barra que se puede utilizar para

 <output>. Este control se puede utilizar en combinación con <input

 <input type=”color”>. Este elemento representa un color. Utiliza la notación

Formularios HMTL5 Página 6

 <input type=”url”> Este control se corresponde con un campo de texto en el

 <input type=”email”>. El atributo type=”email” permite crear un control

Formularios HMTL5 Página 7

Entre los nuevos controles de formulario de HTML5 se encuentran aquellos que

 <input type=”month”>. Permite seleccionar un mes y año.

Formularios HMTL5 Página 8

 <input type=”time”>. Permite seleccionar un dato con el formato

 <input type=”datetime”>. Permite seleccionar hora y fecha (UTC2). Es una

Formularios HMTL5 Página 9

 <input type=”datetime-local”>. Permite seleccionar hora y fecha (hora local).

Formularios HMTL5 Página 10

 <label>. Esta etiqueta se utiliza para acompañar a un control input. Su uso

Formularios HMTL5 Página 11

 <legend>. Esta nueva etiqueta se coloca después de fieldset y sirve para

Utilizando los nuevos controles HTML5 hacer un formulario para hacer un

FORMULARIO. NUEVOS ATRIBUTOS

Formularios HMTL5 Página 12

 autofocus. Este atributos permite decidir y controlar, desde el código HTML, el

Formularios HMTL5 Página 13

 maxlength. Este atributo permite especificar la cantidad máxima de caracteres

 multiple. Cuando un control de formulario contiene el atributo multiple permite

Formularios HMTL5 Página 14

Para conocer los ficheros seleccionados se puede utilizar el siguiente script en

Formularios HMTL5 Página 15

 step. El atributo step determina el intervalo de valores que se produce al pulsar

Formularios HMTL5 Página 16

 required. Para indicar que un campo es obligatorio se utiliza el atributo

Formularios HMTL5 Página 17

Formularios HMTL5 Página 18

Formularios HMTL5 Página 19

Formularios HMTL5 Página 20

Formularios HMTL5 Página 21

También podría gustarte