curriculum/challenges/english/blocks/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
Now you will add a web form to collect information from users.
The form element is used to get information from a user like their name, email, and other details.
After the Cat Form heading, add a form element.
Your form element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order.
assert(document.querySelector('form') && code.match(/<\/form>/g));
Your form element tags are not in the correct order.
const noSpaces = code.replace(/\s/g, '');
assert(noSpaces.indexOf('<form>') < noSpaces.indexOf('</form>'));
The form element nested in the last section element should be below the h2 element. You have the h2 element and the form element in the wrong order.
assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
The form element should have no content. Remove any HTML elements or text between the form element's tags.
assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com"></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<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>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
--fcc-editable-region--
<h2>Cat Form</h2>
--fcc-editable-region--
</section>
</main>
</body>
</html>