Calendar

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

CTRL+K … CTRL+C

John Cardenas

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

Julian David Orozco Colorado

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

Cristhyan Pacheco

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 😄

JochuaOrtiz

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

Joaquín Rafael Montes

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.

Pablo Díaz de Valdés

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.

Anthony Smith Quispe De la cruz

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

Ronaldo

aaaah banda 48 horas para volverme desarrollador web

Héctor Tello

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

Luis Palomo

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.

Nicoll Idaly Angulo Mejia

Con un poco de css queda linda

Rodolfo Sebastian Herrera Hernández

<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>  ```

Fabian Flores

Notas de la clase

Gianfranco Iván Misari Ortega

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

Un aporte más

SsimorPro

Resumen

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

<h5>Componentes independientes:</h5>

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

<h5>Componentes integrados:</h5>

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

<h5>Los datos se envían con el input:</h5>

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

Jose Luis Grande Acevedo

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.

Juan Manuel Velez

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

Lorraine Gelis Díaz

Chicos, un dato. En VSC colocando html:5 y enter te renderiza toda la estructura del html.

😄

Ithzamary Vilchis Garcia

Les comparto algunos tipos de input

Oscar Fajardo

Así comenté el código en Windows 10 en VSC.
SHIT ALT A

William Navarro Nuñez

En mi caso para convertir el código en comentario fue
Alt + Shift + A

Jose Antonio Rojas Ollarves

name: Es un atributo de los inputs nos ayuda en el caso que queramos enviar la información a alguna URL. Debe ser igual que el atributo for de label y por lo tanto que el id del input.

Irving Juárez

Para que no se vea tan amontonado, pueden usar la etiqueta <br> que es un salto de linea para que dentro del form podamos hacer un formato en vertical como en el siguiente ejemplo

<body>
    <h1>When would you like to start your travel?</h1>
    <form action="">
        <label for="week">
            <span>Week</span>
            <input type="week" id="week" name="week">
        </label>
        <br> <br>
        <label for="month">
            <span>Month</span>
            <input type="month" id="month" name="month">
        </label>
        <br> <br>
        <label for="day">
            <span>Day</span>
            <input type="date" id="day" name="day">
        </label>
        <br> <br>
        <input type="submit">
    </form>
</body>

Pachas Jenifer

Asi quedo 😃

Joel Alfredo Campos Rios

Más información de los inputs Aqui

Any Yeilinet Omaña Bustamante

Me encanta porque estoy aprendiendo mucho más de lo que aprendí en el liceo 😍 Ahora me doy cuenta de que con todo este conocimiento mis proyectos de fin de año hubiesen sido mucho más amenos y fáciles de llevar 😍😍😍😍 El poder del conocimiento es increíble ☺️

Oscar David Rodríguez manjarres

Aquí mi versión

aquí les dejo el código html y css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendario</title>
    <link rel="stylesheet" href="./claendar.css" />
  </head>
  <body>
    c
    <header>
      <h1>CONFIGURE SU ENTREGA</h1>
    </header>

    <main>
      
      <div class="requisitos">
        <h2>Verifique bien la informacion colocada en esta seccion</h2>
        <form action="calendario">
          <label for="">
            <span class="span">Calendario</span>
            <input type="text" id="calendario" name="calendario" />
          </label>
        </form>

        <form action="nombre">
          <label for="">
            <span class="span">Nombre</span>
            <input type="datetime-local" id="nombre" name="nombre" />
          </label>
        </form>

        <form action="telefono">
          <label for="">
            <span class="span">Telefono</span>
            <input type="number" id="telefono" name="telefono" />
          </label>
        </form>

        <form action="email">
          <label for="">
            <span class="span">Email</span>
            <input type="email" id="email" name="email" />
          </label>
        </form>
        <form action="enviar">
          <input class="enviar" type="submit" />
        </form>
      </div>
    </main>
  </body>
</html>

body {
  background-color: rgba(236, 212, 169, 0.283);
}
h1 {
  display: flex;
  justify-content: center;
  color: rgba(43, 58, 226, 0.681);
}

h2 {
  font-size: 12px;
  display: flex;
  justify-content: center;
  color: rgba(226, 43, 43, 0.681);
}
main {
  display: flex;
  justify-content: center;
}
.requisitos {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  border: 2px solid rgb(98, 0, 255);
  border-radius: 10px;
  width: 344px;
}

form {
  margin-top: 30px;
}
.enviar {
  background-color: rgba(137, 43, 226, 0.373);
  color: rgb(10, 10, 10);
  margin-top: 20px;
}
.span {
  color: rgb(0, 0, 0);
  background-color: rgba(137, 43, 226, 0.373);
}

Daniela Funes

Para comentar en VS con Windows 10 selecciona el texto y pulsa Shift + Alt + a

Alfonso Reyes Ramírez

Para los comentarios en Mac yo usé cmd+shift+7

user_deleted_1572741

🐱‍💻 <input> permite crear controles interactivos para formularios, con el fin de recibir datos del usuario.

José Jacobo Capa Angamarca

https://damiandeluca.com.ar/visual-studio-code-atajos-de-teclado-shortcuts

estos son los shortcut de visual en español para los que no se les da bien el ingles c:

María Del Pilar Chávez Gutiérrez

Para hacer calendarios en un form tenemos dos formas una es mas sencilla que otra, empezaremos por la más compleja que con esa podemos tener control de que datos queremos recaudar, comenzaremos con la etiqueta <form> que será nuestra etiqueta principal que se convierte en el contenedor de nuestro formulario completo quedando de la siguiente forma haciendo un formulario tipo calendario:

Lo que queremos es que en este formulario indiquen hora, día, semana y mes.

Otro input que utilizaremos es submit <input type=“submit” /> Este input es el que nos ayudará a que salga el botón “enviar” en nuestro formulario. Este input va hasta abajo de todo nuestro código para llenar formulario, por ejemplo:

<label for=“semana”>
<span>Semana</span>
<input type=“week” id=“semana” name=“semana” />
</label>

La forma sencilla de crear un formulario es la siguiente:

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

AEX

Diferentes formatos de input y labels

Opción 1

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Opción 2

<label>
  Firstname
  <input name="firstname" />
</label>

Opción 3

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Gisela Piscoli

Por fin pude aprender como comentar el codigo
Alt+shift+A

Juan Torrealba

Captura de Pantalla 2021-01-04 a la(s) 22.18.50.png

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form-02</title>
</head>
<body>
    <h1>Formulario Complejo</h1>
    <form action="">
       <label for="hora">
           <span>Hora</span>
           <!-- El atributo "name" nos ayuda para identificar la info que estamos enviando -->
           <input type="time" id="hora" name="hora" />
       </label>
       <br />
       <br />
       <label for="hora">
            <span>Día</span>
            <input type="date" id="dia" name="dia" />
        </label>
        <br />
        <br />
       <label for="hora">
            <span>Semana</span>
            <input type="week" id="semana" name="semana" />
        </label>
        <br />
        <br />
       <label for="hora">
            <span>Mes</span>
            <input type="month" id="mes" name="mes" />
        </label>
        <br />
        <br />
        <input type="submit">
    </form>
    <br />
    <br />
    <br />
    <h1>Formulario Sencillo</h1>
    <form action="">
        <label for="calendario">
            <input type="datetime-local" id="calendario" name="calendario" />
        </label>
        <br />
        <br />
        <input type="submit" />
    </form>
</body>
</html>```

Martín Martínez

Chicos si no saben muy bien lo que hace una etiqueta busquenla en Google, entren a la página de mozilla developer!

Es información muy buena!

Yoshirys de Jesús Salas Corona

RESUMEN.

Se usa para recibir datos de hora, día, mes, año.
El input tipo “submit” genera un botón para enviar los datos.

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

fenderbcn

Hola ,
En Safari no detecta el tipo hora ni fecha!
saludos

Alejandro Om

Pues yo la verdad estoy sorprendido y me emociona cosas tan simples como medio crear un formulario. Si falta estilo diseño y muchas, pero muchas cosas más, pero en mi vida pensé que podría hacerlo, no me imagino cuando te metes más a fondo. lo que me sorprende es que con el simple hecho de inspeccionar una página puedes ver cosas nuevas!

Velazquez Pedro

Para la gente nueva, el atajo que dice diego para comentar a mi no me sirvio. En cambio use Alt + Shfit + A Espero les sirva

Melisa del Valle Barrera

hace 8 meses

Algunos types para los inputs * `text`: Campo de texto libre de una sola línea. * `password`: Campo para contraseñas (oculta los caracteres). * `submit`: Envía el formulario al servidor. * `reset`: Borra todos los valores de los campos del formulario. * `checkbox`: Permite seleccionar una o varias opciones de un conjunto. * `radio`: Permite seleccionar una única opción de un conjunto. * `email`: Campo para ingresar una dirección de correo electrónico. * `number`: Campo para ingresar un número entero o decimal. * `date`: Permite seleccionar una fecha. * `time`: Permite seleccionar una hora. * `file`: Permite seleccionar uno o varios archivos para subir. * `hidden`: Almacena un valor que no se muestra al usuario pero se envía con el formulario. * `range`: Permite seleccionar un valor dentro de un rango especificado. * `search`: Campo para ingresar un término de búsqueda. * `color`: Permite seleccionar un color.

Carlos Ramos

Clase 17 - Calendar

¿Para qué nos sirve el atributo name de la etiqueta <input>?

Nos permite asignar un valor que servirá como identificador de la información que se envíe por medio de dicho input hacia la base de datos.

¿Para qué nos sirve el input de tipo week?

Nos permite crear un campo en el que se nos desplegará un calendario de semanas del año, con el cual el usuario podrá ingresar la información que le están pidiendo llenar.

¿Para qué nos sirve el input de tipo month?

Nos permite crear un campo en el que se desplegará un calendario con los meses del año, con el cual el usuario podrá ingresar la información que le están pidiendo.

¿Para qué nos sirve el input de tipo submit?

Nos permite crear un botón que le permitirá al usuario enviar la información que ha ingresado en el formulario.

¿Qué pasa cuando enviamos información de un formulario usando el input de tipo submit y no hay ningún destino al cual enviar?

La información enviada aparecerá en la ruta de la página web.

¿Qué significa comentar nuestro código?

Nos permite crear texto que no se va a ver reflejado en el navegador pero que sí permanecerá en nuestro archivo.

¿Cómo podemos crear un comentario en HTML?

Lo podemos hacer con la siguiente sintaxis.

<!-- Comentario -->

¿Qué usos le podemos dar a los comentarios?

Los podemos usar como instrucciones y explicaciones del funcionamiento de un bloque de código.
Eliminar temporalmente un bloque de código.

¿Para qué nos sirve el input de tipo datetime-local?

Nos permite crear un campo en el que podemos ingresar la siguiente información:
Fecha (día, mes y año).
Hora.

YERALDINE YASMIN DIOS

El atributo NAME viene ha ser el nombre del parámetro o argumento que se envían al momento de hacer clic en el BOTÓN SUBMIT del formulario, cada parámetro se envía con su respectivo valor.

Alex Almeida

Está mal, la etiqueta label tiene etiqueta de cierre, y entre ellas, se pone el nombre de lo que se quiiere preguntar. NO es necesario poner span.

Jessica Mori Guerra

para poner como comentarios me salió con shift+alt+a

candelario guadalupe cajun sanchez

Hola Gente soy nuevo aqui

Andres Badillo

Calendario - Google Chrome 10_03_2022 8_12_31 p. m. (3).png

SsimorPro

Input types

Compañeros les comparto los principales tipos de inputs que se utilizan.

Referenciado de: https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html

Cesar Qui

Atajos para MacOS

Alejandro José Díaz Beltrán

Me agrada que todo este curso sea semántico, en muchos cursos hacen todo con un div

Karen Jazmin Zepeda Alvarez

En la versión actualizada VSCode 1.27.2 la abreviatura Alternar bloquear comentario es:

Alt + Shfit + A

Miguel Lopez Chan

Para comentar el código en Windows 10 pueden usar:
Alt + Shift + A

Keiner Elias Leal

oigan para que se les sea de ayuda en windows para comentar es ctrrl+/, en linux es ctrl+/ y shift+ctrl+/ y por ultimo en mac es cmd en vez de ctrl.

PD:espero les sirva yo me complique un poco en ese pedaso

Rony Porraz Vargas

Si quieren modificar multiples variables o texto al mismo tiempo seleccionan la palabra y CTRL + SHIFT + L

Pablo Aquino

Para generar un calendario, podemos hacer uso del tipo datetime-local, aunque también podemos hacer uso de las etiquetas de time, date, week y month.
la etiqueta submit, para enviar los datos.

Faustino Correa Muñoz

El type datetime-local no funciona en firefox, pero lo probé en edge y sí funciona jaja me falló mi navegador de confianza

José Antonio Argüello Palacios

En Firefox no funcionan algunas etiquetas :C

joeltorres

Para comentar en VSCODE ahora es con : ALT + SHIFT + A

Michael Steven Viloria García

es cosa mia o esta clase y la siguiente son las mismas?

Hernan Camilo Rodriguez Jimenez

También para hacer comentarios simplemente se puede usando
<!-- al colocarlo se autocompleta y queda para agregar el comentario que se desee.

<!---->

Jaime Andres Restrepo Cardona

<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Calendario</title>
</head>
<body>
<h1>Calendario</h1>
<h2>Forma Compleja de hacer un calendario</h2>
<form action="">
<label for=“hora”>
<span>Hora</span>
<input type=“time” id=“hora” name=“hora”><!–Name se utiliza para darle un nombre aal campo enviado–>
</label>

    <label for="dia">
        <span>Dia</span>
        <input type="date" id="dia"  name="dia"><!--Name se utiliza para darle un nombre aal campo enviado-->
    </label>

    <label for="semana">
        <span>Semana</span>
        <input type="week" id="semana"  name="semana"><!--Name se utiliza para darle un nombre aal campo enviado-->
    </label>

    <label for="mes">
        <span>Mes</span>
        <input type="month" id="mes"  name="mes"><!--Name se utiliza para darle un nombre aal campo enviado-->
    </label>

    <input type="submit"> <!--Boton de envio-->
</form>

<h2>Forma Sencilla de hacer un Calendario</h2>

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

<h2>aqui se puede ver todos los Tipos de inputs</h2>
    <p><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input" target="_blank"><button>Tipos de inputs</button></a></p>

</body>
</html>

Alejandro Ramírez

hace un año

Screenshot 2023-08-29 at 4.12.37 PM (1).png

Saeta Flórez

Para cometarios en MX linux (Debian) es CTRL SHIFT 7

mundial andrs

lo logre. para comentar a mi me funciono ctrl+}

Ricardo Alfonso Chavez Vilcapoma

La diferencia de input type=“submit” y button es que a button se le puede agregar más etiquetas dentro y por ende se puede estilizar mejor

Camilo Pacheco Tomala

Lo hice de esta manera, usando diferente tipos de input

Keyla Conde Sánchez

<I’m learning a lot! />

Carlos Alfonso Romero Muñoz

algunos tipos de input <input type=“button”> <input type=“checkbox”> <input type=“color”> <input type=“date”> <input type=“datetime-local”> <input type=“email”> <input type=“file”> <input type=“hidden”> <input type=“image”> <input type=“month”> <input type=“number”> <input type=“password”> <input type=“radio”> <input type=“range”> <input type=“reset”> <input type=“search”> <input type=“submit”> <input type=“tel”> <input type=“text”> <input type=“time”> <input type=“url”> <input type=“week”>

Alejandro Reyes

Aprendido en clase.💚

Uriel Solis Salinas

Apuntes de la clase:

<body>
    <form action="">
        <label for="hora">
            <span>Hora</span>
            <input type="time" id="hora" name="hora"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="dia">
            <span>Día</span>
            <input type="date" id="dia" name="dia"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="semana">
            <span>Semana</span>
            <input type="week" id="semana" name="semana"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <label for="mes">
            <span>Mes</span>
            <input type="month" id="mes" name="mes"> <!-- el atributo name tiene que ser el mismo que el for del label y el id del input -->
        </label>
        <input type="submit" name="" id=""> <!-- El input submit es un boton para enviar los datos del formulario -->
    </form>
    <br>
    <!-- Otra forma de hacer el Calendario -->
    <form action="">
        <label for="calendario">
            <span>Calendario</span>
            <input type="datetime-local" name="calendario" id="calendario"> <!-- El atributo datetime-local lo que hace es nos da la fecha 
                y el tiempo del área local para poder -->
        </label>
        <input type="submit">
    </form>
</body>

Captura de pantalla 2022-07-19 221231.png

Nicolle Sierra Sanchez

Yasmil Gonzalez

Luis Kennedy Saavedra Fuentes

Atributos de type
type
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo. Los posibles valores son:
button: Botón sin un comportamiento específico.
checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado. También se puede usar el atributo indeterminate (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).
color: HTML5 Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto (más información).
date: HTML5 Control para introducir una fecha (año, mes y día, sin tiempo).
datetime: HTML5 Deprecated Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo), basado en la zona horaria UTC. Esta característica ha sido removida de WHATWG HTML.
datetime-local: HTML5 Control para introducir fecha y hora, sin zona horaria específica.
email: HTML5 Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
file: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para definir los tipos de archivo que el control podrá seleccionar.
hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
image: Botón de envío de formulario con gráfico. Se debe usar el atributo src para definir el origen de la imagen y el atributo alt para definir un texto alternativo. Se puede usar los atributos height y width para definir el tamaño de la imagen en píxeles.
month: HTML5 Control para introducir un mes y año, sin zona horaria específica.
number: HTML5 Control para introducir un número de punto flotante.
password: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo maxlength para especificar la longitud máxima del valor que se puede introducir.
radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo “grupo de botones radio”. Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
range: HTML5 Control para introducir un número cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo:
min: 0
max: 100
value: min + (max - min) / 2, o min si max es menor que min
step: 1
reset: Botón que restaura los contenidos de un formulario a sus valores predeterminados.
search: HTML5 Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.
submit: Botón que envía el formulario.
tel: HTML5 Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en este control. Las pseudo-clases CSS :valid y :invalid son aplicadas segun corresponda.
text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.
time: HTML5 Control para introducir un valor de tiempo sin zona horaria específica.
url: HTML5 Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en el control. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
week: HTML5 Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica.

miller hurtado toro

en windows 10 para comentar y quitar los comentarios CONTROL + /

Gustavo Pú

No sabia de los type que usó el profe, esta genial

Misael Gomez

Para comentar tambien puedes hacerlo con

Ctrl + k + c

…
Para des-comentar con

Ctrl + k + u

Borys Jair Castillo Palacios

—I’m trying to check some input types that they haven’t worked in Firefox browser, but in chrome does, it looks like the video. Could someone tell me how can I solve this issue? Thanks. I’d really appreciate your help.
Chrome

Mozilla

Nonetheless, I checked the Firefox browser would be up to date.

This is my form code

<form>
    <label for="hour">
        <span>Hour</span>
        <input type="time" id="hour" name="hour"/>
    </label>
    <label for="day">
        <span>Day</span>
        <input type="date" id="date" name="date"/>
    </label>
    <label for="week">
        <span>Week</span>
        <input type="week" id="week" name="week"/>
    </label>
    <label for="month">
        <span>Month</span>
        <input type="month" id="month" name="month"/>
    </label>
    <input type="submit">
</form>

Cristian Felipe Espinosa Barajas

Estoy por estos lares por el #PlatziChallenge y no tenia idea de la cantidad que funcionalidades que uno se pierde por tomar cursos rápidos como Aprende HTML en 30 minutos xd.
Es muy gratificante caer en cuenta de estas cosas, gracias Diego.

Daniela Castro

no me funcionó el cmd+alt+7 en mi mac, tuve que hacerlo manual

Luis Wuilfredo Blanco Delgado

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

Atajos de teclado para linux en vscode

Jonatan Josue Murcia Acuña

En linux para comentar se puede usar:

CTRL + A : Comentar un bloque de codigo (Varias lineas)
CTRL + / : Comentar una sola linea de codigo

Ranulfo Fabián MorenoBello Salgado

Otra forma de comentar en VSC es usando el comando ctrl + }

simplemente se selecciona el area y se usa el comando y para descomentar es el mismo (igualmente se selecciona)
Esto es por si no les sirve el comando propuesto por el profe.
Comentar es sumamente util.

Carlos Daniel Revetti Narvaez

Comentar en VS Code:
Para aprender a comentar en VS Code te recomiendo primero probar con una linea y una vez lo domines comentar lo que desees dejar a un lado en tu código.

Mantén presionado la tecla control (Ctrl).
Sin dejar de presionar Ctrl presionas la tecla K.
Después de presionar la tecla K presionas la tecla U.

Una vez comentado te aparecerán los símbolos ( <!– ) como apertura y ( –> ) como cierre de comentario.

Nota: No es necesario sombrear o seleccionar el texto para una linea.

Andres Salazar

El resumen del código en clase con algunos añadidos

Formulario con calendario “manual” y mas específico

<form action="">
	<label for="hora"><span>Hora</span></label>
	<input type="time" id="hora" name="hora" />
	<!--
name sirve para identificar el dato que se envía desde un formulario similar a las variables. Ej hora="15:36"
-->
	<label for="dia"><span>Día</span></label>
	<input type="date" id="dia" name="dia" required />

	<label for="semana"><span>Semana</span></label>
	<input type="week" id="semana" name="semana" />
	<!--
El tipo week muestra un calendario donde se puede seleccionar la semana de un año al dar click sobre un día o los espacios para colocar el número de la semana y el año.
-->
	<label for="mes"><span>Mes</span></label>
	<input type="month" id="mes" name="mes" />
	<!--
El tipo week muestra un calendario donde se puede seleccionar la semana de un año al dar click sobre un día o los espacios para colocar el número de la semana y el año.
-->
	<input type="submit" value="Solicitar" />
	<!--
El tipo submit muestra un botón que realiza el envío de datos a donde apunta el atributo "action" de la etiqueta form,
value sirve para modificar el texto predeterminado dentro del boton de envío
-->
</form>

Formulario con calendario sencillo

<form action="">
	<label for="Calendario"><span>Calendario</span> </label>
	<input type="datetime-local" id="calendario" name="calendario" />
	<input type="submit" value="Solicitar" />
	<!--
El tipo datetime-local muestra un calendario con horario
-->
</form>

user_deleted_2244058

que gran tip lo de comentar, yo lo hacia antes de una manera manual

Armando Sueños

Fragmento de codigo en modo comentar (para windows 10) teclas: Ctrl+K y luego Ctrl+C.

Julian David Alzate Cuervo

Aunque estamos viendo algo básico por ahora, me parece genial recordar toda esta información, para aplicar a nuevos proyectos

Daniel Afanador

Noté que en Firefox no sale el menú desplegable para cada campo. Creí que había algún error con el código, pero en Chrome confirmé que estaba todo en orden.

Daniel Afanador

Para comentar en Mac, prueben:

cmd + /

Jose Antonio Rojas Ollarves

Intencionalmente pense, de seguro se llama week y si se llama asi XD

Jose Antonio Rojas Ollarves

Coloque el submit, pero en vez de enviar me sale un mensaje que dice “Enviar consulta” eso es algo nuevo?

Jhon Deiby Salazar Rayo

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

Rommel Juarez

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

Uso de atributo Name

SebastianTuquerrez Gomez

<code> 
<form action="">
        <label for="hora">
            <span>Hora</span>
            <input type="time" name="hora" id="hora" />
        </label>
        <h1>                </h1>
        <label for="dia">
            <span>Dia</span>
            <input type="date" name="dia" id="dia">
        </label>
        <h1>                </h1>
        <label for="semana">
            <span>Semana</span>
            <input type="week" name="semana" id="semana">
        </label>
        <h1>                </h1>
        <label for="mes">
            <span>Mes</span>
            <input type="month" name="mes" id="mes">
        </label>
        <h1>                </h1>
        <input type="submit" name="" id="">
    </form>

David Ramirez Rodriguez

En atom para windows 10, para convertir el codigo en comentarios es:

CTRL + Shift + 7

Diego Fernando Torres Coy

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, inictial-scale= 1.0"/>
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
      <form action="">
        <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>Semana</span>
          <input type="month" id="mes" name="mes"/>
        </label>
        <input type="submit"/>
      </form>
    
    </main>
    <footer></footer>
  </body>
</html>

Donny Daniel Vásquez Ramos

console.log("Excelente!");

Yimmy Cruz

Para comentar en Windows 10:
(Ctrl + Shift + 7) OR (Ctrl + /)

Axcel Javier Rincón Gomez