Crear un FORMULARIO en HTML5
La estructura de los formularios con HTML 5 no varía en nada con las versiones más antiguas de HTML aunque añadiendo muchas funciones, es decir para crear un formulario con nombre, e-mail, edad y pagina web como el que utilizaremos de ejemplo:
Su codigo sería:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" /> Edad:<input type="text" name="edad" id="edad" /> E-mail:<input type="text" name="email" id="email" /> Web:<input type="text" name="web" id="web" /> </form>
Como podemos ver en el codigo todos los campos de texto son type="text" ya sea para numero en caso de edad o para URL en este caso con el nombre de web, también existen existen otros "types" como password para que el texto se viera con asteriscos.
En el caso de HTML5 tiene muchos "type" diferentes, cada uno específico para cada tipo de datos, són los siquientes:
| text | Para introducir texto, simplemente. |
| search | Específico para input en un buscador. |
| url | Específico para direcciones de página web. Requiere http:// o http: simplemente. |
| tel | Se supone que para números de teléfono aunque no he conseguido que haga nada. |
| El nombre lo dice. | |
| password | Escribe el contenido en asteriscos. |
| De tiempo | datetime, date, month, week, time y datetimelocal. |
| number | Específico para numeros. |
| range | Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min="10" y un max="12" (los números son de ejemplo.) |
| checkbox | Para seleccionar y deseleccionar. |
| radio button | Para seleccionar, uno obligatorio. |
Ahora aplicando estos types a nuestro ejemplo de formulario anterior quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" /> Edad:<input type="range" max="100" min="5" name="edad" id="edad" /> <output onformchange="value = edad.value">0</output> E-mail:<input type="email" name="email" id="email" /> Web:<input type="url" name="web" id="web" /> </form>
Como vemos esta vez hemos tenído que introducir un "output" que será un número mostrando la edad que ha señalado en el type="range" (solo funciona en Opera), como ahora veremos ese type "range" crea una barra desplazable para señalar el numero deseado.
Podemos pensar que esto de los type está muy bien pero que obtenemos el mismo resultado con type="text" simplemente. Pero para sacarle el máximo partido a todo este tutorial y grácias a HTML 5 tenemos el parámetro " required "
que se tendrá que añadir a las lineas de codigo de los imput que sean obligatorios, es decir, que no puedan tener un valor en blanco, gracias a este "required" el formulario no será enviado si algun campo está en blanco.
Pensemos un poco, si ponemos cada type correctamente con los datos que pedimos y además añadimos el "required" el formulario no será enviado hasta que en el campo email este relleno por un email correcto y lo mismo pasa con los demás type por ejemplo el URL.
De esta manera que hemos aprendido podremos validar formularios sin ningún esfuerzo y sin necesidad de javascript. El codigo finalmente quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" required/> Edad:<input type="range" max="100" min="5" name="edad" id="edad" /> <output onformchange="value = edad.value">0</output> E-mail:<input type="email" name="email" id="email" required/> Web:<input type="url" name="web" id="web" required/> <input type="submit" name="enviar" id="enviar" value="Enviar"> </form>
Con este codigo se puede jugar todo lo que quieras, podemos hacer por ejemplo que cuando el valor introducido sea correcto, es decir, que en un campo email hayan introducido un email el campo pase de ser de color rojo a verde, simplemente sería introducir entre el "head" el siquiente codigo:
<head> <style> #for input:valid { background:green;} #for input:invalid { background:red;} </style> </head>
Este codigo modifica los colores de todos los input cuando son válidos o inválidos pero si no queremos que cambien todos los imput podemos añadir labels con cualquier nombre. Introducimos entre el "#for" y "input" una palabra, por ejemplo "este". Y encerramos el input que queramos modificar con esos colores con etiquetas que se llamen igual, en este caso "este". Aqui el codigo de ejemplo:
<head> <style> #for este input:valid { background:black;} #for input:valid { background:green;} #for input:invalid { background:red;} </style> </head> <body> <form id="for"> <p>Name: <este><input type="text" name="name" required></este></p> <p>E-mail: <input type="email" name="email" required></p> <p>URL: <input type="url" name="url" required></p> <p>Edad: <input type="range" name="edad"></p> <p><input type="submit" value="enviar"></p> </form> </body>
En este caso el input "name" será el unico que se volverá negro al ser válido su contenido.
esto ha sido todo, muchas grácias.
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario