3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d778b367417b2b2512aa8 | Add an Accessible Date Picker | 0 | https://scrimba.com/c/cD9DJHr |
Description
input
field, which can be used to create several different form controls. The type
attribute on this element indicates what kind of input will be created.
You may have noticed the text
and submit
input types in prior challenges, and HTML5 introduced an option to specify a date
field. Depending on browser support, a date picker shows up in the input
field when it's in focus, which makes filling in a form easier for all users.
For older browsers, the type will default to text
, so it helps to show users the expected date format in the label or as placeholder text just in case.
Here's an example:
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
Instructions
input
tag with a type
attribute of "date", an id
attribute of "pickdate", and a name
attribute of "date".
Tests
tests:
- text: Your code should add one <code>input</code> tag for the date selector field.
testString: assert($('input').length == 2, 'Your code should add one <code>input</code> tag for the date selector field.');
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
testString: assert($('input').attr('type') == 'date', 'Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.');
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of 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: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
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