2.9 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d778b367417b2b2512aa8 | Agrega un selector de fechas accesible | 0 | https://scrimba.com/c/cR3bRbCV | 301008 | add-an-accessible-date-picker |
--description--
Los formularios suelen incluir el campo input
, que puede usarse para crear diferentes tipos de controles en los formularios. El atributo type
en este elemento indica el tipo de elemento input
a crear.
Puede que hayas visto los tipos de campo text
y submit
en desafíos anteriores. HTML5 además introdujo una opción para especificar un campo date
para fechas. Dependiendo del soporte de los navegadores, un selector de fechas debería aparecer cuando el campo input
esté en foco, y esto hace mucho más sencillo para los usuarios cargar información en el formulario.
Para los navegadores más antiguos, el tipo será por defecto text
, por lo que ayuda a mostrar a los usuarios el formato de fecha(date) esperado en el texto label
o placeholder
por si acaso.
Aquí hay un ejemplo:
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
--instructions--
Camper Cat está organizando un torneo de Mortal Kombat y quiere pedir a los participantes que consideren cuál fecha les resultaría mejor. Agrega una etiqueta input
con un atributo type
de date
, un atributo id
de pickdate
y un atributo name
con valor date
.
--hints--
Tu código debería añadir una etiqueta input
para el campo de selección de fecha.
assert($('input').length == 2);
Tu etiqueta input
debe tener un atributo type
con un valor de date
.
assert($('input').attr('type') == 'date');
Tu etiqueta input
debe tener un atributo id
con un valor de pickdate
.
assert($('input').attr('id') == 'pickdate');
Tu etiqueta input
debe tener un atributo name
con un valor de date
.
assert($('input').attr('name') == 'date');
--seed--
--seed-contents--
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Only change code below this line -->
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
--solutions--
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate" name="date">
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>