3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d778b367417b2b2512aa8 | Add an Accessible Date Picker | 0 | Añadir un selector de fecha accesible |
Description
input
, que se puede usar para crear varios controles de formulario diferentes. El atributo de type
en este elemento indica qué tipo de entrada se creará. Puede haber notado el text
y submit
los tipos de entrada en desafíos anteriores, y HTML5 introdujo una opción para especificar un campo de date
. Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de input
cuando está enfocado, lo que facilita el llenado de un formulario para todos los usuarios. Para los navegadores más antiguos, el tipo será el text
predeterminado, por lo que ayuda a mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto de marcador de posición, por si acaso. Aquí hay un ejemplo: <label for = "input1"> Ingrese una fecha: </label>
<input type = "date" id = "input1" name = "input1">
Instructions
input
con un atributo de type
de "fecha", un atributo de id
de "pickdate" y un atributo de name
de "fecha". Tests
tests:
- text: Su código debe agregar una etiqueta de <code>input</code> para el campo selector de fecha.
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>type</code> con un valor de fecha.
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
- text: Su etiqueta de <code>input</code> debe tener un atributo <code>id</code> con un valor de pickdate.
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>name</code> con un valor de fecha.
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
Challenge Seed
<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>
<!-- Add your code below this line -->
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
Solution
// solution required