Creación de Formularios HTML con Campos de Fecha y Hora

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:18

Creación de Formularios HTML con Campos de Fecha y Hora

Curso Definitivo de HTML y CSS

Clase 18 de 56

Clase 18 / 56

Recursos

¿Cómo crear formularios que recolectan fechas y horarios?

El desarrollo de formularios en HTML es una herramienta esencial para interactuar con los usuarios. No solo permite recibir datos básicos de texto, sino que también facilita la recolección de información más específica, como fechas y horarios. Este artículo te guiará en la elaboración de un formulario de calendario utilizando diversas etiquetas de input que simplifican el proceso para los usuarios.

¿Cómo empezar un formulario desde cero?

Primero, debemos crear nuestra estructura básica de HTML en el archivo index.html. Aquí, usaremos la etiqueta <form> como contenedor principal del formulario, y comenzaremos por definir las diferentes entradas que permitirán al usuario introducir datos precisos:

<form>
  <label>
    <span>Hora</span>
    <input type="time" id="hora" name="hora">
  </label>

  <label>
    <span>Día</span>
    <input type="date" id="dia" name="dia">
  </label>

  <label>
    <span>Semana</span>
    <input type="week" id="semana" name="semana">
  </label>

  <label>
    <span>Mes</span>
    <input type="month" id="mes" name="mes">
  </label>

  <input type="submit" value="Enviar">
</form>

Este ejemplo ilustra cómo pedir al usuario datos específicos: hora, día, semana y mes, utilizando los tipos de input time, date, week y month.

¿Por qué es importante el atributo name?

El atributo name es crucial para identificar los datos recolectados cuando se envía el formulario. Al enviar, el navegador muestra en la URL los valores ingresados emparejados con sus correspondientes nombres. Esto lo hace útil para procesar datos y almacenarlos en bases de datos.

¿Qué hay de una solución simple para agregar fechas?

Si prefieres una vía más directa, existe un tipo de input que engloba la selección de fecha y hora en un solo control:

<form>
  <label>
    <span>Calendario</span>
    <input type="datetime-local" id="calendario" name="calendario">
  </label>

  <input type="submit" value="Enviar">
</form>

Al usar datetime-local, permites al usuario ingresar una fecha y hora específicas sin segmentar los datos en varios campos. Esto simplifica el diseño del formulario y reduce el esfuerzo del usuario.

¿Cómo se pueden agregar comentarios en el código?

A la hora de programar, añadir comentarios es una práctica valiosa que permite documentar el código. En HTML, se pueden agregar comentarios con el siguiente formato:

<!-- Este es un comentario que no se mostrará en el navegador -->

Los comentarios son útiles para recordar el propósito de partes específicas del código o para mantener secciones que podrían ser útiles en el futuro sin que se rendericen en el navegador.

¿Qué sigue en el desarrollo de formularios?

El próximo paso es aprender a validar los formularios para garantizar que los datos esenciales se completen antes de ser enviados. También es relevante explorar cómo el navegador puede proponer automáticamente información, optimizando aún más la experiencia del usuario.

Recuerda siempre mantener tu conocimiento actualizado y seguir investigando sobre nuevas herramientas y funcionalidades que puedes implementar en tus proyectos. ¡No te detengas y sigue aprendiendo!

Jose Luis Grande Acevedo

Hace 6 años

Vamos a poner form que es nuestra etiqueta principal que se convierte en el contenedor de nuestro formulario completo, vamos a hacer un formulario tipo calendario en donde vamos a pedir la hora, el dia, la semana y el mes para que el usuario pueda decirnos en que dia, semana, mes quiere llegar y de igual forma para poderse retirar. En caso de que quisiéramos mandar esta información para eso vamos a utilizar otro atributo que se llama name y el name va a ser igual el mismo atributo de form y id

<label for="hora">
        <span>Hora</span>
        <input type="time" id="hora" name="hora" />
      </label>
      <label for="dia">
        <span>Día</span>
        <input type="date" id="dia" name="dia" />
      </label>
      <label for="semana">
        <span>Semana</span>
        <input type="week" id="semana" name="semana" />
      </label>
      <label for="mes">
        <span>Mes</span>
        <input type="month" id="mes" name="mes" />
</label>

Vamos a utilizar otro input con un tipo que se va a llamar submit, que lo que va a hacer es vas a ver en el navegador como se va a renderizar este input en particular, quiere decir enviar

 <input type="submit" />

Otra forma de colocar esto es:

<form action="">
      <label for="calendario">
        <span>Calendario</span>
        <input type="datetime-local" name="calendario" id="calendario" />
      </label>
      <input type="submit" />
</form>

En el type se pone datetime-local, le estamos diciendo que queremos el tiempo fecha de nuestra área local, con eso pregunta dia mes año y hora, 4 cosas en un solo input.

Max Camargo

Hace 6 años

Gran aporte!

Comentarios (540)540 comentarios

Zoe Uribe Eugenio

Julián Ramírez

Rafael Amed Valenzuela Gonzalez

John Cardenas

Joel Dominguez Merino

Joaquim jair merlo luque

Julian David Orozco Colorado

Andres Felipe Rodriguez Hernandez

sergio chambi

Cristhyan Pacheco

Ali Hilario

Hace 5 años

iecgerman .

Joshua Ortiz Rosales

Cristian Ramos

Pablo Perez Lee

Joaquín Rafael Montes

Pablo Díaz de Valdés

JeanCarlos Atoche Pascual

Luis Hernandez

Hace 4 años

Anthony Smith Quispe De la cruz

César Palma

Edison Manrique

Héctor Tello

Hollman Andres Barbon Florez

Ronaldo

Iván Enzo Sarapura

Nicoll Idaly Angulo Mejia

Luis Palomo

Rodolfo Sebastian Herrera Hernández

FREDDY NILSON HOME VILLA

Fabian Flores

Velazquez Pedro

Gianfranco Iván Misari Ortega

Juan Sebastián Sierra Morales

Juan Manuel Velez

Jimmy Buriticá Londoño

Lorraine Gelis Díaz

Kevin Andres Curruchich Xocop

Ithzamary Vilchis Garcia

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Creación de Formularios HTML con Campos de Fecha y Hora