Formularios HMTL5 Alum

MEJORAS DE HTML5 EN LOS FORMULARIOS PARA LA
ETIQUETA INPUT
NO TODOS LOS NAVEGADORES SOPORTAN ESTAS

ENTRADAS
Elementos HTML semánticos.
El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto

el desarrollo de las páginas como también el análisis de las mismas por
buscadores.
Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la
página son:
 header:El elemento header debe utilizarse para marcar la cabecera de
una página (contiene el logotipo del sitio, una imagen, un cuadro de
búsqueda etc)
El elemento header puede estar anidado en otras secciones de la página
(es decir que no solo se utiliza para la cabecera de la página)
 nav:El elemento nav representa una parte de una página que enlaza a
otras páginas o partes dentro de la página. Es una sección con enlaces
de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en
un elemento nav. únicamente las secciones que consisten en bloques de
navegación más importantes son adecuados para el elemento de
navegación.
 section:El elemento section representa un documento genérico o de la
sección de aplicación. Una sección, en este contexto, es una agrupación
temática de los contenidos. Puede ser un capítulo, una sección de un
capítulo o básicamente cualquier cosa que incluya su propio
encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones
para una introducción, noticias, información de contacto etc.
 footer:El elemento footer se utiliza para indicar el pié de la página o de
una sección. Un pie de página contiene información general acerca de
su sección el autor, enlaces a documentos relacionados, datos de
derechos de autor etc.
 aside: El elemento aside representa una nota, un consejo, una
explicación. Esta área son representados a menudo como barras
laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las
comillas tipográficas o barras laterales, para la publicidad, por grupos de
elementos de navegación, y por otro contenido que se considera por
separado del contenido principal de la página.
 article: El elemento article representa una entrada independiente en un
blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están
relacionados con el contenido del artículo exterior. Por ejemplo, una
entrada de blog en un sitio que acepta comentarios, el elemento article
principal agrupa el artículo propiamente dicho y otro bloque article
anidado con los comentarios de los usuario.
1
Un ejemplo de página añadiendo estos elementos semánticos sería:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elementos semánticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la página</h1>
</header>
<nav>
<p>enlaces de navegación</p>
</nav>
<section>
<p>Sección 1</p>
</section>
<section>
<p>Sección 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pié de página</p>
</footer>
</body>
</html>
Tipo de entrada color
<input type="color" name="color"> proporciona al

usuario un selector de color
<!DOCTYPE html>
<html>
<body>
<h1>color</h1>
<form action="" method="post">
Selecciona color:
<input type="color" name="color"><br>
<input type="submit">
</form>
</body>
</html>
2
Tipo de entrada Fecha
<input type=”date” name=”fecha”>
<!DOCTYPE html>
<html>
<body>
<h1>date</h1>
<form action="">
Cumpleaños:
<input type="date" name="cumpleday">
</form>
</body>
</html>
3
Tipo de entrada Fecha y hora local
<input type=”datetime-local” name=”fechahora”>

<input type=”time” name=”hora”>
<input type=”datetime” name=”fechahora”> no salen los
contoroles
<!DOCTYPE html>
<html>
<body>
<h1>datetime</h1>
<form action="">
aniversario:
<input type="datetime-local" name="fechahora">
</form>
</body>
</html>
4
Tipo entrada email
<input type=”email” name=”email”>

<!DOCTYPE html>
<html>
<body>
<h1>email</h1>
<form action="">
email
<input type="email" name="email">
</form>
</body>
</html>
Tipo entrada mes

<input type=”month” name=”cumplemes”>
<!DOCTYPE html>
<html>
<body>
<h1>mes</h1>
<form action="">
5
mes
<input type="month" name="mes">
</form>
</body>
</html>
Tipo entrada semana

<input type=”week” name=”semana”>
<!DOCTYPE html>
<html>
<body>
<h1>url</h1>
<form action="">
Buscar en google
<input type="week" name="semana">
</form>
</body>
</html>
6
Tipo entrada número
Alguno de los atributos
<input type=”number” max=”5” min=”2”> El tipo
number(input=”number”) proporciona una entrada de dato para agregar un
número. Normalmente se trata de un cuadro donde se puede escribir un
número o hacer clic en las flechas arriba o abajo para seleccionarlo.
Esta entrada de datos cuenta con los atributos max y min para especificar los
valores mínimo y máximos permitidos, también puede utilizar el atributo step,
este determina la cantidad a disminuir o aumentar cuando hace clic en las
flechas.
<!DOCTYPE html>
<html>
<body>
<h1>numero</h1>
<form action="">
numero
<input type="number" min="2" max="5" name="number">
</form>
</body>
</html>
Tipo entrada rango

7
<input type=”range” name=”rango” min=”1” max=”4”> Este tipo
de entrada de datos nos proporciona un deslizador en aquellos
navegadores que lo soportan. Al igual que number, permite los atributo
min,max y step. La diferencia entre numbre y range, según la HTML 5
Specification, es que en el campo tipo range no es relevante obtener el
valor exacto del número. Por ejemplo para recoger datos de valoración de
usuarios, que elijan entre un rango numérico(1-4).
<!DOCTYPE html>
<html>
<body>
<h1>rango</h1>
<form action="/registrardatos.php">
rango
<input type="range" min="2" max="5" name="rango">
</form>
</body>
</html>
Tipo entrada telefono

<input type=”tel” name=”telefono”> El dispositivo detecta el input y al
pulsar en él automáticamente sale el teclado telefónico del móvil para
teclear el número en cuestión. Solo funciona en SAFARI.
<!DOCTYPE html>
<html>
<body>
<h1>telefono</h1>
<form action="">
telefono
<input type="tel" name="telefono">
</form>
</body>
</html>
Tipo entrada buscar
8
<input type=”search” name=”buscar” > El tipo de entrada de datos
Search(type="search"), proporciana un campo de búsqueda, es muy
parecido a un campo de texto normal. Muchos navegadores aplican estilos
a este campo de manera coherente con el navegador o las casillas de
búsqueda del sistema operativo, algunos navegadores han agregado la
posibilidad de borrar la entrada de datos con un solo clic al proporcionar un
icono X una vez que se ha escrito algo en el campo
<!DOCTYPE html>
<html>
<body>
<h1>buscar</h1>
<form action="">
Buscar en google
<input type="search" name="busco">
</form>
</body>
</html>
Tipo entrada url

<input type=”url” name=”url”>
<!DOCTYPE html>
<html>
<body>
<h1>url</h1>
<form action="">
Buscar en google
<input type="url" name="url">
</form>
</body>
</html>
9
Input-datalist
Con <input type=”text”> podemos escribir cualquier cadena en su
interior. Con datalist podemos mostrar una lista de sugerencias
(no obligatorias como un select) para que el operador pueda
seleccionarla sin tener que escribirlo.
<!DOCTYPE html>
<html>
<body>
<h1>datalist</h1>
<form action="">
escribe el nombre de la página
<input type="text" id="paginas" list="listaurls">
<datalist id="listaurls">
<option value="http://www.ayudaenlaweb.com" label="Ayuda en la Web">
<option value="http://lineadecodigo.com" label="Línea de Código">
<option value="http://www.dudasprogramacion.com" label="Dudas de
Programación">
</datalist>
10
</form>
</body>
</html>
NUEVOS ATRIBUTOS
Required: permite cambiar como obligatorio un campo de forma

que no se pueda ejecutar la función submit.
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario" required>
<br>
Clave:
<input type="password" id="clave" required>
<br>
<br>
</form>
</body>
</html>
Autofocus: Debería usarse solo en un objeto de cada formulario.
Selecciona el campo que tomará el foco de forma automática,
aparecerá el cursor en su interior.
<!DOCTYPE HTML>
<html>
<head>
11
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario">
<br>
Clave:
<input type="password" id="clave">
<br>
Edad:
<input type="text" id="edad" autofocus>
<br>
<input type="submit" value="Confirmar">
</form>
</body>
</html>
Autocomplete: puede tomar dos valores: on/off. Indica al
navegador si puede hacer sugerencias al usuario dependiendo de
lo que haya escrito en ocasiones anteriores en ese mismo campo.
<form action="#" autocomplete="on">
Nombre: <input type="text" name="nombre"
autocomplete="on"/>
Apellidos: <input type="text" name="apellidos"
autocomplete="off" />
</form>
Placeholder: válidos en todos los campos de texto, nos muestra

un texto con instrucciones sobre que debemos de cumplimentar en
el mismo. Desaparece al pulsar dentro del campo.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Patente:
<input type="text" id="patente" placeholder="AB123CD">
<br>
<input type="submit" value="Confirmar">
</form>
</body>
</html>
12
Pattern: permite especificar una expresión regular que debe de
cumplir lo que pongamos en el campo para que el formulario sea
validado. Para definir expresiones regulares intervienen una serie
de caracteres . * +? =! : | \ / () [] {} que tienen un significado
especial en la definición del lenguaje de expresiones regulares,
estos tipos de caracteres suelen llamarse metacaracteres.
El tema de expresión regular es bastante amplio y complejo en un
principio.
EJEMPLO1
Confeccionar un formulario que nos solicite la carga obligatoria de
un número binario de ocho dígitos.
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Itroduce un número binario de ocho dígitos:
<input type="text" id="numero" required pattern="[01]{8}">
<br>
</form>
</body>
</html>
Entre corchetes encerramos los caracteres permitidos, en este
caso [01] indicamos que los dos únicos caracteres posibles de
ingresar dentro del control son el cero y el uno. Seguidamente
indicamos entre llaves la cantidad de caracteres que se deben
introducir, en nuestro ejemplo indicamos {8}
Otra cosa que hay que tener muy en cuenta es que debemos
agregar la propiedad required. Si no agregamos esta propiedad y
el operador dejar vacío el control no valida la expresión regular
que hemos dispuesto. Es decir si dejamos vacío el control no se
analiza si se introdujo un número binario de ocho dígitos.
EJEMPLO2
Confeccionar un formulario que nos solicite la carga de un número

entero decimal que contenga 5 dígitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
13
<body>
<form action="#">
Introducir un número entero que contenga 5 dígitos:
<input type="text" id="numero" required pattern=
"[0-9]{5}">
<br>
</form>
</body>
</html>
Si bien podíamos enumerar del cero al nueve los caracteres
posibles, es más cómodo indicar un rango de caracteres [0-9]
utilizando el guion.
Como vemos la expresión regular queda:
<input type="text" id="numero" required pattern="[0-9]
{5}">
EJEMPLO3
Confeccionar un formulario que nos solicite la carga de un número

entero decimal que contenga entre 1 y 5 dígitos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese un número entero decimal que contenga entre 1 y 5
dígitos:
{1,5}">
<br>
</form>
</body>
</html>
En este problema vemos que cuando queremos cargar una

cantidad no exacta de valores indicamos entre llaves primero el
valor mínimo y luego de una coma el valor máximo:
{1,5}">
14
EJEMPLO4
Confeccionar un formulario que nos solicite la carga de una

patente de un auto. Toda patente cuenta con tres caracteres
seguido de tres números
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Ingrese su patente:
<input type="text" id="patente" required pattern="[A-Za-z]
{3}[0-9]{3}">
<br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
Como vemos primero indicamos entre corchetes que podemos
introducir cualquier carácter alfabético en mayúsculas o
minúsculas, luego entre llaves indicamos que solo se pueden
cargar 3 de dichos caracteres. Seguimos nuevamente entre
corchetes indicando que se puede cargar números entre 0 y 9,
indicando entre llaves que deben ser exactamente 3.
EJEMPLO5
Ejemplo valido para introducir un NIF.
<label>NIF: <input type="text" name="nif" pattern="[0-

9]{8}[A-Za-z]{1}" /></label><br />
15
Realizar el siguiente formulario teniendo en cuenta:
 Nombre requerido
 Provincia datalist con los valores
 Email requerido
 Código postal y nif con patrón
 Edad min 18 max 100 step de uno en uno
 Comprobar todos los controles antes de enviar el
formulario.
Posicionamiento:
16
https://www.mclibre.org/consultar/htmlcss/ejercicios/
posicionamiento-absoluto/murphy/murphy-1-formateado.html
17

Formularios HMTL5 Alum

Cargado por

Información del documento

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

Formularios HMTL5 Alum

Cargado por

Copyright:

Formatos disponibles

MEJORAS DE HTML5 EN LOS FORMULARIOS PARA LA

NO TODOS LOS NAVEGADORES SOPORTAN ESTAS

El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto

Tipo de entrada color

<input type="color" name="color"> proporciona al

<input type=”date” name=”fecha”>

<input type=”datetime-local” name=”fechahora”>

<input type=”email” name=”email”>

Tipo entrada mes

Tipo entrada semana

Tipo entrada rango

Tipo entrada telefono

Tipo entrada buscar

Tipo entrada url

Required: permite cambiar como obligatorio un campo de forma

Placeholder: válidos en todos los campos de texto, nos muestra

Confeccionar un formulario que nos solicite la carga de un número

Confeccionar un formulario que nos solicite la carga de un número

En este problema vemos que cuando queremos cargar una

Confeccionar un formulario que nos solicite la carga de una

<label>NIF: <input type="text" name="nif" pattern="[0-

También podría gustarte