Vamos a crear un formulario sencillo con HTML5, pero antes para los que lo desconozcan, HTML5 (HyperText Markup Language, version 5) es la nueva revisión importante del lenguaje básico de la WWW (World Wide Web), HTML. Se trata de un conjunto de características, tecnologías y APIs que se utilizan para traducir y describir la información en forma de texto y complementarlo con imágenes, videos… amplificando los puntos fuertes de la web, como es la interactividad y la conectividad. Incluye ademas esta quinta revisión del lenguaje: CSS3 para diseño y una serie de APIs de JavaScipt, que juntos permiten desarrollar aplicaciones complejas, antes solo imaginadas para plataformas de escritorio.
Volviendo al tema, vamos a desarrollar un pequeño formulario sencillo en HTML5, algo importante en páginas web de empresas, si tienen la intención de interactuar con los clientes, montando un sistema de comunicación con ellos.
El archivo que utilizaremos para el formulario sencillo en HTML5, será uno con la extensión .html como es lógico. En él, introducimos las etiquetas clásicas de los formularios:
<form> … </form>
Si se quiere recoger los datos del formulario en otro lugar habrá que introducir los atributos
method=«Post» y action=«gestionForm.php» (por ejemplo).
A continuación vamos introduciendo los distintos campos a rellenar:
<label for="name">Nombre: <span class="required">*</span></label><br> <input type="text" id="name" name="name" value="" placeholder="José García" required autofocus />
Como se observa primero se crea el nombre del campo y en la siguiente línea <input> la caja donde se introducirá el dato, en este caso el nombre. Y ya vemos cosas interesantes como placeholder que se trata de un texto orientativo de lo que hay que rellenar, required que indica que el campo es obligatorio, por lo que si no se rellena el propio HTML5 te lanzará un mensaje avisándote para corregir esa situación, cuando se intenta validar. Y por último encontramos autofocus que indica que será la casilla remarcada al abrir el archivo. Continuamos con la creación del formulario sencillo con HTML5:
<label for="email">Dirección de correo: <span class="required">*</span></label><br> <input type="email" id="email" name=" placeholder="pepegarcia@ejemplo.com" required />
Lo interesante al pedir un correo electrónico es el uso del type=«email» que te exige tener que introducir un formato de email. Al igual que el de telefono: type=«tel», aunque yo personalmente no le he encontrado la utilidad todavía.
<label for="telefono">Teléfono: </label><br> <input type="tel" id="telefono" name="telefono" placeholder="555-12345″ />
Podemos necesitar un teléfono pero si no queremos que sea obligatorio no es necesario el uso de required.
Para la contraseña usaremos el type=«password» y de esta forma al introducir caracteres aparecerán asteriscos ocultándola a la vista:
<label for="password">Contraseña: <span class="required">*</span></label><br> <input id="pass" name="pass" type="password" required />
Y por introducir otro campo, podemos pedir que se elija una de las opciones, que imagino no necesitará explicación:
<label for="opciones">Opciones: </label><br> <select id="opciones" name="opciones"> <option value="opcion1″>Opción 1</option> <option value="opcon2″>Opción 2</option> <option value="opcion3″ >Opción 3</option> </select>
Por último hay que añadir el botón para validar, con el cual se comprobarán que todo se ha rellenado correctamente y se enviará la información para gestionarla al archivo que hayamos mencionado.
<input type="submit" value="Enviar" id="submit-button" />
Viendo todo el código junto y añadiendo algún titulo, saltos de línea y las etiquetas necesarias para un correcto funcionamiento del html nos quedaría el siguiente formulario sencillo con HTML5:
<!doctype html> <html lang="en" class="no-js"> <head> <title>Formulario con HTML5</title> </head> <body align="center"> <h2>Registrate en nuestro sistema</h2> <h4>Aquí puede ir cualquier texto informativo</h4> <form method="post" id="form1″> <label for="name">Nombre: <span class="required">*</span></label><br> <input type="text" id="name" name="name" value="" placeholder="José García" required autofocus /> <br> <label for="email">Dirección de correo: <span class="required">*</span></label><br> <input type="email" id="email" name="email" placeholder="pepegarcia@ejemplo.com" required /> <br> <label for="telefono">Teléfono: </label><br> <input type="tel" id="telefono" name="telefono" placeholder="555-12345″ /> <br> <label for="telefono">Contraseña: <span class="required">*</span></label><br> <input id="pass" name="pass" type="password" required /> <br> <label for="telefono">Repetir contraseña: <span class="required">*</span></label><br> <input id="pass2″ name="pass2″ type="password" required /> <br> <label for="opciones">Opciones: </label><br> <select id="opciones" name="opciones"> <option value="opcion1″>Opción 1</option> <option value="opcon2″>Opción 2</option> <option value="opcion3″ >Opción 3</option> </select> <br> <input type="submit" value="Enviar" id="submit-button" /> <p id="req-field-desc"><span class="requerido">*</span> rellenar obligatoriamente</p> </form> </body> </html>
Imagino que cuando veáis la demostración pensareis, que feo queda esto, y tendréis razón, para solucionarlo hay que darle un estilo con CSS3.
Pero de momento hasta aquí: Cómo crear un formulario sencillo con HTML5. Podéis verlo en funcionamiento en la siguiente demo.
Imagen obtenida en www.codejobs.biz
1 comentario. Dejar nuevo
[…] unas semanas os contamos como se podía hacer un formulario con HTML5 y hoy le daremos un formato más atractivo gracias al CSS3, ese lenguaje ideal para conseguir un […]