freeCodeCamp

3.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08835	Create a Set of Checkboxes	0		Criar um conjunto de caixas de seleção

Description

Os formulários geralmente usam checkboxes de checkboxes para perguntas que podem ter mais de uma resposta. Caixas de seleção são um tipo de input Cada uma de suas caixas de seleção pode ser aninhada em seu próprio elemento de label . Ao envolver um elemento de input dentro de um elemento de label , ele associará automaticamente a entrada da caixa de seleção ao elemento de rótulo que a envolve. Todas as entradas da caixa de seleção relacionadas devem ter o mesmo atributo de name . É considerada a melhor prática definir explicitamente o relacionamento entre uma input caixa de seleção e seu label correspondente label definindo o atributo for no elemento label para corresponder ao atributo id do elemento de input associado. Aqui está um exemplo de uma caixa de seleção: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

Instructions

Adicione ao seu formulário um conjunto de três caixas de seleção. Cada caixa de seleção deve estar aninhada em seu próprio elemento label . Todos os três devem compartilhar o atributo do name da personality .

Tests

tests:
  - text: Sua página deve ter três elementos de caixa de seleção.
    testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
  - text: Cada um dos três elementos da caixa de seleção deve estar aninhado em seu próprio elemento <code>label</code> .
    testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
  - text: Certifique-se de que cada um dos elementos da <code>label</code> tenha uma tag de fechamento.
    testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
  - text: Dê a suas caixas de seleção o atributo de <code>name</code> da <code>personality</code> .
    testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'

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">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

3.7 KiB Raw Blame History