freeCodeCamp/use-html5-to-require-a-field.russian.md at 3c58ec4dadda0a3a0b84711961690d4777da8c70

Files

Randell Dawson 3c58ec4dad fix(learn): updated catphotoapp links (Russian) (#39253 )

2020-07-15 15:24:34 +05:30

3.0 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
bad87fee1348bd9aedc08830	Use HTML5 to Require a Field	0	https://scrimba.com/p/pVMPUv/cMd4EcQ	18360	Использовать HTML5 для запроса поля

Description

Вам могут потребоваться определенные поля формы, чтобы ваш пользователь не смог отправить вашу форму до тех пор, пока он или она корректно не заполнят их. Например, если вы хотите внести требуемое текстовое поле ввода, вы можете просто добавить атрибут required в ваш элемент input , например: <input type="text" required>

Instructions

Добавьте к вашему текстовому полю input атрибут required, чтобы ваш пользователь не мог отправить форму без завершения заполнения этого поля. Затем попробуйте отправить форму без ввода какого-либо текста. Посмотрите, как ваша форма HTML5 уведомляет вас о том, что это поле необходимо.

Tests

tests:
  - text: Your text <code>input</code> element should have the <code>required</code> attribute.
    testString: assert($("input").prop("required"));

Challenge Seed

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
  </form>
</main>

Solution

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" required placeholder="cat photo URL">
    <button type="submit">Submit</button>
  </form>
</main>

3.0 KiB Raw Blame History Unescape Escape