freeCodeCamp

2.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedc08830	Use HTML5 to Require a Field	0		Использовать HTML5 для запроса поля

Description

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

Instructions

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

Tests

tests:
  - text: Элемент <code>input</code> текста должен иметь <code>required</code> атрибут.
    testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'

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="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

2.4 KiB Raw Blame History Unescape Escape