Formularios en HTML5

Formularios en HTML 5
EduardoTorres
Joyce Silva Cuenca
¡Vamos a
aprender
programación!
Ojalá
entiendan…
Porque yo no

Crear un formulario
La estructura básica es escribiendo la etiqueta

Atributo form
Con este atributo podemos poner un elemento del formulario fuera
de su etiqueta.
Para ello la etiqueta <form> debe llevar el atributo id . El valor del
atributo form será el mismo que el del id del formulario.

Campos de entrada de HTML 5
Existen nuevos atributos para la etiqueta input
Consideren el
navegador que
usarán, porque
no todos
ejecutan esos
campos.

Esta tabla muestra
los navegadores
donde los nuevos
campos de HTML 5
están o no
disponibles.
La mejor opción
es Google Chrome

Correo electrónico
Para seleccionar un email
El campo normalmente parecerá
el mismo, pero el navegador
ahora sabe que el usuario tiene
que escribir una dirección de
correo electrónico. Puede dar
una indicación si la dirección no
es un correo electrónico, que es
lo que hace Firefox (ejemplo a
continuación).
Teclado para
correo
electrónico de
iPhone

URL
Con el tipo puedes pedirle al visitante que escriba una dirección
absoluta (normalmente comienza con
Si el campo no parece diferente
en tu ordenador, ten en cuenta
que ha entendido eficazmente
que se supone que el visitante
debe escribir una dirección. Por
ejemplo, los navegadores de
móviles muestran un teclado
destinado a escribir una URL.
Teclado para
URL de iPhone

Número de teléfono
El teclado del navegador móvil de
los celulares se adaptará para
aquello.
Teclado para números
de teléfono de iPhone

Número
Este campo se utiliza para escribir un número entero y para elegir un número entre
un máximo y un mínimo
Se puede personalizar la manera en la
que funciona el campo con los siguientes
atributos:
valor mínimo permitido.
valor máximo permitido
es el desplazamiento. Si especificas un «step»
de 2, el campo solo aceptará valores de 2 en 2
(por ejemplo: 0, 2, 4, 6, etc.).

Cursor
El tipo se utiliza para seleccionar un número con un cursor
(también llamado un slider), como se puede ver en el siguiente
ejemplo:
Puedes utilizar de nuevo los atributos
min, max y step para limitar los valores
disponibles.
¡Pongan
atención!

Color
Este campo te permite introducir un color:
Se visualiza de la siguiente manera:

Fecha
Existen varios campos de selección de fecha, estos son:
Recuerden que
no todos los
navegadores
aceptan todos
esos campos
de fecha.

Buscar
Para crear un campo de búsqueda
Es solo para buscar
contenido de la
propia página

<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo nuevos controles</title>
</head>
<body>
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
<br />
Correo Electrónico: <input type="email" name="email_control" required />
<br />
URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal" />
<br />
Fecha: <input type="date" name="date_control" />
<br />
Tiempo: <input type="time" name="time_control" />
<br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" />
<br />
Mes: <input type="month" name="month_control" />
<br />
Semana: <input type="week" name="week_control" />
<br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0" />
<br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0" max="10" value="0" /> <output for="range_control" name="range_control_value" >0</output>
<br />
Teléfono: <input type="tel" name="tel_control" />
<br />
Término de búsqueda: <input type="search" name="search_control" />
<br />
Color Favorito: <input type="color" name="color_control" />

Opciones
Son elementos que requieren que el visitante elija a partir de una lista
de posibilidades.
• casillas de verificación;
• campos de opciones;
• listas desplegables.

Agrupar Campos
Si el formulario ha crecido y
tiene un montón de campos,
puede que sea útil agruparlos
entre varias etiquetas
Cada puede
contener un título con la
etiqueta
Solo cuando haya
demasiados campos en el
formulario

<form method="post" action="tratamiento.php">
<fieldset>
<legend>Tus datos de contacto</legend> 
<label for="apellidos">¿Cuáles son tus apellidos?</label></br>
<input type="text" name="apellido" id="apellido" /></br>
<label for="nombre">¿Cuál es tu nombre?</label></br>
<input type="text" name="nombre" id="nombre" /></br>
<label for="email">¿Cuál es tu dirección de correo electrónico?</label></br>
<input type="email" name="email" id="email" /></br>
</fieldset>
<fieldset>
<legend>Tu deseo</legend> 
<p>
Pide un deseo que quieres que se haga realidad:</br>
<input type="radio" name="deseo" value="rico" id="rico" /> <label for="rico">Ser rico</label></br>
<input type="radio" name="deseo" value="famoso" id="famoso" /> <label for="famoso">Ser famoso</label></br>
<input type="radio" name="deseo" value="inteligente" id="inteligente" /> <label for="inteligente">Ser <strong>aún más</strong> inteligente</label></br>
<input type="radio" name="deseo" value="otro" id="otro" /> <label for="otro">Otro...</label></br>
</p>
<p>
<label for="specs">Si has elegido «Otro», especifica cuál:</label></br>
<textarea name="specs" id="specs" cols="40" rows="4"></textarea>

Elatributo
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 línea.
Todos los navegadores (excepto IE8 y anteriores) admiten
ya este atributo

Elatributo
autofocus
 El atributo autofocus te permite especificar que una
parte del formulario debe tener foco para ingresar
información cuando se carga la página, a menos que el
usuario lo cambie, por ejemplo:
al escribir en otro lugar.
Al abrir o recargar la página el elemento está ya
seleccionado
Este atributo puede ser aplicado a los elementos <input>,
<button>, <select> y <textarea>.

Atributo
required:
 Los navegadores no permitirán al usuario enviar el formulario
si los campos necesarios están vacíos y reportar un error
 La presencia de este atributo indica que el campo en el que
aparece es obligatorio. Si no está relleno nos indica un
mensaje de que debemos rellenarlo para poder mandar el
formulario.
 Si el campo no se ha rellenado al pulsar en enviar (botón
"submit"), el formulario no se envía y nos recuerda con un
mensaje que debemos rellenarlo.
Este atributo funciona en todos los navegadores en su ultima
versión excepto en Safari.

Atributopattern
 – Le permite especificar una expresión regular
personalizada que la entrada debe coincidir
 Solo se puede usar en el elemento input
 Añadir [a-z] {1,15} como el valor del atributo pattern en
nuestra casilla de entrada para nombre de usuario
 Demuestra que están permitidos los caracteres de la A
a la Z(minúsculas) y solo una cantidad máxima de 15

Atributomaxy
min
 Limita el rango de valores que se pueden introducir en
una entrada; no se puede enviar el formulario con un
número menor que min o mayor que máx.

Atributostep
 Controla el nivel de granularidad de entrada –
Ejemplo: quieres que el usuario introduzca un
porcentaje entre 0 y 100, pero sólo a los 5 más
cercanos:
<input type=number mix=0 max=100 step=5>

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 específico con un
elemento <datalist> determinado.

Cualquier duda
busquen en
Google
¡GRACIAS!
Por su
atención
Bibliografía:
https://aprende-web.net/NT/html5/html5_3.php
https://developer.mozilla.org/es/docs/HTML/HTML5/Forms
_in_HTML5
https://openclassrooms.com/en/courses/3339201-aprende-
a-crear-tu-propio-sitio-web-con-html5-y-css3/3350285-
formularios
http://desarrolloweb.dlsi.ua.es/cursos/2011/html5-css3-
es/html5-formularios

Formularios en HTML5

Más contenido relacionado

La actualidad más candente (20)

Similar a Formularios en HTML5 (20)

Más de Michelle Silva Cuenca (20)

Último (20)

Formularios en HTML5