---
id: 5ef9b03c81a63668521804e2
title: Hatua ya 54
challengeType: 0
dashedName: step-54
---

# --description--

Fomu kwa kawaida hutumia visanduku vya kuteua (checkboxes) kwa maswali ambayo yanaweza kuwa na jibu zaidi ya moja. Kwa mfano, hapa kuna kisanduku cha kuteua chenye chaguo la `tacos`: `<input type="checkbox"> tacos`.

Chini ya kipengele cha `legend` ulichoongeza hivi punde, ongeza `input` yenye sifa yake ya `type` iliyowekwa kuwa `checkbox` na uipe chaguo la:

`Loving`

# --hints--

Kipengele cha `input` cha kisanduku chako cha kuteua kinapaswa kuwa na tagi ya ufunguzi, lakini si tagi ya kufunga.

```js
assert($('fieldset > input') && !code.match(/<\/input\>/g));
```

Unapaswa kuwa umeongeza kipengele kimoja tu cha ingizo kwa kisanduku chako cha kuteua. Ondoa ziada yoyote.

```js
assert($('fieldset > input').length === 1);
```

Kipengele chako kipya cha `input` lazima kiwe chini ya kipengele cha `legend` chenye maandishi `What's your cat's personality?`. Unazo katika mpangilio mbaya.

```js
const existingLegendElem = $('fieldset > legend')[1];
assert(
  existingLegendElem &&
    existingLegendElem.nextElementSibling.nodeName === 'INPUT'
);
```

Kipengele chako cha kipya cha `input` hakina sifa ya `type`. Hakikisha kuwa kuna nafasi baada ya jina la tagi inayofungua.

```js
assert($('fieldset > input')[0].hasAttribute('type'));
```

Kipengele chako kipya cha `input` kinafaa kuwa na sifa ya `type` yenye thamani ya`checkbox`. Aidha umesahau maandishi, au kuna makosa ya maandishi. Kumbuka kwamba thamani za sifa zinapaswa kuzungukwa na alama za nukuu.

```js
assert(
  $('fieldset > input')[0]
    .getAttribute('type')
    .match(/^checkbox$/i)
);
```

Ingawa umeweka sifa mpya ya kipengele cha `input` ya `type` kuwa `checkbox`, inashauriwa kuzunguka thamani ya sifa kwa alama za nukuu kila wakati.

```js
assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code));
```

Maandishi `Loving` yanapaswa kupatikana moja kwa moja upande wa kulia wa kisanduku chako cha kuteua. Hakikisha kuna nafasi kati ya jina la kipengele na maandishi. Aidha umesahau maandishi, au kuna makosa ya maandishi.

```js
const checkboxInputElem = $('input[type="checkbox"]')[0];
assert(
  checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i)
);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
--fcc-editable-region--
            <legend>What's your cat's personality?</legend>

--fcc-editable-region--
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>
```

