curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md

---
id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker
challengeType: 0
videoUrl: https://scrimba.com/c/cR3bRbCV
forumTopicId: 301008
localeTitle: Добавить возможность выбора даты
---

## Description
<section id='description'>
Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> &lt;label for = &quot;input1&quot;&gt; Введите дату: &lt;/ label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote>
</section>

## Instructions
<section id='instructions'>
Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата».
</section>

## Tests
<section id='tests'>

```yml
tests:
  - text: Your code should add one <code>input</code> tag for the date selector field.
    testString: assert($('input').length == 2);
  - text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
    testString: assert($('input').attr('type') == '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');
  - text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
    testString: assert($('input').attr('name') == 'date');

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

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

        <!-- Add your code below this line -->


        <!-- Add your code above this line -->

        <input type="submit" name="submit" value="Submit">
      </form>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

```

</div>

</section>

## Solution
<section id='solution'>

```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>&copy; 2018 Camper Cat</footer>
</body>
```

</section>
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								---
 								id: 587d778b367417b2b2512aa8
 								title: Add an Accessible Date Picker
 								challengeType: 0
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								videoUrl: https://scrimba.com/c/cR3bRbCV
 								forumTopicId: 301008
-												Translated and corrected to Russian curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/ (#24211)

* Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md

* Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md

* Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md

* Update add-an-accessible-date-picker.russian.md

* Translateto Russian

* Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md

* Update avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md

* Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md

* Update add-an-accessible-date-picker.russian.md

* Update add-an-accessible-date-picker.russian.md

* Update add-an-accessible-date-picker.russian.md

* Delete .Rhistory

* Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md

* Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md

* Update give-links-meaning-by-using-descriptive-link-text.russian.md

* Update improve-accessibility-of-audio-content-with-the-audio-element.russian.md

* Update improve-chart-accessibility-with-the-figure-element.russian.md

											
										
										
											2018-11-26 17:14:34 +03:00
+								localeTitle: Добавить возможность выбора даты
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								---
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								## Description
 								<section id='description'>
 								Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> &lt;label for = &quot;input1&quot;&gt; Введите дату: &lt;/ label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote>
 								</section>
-												 Translation improvements. (#28491)


											
										
										
											2019-02-21 13:22:42 +02:00
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								## Instructions
 								<section id='instructions'>
 								Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата».
 								</section>
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								## Tests
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								<section id='tests'>
 								```yml
 								tests:
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								  - text: Your code should add one <code>input</code> tag for the date selector field.
 								    testString: assert($('input').length == 2);
 								  - text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
 								    testString: assert($('input').attr('type') == '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');
 								  - text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
 								    testString: assert($('input').attr('name') == 'date');
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
 								```
 								</section>
 								## Challenge Seed
 								<section id='challengeSeed'>
 								<div id='html-seed'>
 								```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>
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								        <!-- Add your code below this line -->
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								        <!-- Add your code above this line -->
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
 								        <input type="submit" name="submit" value="Submit">
 								      </form>
 								    </section>
 								  </main>
 								  <footer>&copy; 2018 Camper Cat</footer>
 								</body>
 								```
 								</div>
 								</section>
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								## Solution
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								<section id='solution'>
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
+								```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>&copy; 2018 Camper Cat</footer>
 								</body>
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								```
-												fix(curriculum): fix challenges for russian language

											
										
										
											2019-08-28 16:26:13 +03:00
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 18:03:03 -04:00
+								</section>