ContextQMD
Back to Freecodecamp

Create a Text Field

curriculum/challenges/english/blocks/basic-html-and-html5/bad87fee1348bd9aedf08829.md

latest1.5 KB
Original Source

--description--

Now let's create a web form.

input elements are a convenient way to get input from your user.

You can create a text input like this:

html
<input type="text">

Note that input is a void element.

--instructions--

Create an input element of type text below your lists.

--hints--

Your app should have an input element of type text.

js
assert.isNotEmpty(document.querySelectorAll('input[type=text]'));

--seed--

--seed-contents--

html
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</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>


</main>

--solutions--

html
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</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>
    <input type="text">
  </form>
</main>