4.7 KiB
4.7 KiB
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| bad87fee1348bd9aedf08834 | Create a Set of Radio Buttons | 0 | Criar um conjunto de botões de rádio |
Description
radio buttons de radio buttons para perguntas nas quais deseja que o usuário só forneça uma resposta dentre várias opções. Botões de rádio são um tipo de input . Cada um dos seus botões de opção pode ser aninhado em seu próprio elemento de label . Ao envolver um elemento de input dentro de um elemento de label , ele associará automaticamente a entrada do botão de opção ao elemento de rótulo em torno dele. Todos os botões de opção relacionados devem ter o mesmo atributo de name para criar um grupo de botões de opção. Ao criar um grupo de rádio, a seleção de um único botão de opção desmarcará automaticamente os outros botões dentro do mesmo grupo, garantindo que apenas uma resposta seja fornecida pelo usuário. Aqui está um exemplo de um botão de opção: <label>É considerado uma boa prática definir um atributo
<input type = "radio" name = "interior-exterior"> Interior
</ label>
for no elemento label , com um valor que corresponda ao valor do atributo id do elemento input . Isso permite que tecnologias assistivas criem um relacionamento vinculado entre o rótulo e o elemento de input filho. Por exemplo: <label for = "indoor">
<input id = "indoor" type = "rádio" name = "interior-exterior"> Interior
</ label>
Instructions
indoor e o outro deve ter a opção de outdoor . Ambos devem compartilhar o atributo name de indoor-outdoor para criar um grupo de rádio. Tests
tests:
- text: Sua página deve ter dois elementos de botão de opção.
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
- text: Dê aos seus botões de rádio o atributo <code>name</code> de <code>indoor-outdoor</code> .
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
- text: Cada um dos seus dois elementos de botão de opção deve ser aninhado em seu próprio elemento de <code>label</code> .
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button 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: Um de seus botões de rádio deve ter o rótulo <code>indoor</code> .
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
- text: Um de seus botões de rádio deve ter o rótulo <code>outdoor</code> .
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
- text: Cada um dos seus elementos de botão de opção deve ser adicionado na tag de <code>form</code> .
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
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" required>
<button type="submit">Submit</button>
</form>
</main>
Solution
// solution required