106 lines
3.5 KiB
Markdown
106 lines
3.5 KiB
Markdown
---
|
||
id: 587d778b367417b2b2512aa8
|
||
title: Додайте доступне поле для вибору дати
|
||
challengeType: 0
|
||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||
forumTopicId: 301008
|
||
dashedName: add-an-accessible-date-picker
|
||
---
|
||
|
||
# --description--
|
||
|
||
Форми часто містять поле `input`, яке можна використовувати, щоб створити декілька різних елементів керування формою. Атрибут `type` на цьому елементі позначає, який різновид елементу `input` буде створений.
|
||
|
||
Ви могли помітити типи введення `text` і `submit` у попередніх завданнях; HTML5 запропонував опцію, щоб вказати поле `date`. Залежно від підтримки браузера, поле вибору дати з'являється в полі `input`, коли воно у фокусі, що спрощує заповнення форми для всіх користувачів.
|
||
|
||
У старих браузерах за замовчуванням буде відтворюватися тип `text`, тож варто показати користувачам очікуваний формат дати в `label` або тексті `placeholder` про всяк випадок.
|
||
|
||
Наприклад:
|
||
|
||
```html
|
||
<label for="input1">Enter a date:</label>
|
||
<input type="date" id="input1" name="input1">
|
||
```
|
||
|
||
# --instructions--
|
||
|
||
Кіт Кампер організовує турнір у Mortal Kombat і хоче опитати своїх супротивників, щоб визначити найкращу дату. Додайте теґ `input` з атрибутом `type` для `date`, атрибут `id` для `pickdate` і атрибут `name` для `date`.
|
||
|
||
# --hints--
|
||
|
||
Ваш код має додати один теґ `input` для поля вибору дати.
|
||
|
||
```js
|
||
assert($('input').length == 2);
|
||
```
|
||
|
||
Ваш теґ `input` повинен містити атрибут `type` зі значенням `date`.
|
||
|
||
```js
|
||
assert($('input').attr('type') == 'date');
|
||
```
|
||
|
||
Ваш теґ `input` повинен містити атрибут `id` зі значенням `pickdate`.
|
||
|
||
```js
|
||
assert($('input').attr('id') == 'pickdate');
|
||
```
|
||
|
||
Ваш теґ `input` повинен містити атрибут `name` зі значенням `date`.
|
||
|
||
```js
|
||
assert($('input').attr('name') == 'date');
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<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--
|
||
|
||
```html
|
||
<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>
|
||
```
|