Este documento explica cómo crear formularios en HTML5, incluyendo la estructura básica, nuevos tipos de campos como correo electrónico, número y fecha, y atributos como placeholder, required y pattern. También cubre cómo agrupar campos usando fieldset y legend, y cómo vincular una lista de sugerencias usando datalist. El objetivo es ayudar a los lectores a entender y utilizar las nuevas características de formularios en HTML5.
3. 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.
4. 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.
5. Esta tabla muestra
los navegadores
donde los nuevos
campos de HTML 5
están o no
disponibles.
La mejor opción
es Google Chrome
6. 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
7. 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
8. 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
9. 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.).
10. 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!
11. Color
Este campo te permite introducir un color:
Se visualiza de la siguiente manera:
12. Fecha
Existen varios campos de selección de fecha, estos son:
Recuerden que
no todos los
navegadores
aceptan todos
esos campos
de fecha.
13. Buscar
Para crear un campo de búsqueda
Es solo para buscar
contenido de la
propia página
15. 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.
16. 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
17. <form method="post" action="tratamiento.php">
<fieldset>
<legend>Tus datos de contacto</legend> <!-- Título del conjunto de campos -->
<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> <!-- Título del conjunto de campos -->
<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>
19. 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
20. 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>.
21. 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.
22. 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
23. 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.
24. 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>
25. 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.
26. 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