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

Clase 18 de 56 • Curso Definitivo de HTML y CSS

Resumen

¿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!

Zoe Uribe Eugenio

student•

En VSC para Windows 10 , para convertir el código en comentarios es

CTRL+K .... CTRL+C

Julián Ramírez

student•

alert("Gracias");

Rafael Amed Valenzuela Gonzalez

student•

Tambien puedes usar CTRL + / y lo convierte en comentario :)

John Cardenas

student•

Para seleccionar varias palabras iguales y modificarlas al mismo tiempo en VScode pueden usar control + D

Joel Dominguez Merino

student•

Un excelente dato!

Joaquim jair merlo luque

student•

<h1>Gracias<h1>

Julian David Orozco Colorado

student•

Para comentar en Windows es “SHIFT+ALT+A”

Andres Felipe Rodriguez Hernandez

student•

Gracias!

sergio chambi

student•

gracias por el aporte !

Cristhyan Pacheco

student•

Hola, encuentro muy útiles estos atajos:

Seleccionas la parte que quieres copiar, luego con SHIFT + ALT + FLECHA ABAJO copias todo abajo, presiona la flecha segun cuantas copias quieras realizar.
Selecciona una palabra y con CTRL+D seleccionas la siguiente igual y sucesivamente, luego escribe lo que necesites.
Con ALT+CLICK puedes crear multicursores, manten presionado ALT y da click donde desees el otro cursor.

Espero les sirva 😄

Ali Hilario

student•

¡Excelente! Gracias.

GERMAN GARCIA

student•

Eres la ostia, todavía ni he visto la clase y me puse a leer los comentarios y me topo con este super tip.

¿Como le haces para hacer un mini video en gif?

Joshua Ortiz Rosales

student•

FIELDSET -> nos da un borde en el formulario. y poder seccionar un formulario LEGEND -> nos permite ponerle como un titulo al formulario

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario de clases de PLATZI</title>
</head>
<body>

    <h1>Calendar</h1>

    <form action="">
        <fieldset>
            <legend>Calendario PLATZI  (<b>primera forma</b>)</legend>

            <label for="hora">hora :</label>
            <input type="time" id="hora" name="hora"><br><br>

            <label for="dia">Dia :</label>
            <input type="date" id="dia" name="dia"><br><br>

            <label for="semana">Semana :</label>
            <input type="week" id="semana" name="semana"><br><br>

            <label for="mes">Mes :</label>
            <input type="month" id="mes" name="mes"><br><br>

            <input type="submit" value="Enviar" name="enviar">

        </fieldset>
    </form><br><br>

    <form action="">
        <fieldset>
            <legend>Calendario PLATZI (<b>segunda forma</b>)</legend>

            <label for="calendario">Calendario :</label>
            <input type="datetime-local" id="calendario" name="calendario"><br><br>

            <input type="submit" value="Enviar" name="enviar">
        </fieldset>
    </form>
    
</body>
</html>

asi quedarian

Cristian Ramos

student•

porque 2 etiquetas <br><br> ?? y ninguna con cierre , yo se que no se cierran pero es buena practica colocar <br/>

esas 2 etiquetas juntas agregan 2 saltos acaso ??

Pablo Perez Lee

student•

gracias por el dato, quedan mucho mejor.

Joaquín Rafael Montes

student•

Este curso está genial! Hasta ahora usaba la etiqueta <p> para todo jajaja, ya era hora de aprender buenas prácticas y nuevas etiquetas. Es increible la profundidad a la que se puede llegar con html.

GERMAN GARCIA

student•

x2 😝

Pablo Díaz de Valdés

student•

De momento he hecho 3 cursos de HTML completos en Platzi. Diego es el que mejor imparte las clases y estructura el contenido en mi opinión.

JeanCarlos Atoche Pascual

student•

concuerdo con tigo

Luis Hernandez

student•

diego el mejor parcero

Anthony Smith Quispe De la cruz

student•

Buenas comunidad, tras ver esta clase me surgieron dos dudas:

¿Cuál es la diferencia entre name y id?
¿El input de tipo submit no debería llevar un label como los otros inputs? Respecto a la primera pregunta: ++Name++: Se usa en las peticiones HTTP enviadas desde el navegador al servidor, estas asocian los names y sus valores, es por eso que el URL se actualiza cuando pulsabamos el submit. ++Id++: Este atributo se usa para identificar este valor del input en cuestión para luego ser tratado por Javascript o CSS.

Ahora bien respecto a mi segunda duda: Por lo visto label no es una etiqueta obligatoria, esta pensada para facilitar la navegación a los usuarios y además para usuarios que tienen dificultades para teclear bien las regiones pequeñas(como las checkboxes).

César Palma

student•

Solo no es recomendado usar ids con css, es muy específico es mala práctica

Edison Manrique

student•

La etiqueta name se usa para identificar a ese input en un servidor.

La etiqueta label es para agregarle una descripción por fuera al campo y que el usuario sepa qué escribir. No hay mucho que describir de un botón que dice enviar.

Héctor Tello

student•

Cabe aclarar que los tipos de inputs utilizados en esta clase NO funcionan en Firefox.

Hollman Andres Barbon Florez

student•

Cordial saludo Hector

Que opción recomiendas en ese caso, ya que yo uso

<button>Enviar</button>

Slds

Héctor Tello

student•

Es que los inputs utilizados en esta clase no funcionan en firefox, al intentar ver la página desde firefox, firefox solo los muestra como si queran in textbox más, en cambio en chrome sí funcionan bien. Recomendaría utilizar sólo chrome, o utilizar inputs que sean compatibles con la mayoría de navegadores.

Ronaldo

student•

aaaah banda 48 horas para volverme desarrollador web

Iván Enzo Sarapura

student•

Hoy tienes otras 48 horas xd

Éxitos compañero!!

JeanCarlos Atoche Pascual

student•

jajajajaj

Nicoll Idaly Angulo Mejia

student•

Con un poco de css queda linda

Luis Palomo

student•

Ya que estamos con esto de los comandos aquí va mi aporte:

Con Alt + Flecha arriba/Flecha abajo : pueden mover la línea, o líneas, de arriaba abajo o al revés
Con Alt + Shift + Flecha arriba/Flecha abajo: Puede copiar toda la línea, o líneas que tengan seleccionadas o en las cuales estén parados hacia arriba o abajo.

A la larga se hace mucho más fácil cuando tienen que escribir mucho código.

Rodolfo Sebastian Herrera Hernández

student•

<input type="button"> <!-- Crea un input de tipo boton -->

<input type="checkbox"> <!-- Crea un checkbox -->

<input type="color"> <!-- Crea un input para que el usuario seleccione colores -->

<input type="date"> <!-- Crea un input para que el usuario introduzca una fecha -->

<input type="datetime-local"> <!-- Crea un input para que el usuario introduzca una fecha mas especifica -->

<input type="email"> <!-- Crea un input para que el usuario introduzca su email -->

<input type="file"> <!-- Crea un input para que el usuario introduzca un archivo -->

<input type="hidden"> <!-- Crea un input oculto -->

<input type="month"> <!-- Crea un input para que el usuario introduzca un mes -->

<input type="number"> <!-- Crea un input para que el usuario introduzca numeros -->

<input type="password"> <!-- Crea un input para que el usuario introduzca una contraseña -->

<input type="radio"> <!-- Crea un input de tipo radio (parecido a checkbox) -->

<input type="range"> <!-- Crea un input de tipo rango -->

<input type="reset"> <!-- Crea un boton para resetear el contenido del formulario llenado por el usuario -->

<input type="search"> <!-- Crea un input de tipo search para buscar contenido -->

<input type="submit"> <!-- Crea un boton para enviar los datos del formulario -->

<input type="tel"> <!-- Crea un campo para añadir un numero de telefono -->

<input type="text"> <!-- Crea un campo para añadir texto -->

<input type="time"> <!-- Crea un campo para añadir una hora -->

<input type="url"> <!-- Crea un campo para añadir una URL -->

<input type="week"> <!-- Crea un campo para añadir una semana -->

<input type="disable"> <!-- Crea un campo de tipo inhabilitado -->

<!-- Creacion de un formulario, existen varios parametros -->
<form method="POST" action="" autocomplete="off">

    <!-- Para añadirle un titulo al input -->
    <label for="nombre-input">
        <span>Nombre input</span>
        <input name="nombre-input" type="text" placeholder="Nombre input">
    </label>

</form>  ```

FREDDY NILSON HOME VILLA

student•

Gracias.

Fabian Flores

student•

Notas de la clase

Velazquez Pedro

student•

como se llama la aplicacion que utilizas para tomar notas?

Fabian Flores

student•

One note de Windows y las capturas de pantalla para el código son con la extensión CodeSnap de Visual Studio Code

Gianfranco Iván Misari Ortega

student•

Para los que tengasn teclado Microsoft en español Ctrl + "tecla donde esto }"

Un aporte más

Juan Sebastián Sierra Morales

student•

Resumen

Se utilizaron los siguientes tipos de inputs para hacer un calendario:

Componentes independientes:

time = Hora especifica
date = Fecha de un día especifico.
week = Semana especifica.
month = Mes especifico.

Componentes integrados:

datetime-local = Fecha y hora especifica sin zona horaria.

Los datos se envían con el input:

submit= Boton para enviar la información de los inputs del formulario.

Jose Luis Grande Acevedo

student•

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

student•

Gran aporte!

Juan Manuel Velez

student•

Me esta explotando la cabeza, he utilizado js, he hecho todo al revés, no solo para el usuario es mas cómodo, es que también nosotros estamos mas satisfechos con el resultado