600 829 454
info@quatresoft.com
Facebook
Twitter
LinkedIn
YouTube
RSS
QuatreSoft, servicios de Internet
  • Sobre nosotros
  • Servicios
  • Nuestros trabajos
  • Blog
  • Contacto
Crear formulario sencillo con HTML5

Formulario sencillo con HTML5 ¿Cómo crearlo?

22 octubre, 2015QuatreSoftDesarrollo web, Páginas Web1 comentario

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.
DEMO

 

Imagen obtenida en www.codejobs.biz

Facebook
Twitter
LinkedIn
Pinterest
Etiquetas: Formularios, HTML5, Tutoriales

Entradas relacionadas

Formulario sencillo con HTML5 y CSS3: Dándole diseño

17 diciembre, 2015QuatreSoft

1 comentario. Dejar nuevo

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  He leído y acepto la política de privacidad de QuatreSoft CB

Información sobre protección de datos

  • Responsable: QuatreSoft CB
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, eliminación y olvido.
  • Contacto: info@quatresoft.com.
  • Información adicional en: nuestra política de privacidad.

Nuestro Facebook

QuatreSoft

Entradas recientes

  • ¿Los algoritmos controlan todo lo que vemos en Internet?
  • Cuida tu canal de YouTube
  • Email marketing sigue siendo muy útil en cualquier estrategia
  • Formas de hacer un logotipo
  • Qué color elegir para representar a una marca o empresa

Nuestro Twitter

Tweets por el @QuatreSoft.

Categorías

  • Audiovisual (22)
  • Comunicados (4)
  • Desarrollo Móvil (14)
  • Desarrollo web (40)
    • Páginas Web (18)
    • Tiendas Online (15)
  • Diseño gráfico (21)
  • Emprendedores (4)
  • Marketing Online (64)
    • eMail marketing (13)
    • Redes sociales (19)
    • SEO/SEM (17)
  • Nuevas tecnologías (27)

Etiquetas

Android Anuncios Aplicaciones Apps Blog Colores Community Manager Consejos Correo electrónico Diseñadores Diseño web Dominio eCommerce Emprendedurismo Eventos Facebook Google Herramientas Herramientas CM Herramientas SEO Hosting Instagram Inventos Logotipos Mailing Marcas Marketing de contenidos Newsletter Posicionamiento Publicidad digital Seguridad Smartphone Sobre QuatreSoft Social Media Streaming Tablets Twitter Usabilidad Velocidad de carga Ventas Vídeo corporativo Vídeo marketing Vídeo online Wordpress YouTube

Contacto

+34 600 829 454
info@quatresoft.com
Facebook
Twitter
LinkedIn
YouTube
RSS

Páginas de interés

  • Ir a la página de inicio
  • Aviso legal
  • Política de privacidad
  • Política de Cookies
  • ¿Quieres trabajar con nosotros?
  • Noticias y artículos del mundo informático
  • Todos los servicios que ofrecemos
QuatreSoft es una empresa joven, dinámica y creada por emprendedores, donde nos centramos en el desarrollo web, la realización audiovisual y el marketing online. Algunos de nuestros servicios son: Desarrollo de páginas web y tiendas online, gestión de redes sociales, posicionamiento SEO/SEM, vídeos corporativos, etc
InicioSobre nosotrosServiciosNuestros trabajosContacto
QuatreSoft 2016. Todos los derechos reservados
Aviso sobre el uso de Cookies en esta página web
Usamos cookies propias y de terceros en nuestro sitio web para brindarle la experiencia más relevante recordando sus preferencias y visitas realizadas. Al hacer clic en "Aceptar", estará aceptando el uso de TODAS las cookies. Puedes informarte de todo aquí: Leer más sobre nuestra Política de Cookies
ACEPTARCONFIGURACIÓNRECHAZAR
Privacy & Cookies Policy

Resumen de privacidad sobre las cookies

Este sitio web utiliza cookies propias y de terceros para mejorar su experiencia mientras navega por el sitio web. De estas, las cookies que se clasifican como necesarias se almacenan en su navegador, ya que son esenciales para el funcionamiento de las funcionalidades básicas del sitio web. También utilizamos cookies de terceros que nos ayudan a analizar y comprender cómo utiliza este sitio web. Estas cookies se almacenarán en su navegador solo con su consentimiento. También tiene la opción de optar por no recibir estas cookies. Pero la exclusión voluntaria de algunas de estas cookies puede afectar su experiencia de navegación y a nosotros nos viene muy bien para recopilar estadísticas del uso de la web con el fin de mejorar la experiencia del usuario.
Necesarias
Siempre activado
Las cookies necesarias son absolutamente esenciales para que el sitio web funcione correctamente. Esta categoría solo incluye cookies que garantizan funcionalidades básicas y características de seguridad del sitio web. Estas cookies no almacenan ninguna información personal.
No necesarias
Las cookies que pueden no ser particularmente necesarias para que el sitio web funcione y se utilizan específicamente para recopilar datos personales del usuario a través de análisis y otros contenidos integrados se denominan cookies no necesarias. Antes de ejecutar estas cookies tendrá que aceptarlas. Aunque no son necesarias, a nosotros nos viene genial que las aceptes para tener un control estadístico de las visitas que recibidomos.
GUARDAR Y ACEPTAR