---
id: 68ea8fdf2c9b167307e7f671
title: Step 9
challengeType: 0
dashedName: step-9
---

# --description--

Now it is time to add the form elements to collect the parent's information.

Start by adding a `label` element with the text `Parent/Guardian Information: ` and `for` attribute set to `"parent-name"`.

Then, below your `label` element, add an `input` element with the `type` attribute set to `"text"`. The `name` and `id` attributes should be set to `"parent-name"`. The `placeholder` attribute should be set to `"E.g., Nancy Doe"`. Lastly, your `input` should be required. 

# --hints--

You should have a total of three `label` elements on the page.

```js
assert.lengthOf(document.querySelectorAll("label"), 3);
```

Your third `label` element should have the text `Parent/Guardian Information: `. Don't forget the space after the colon.

```js
assert.match(code, /Parent\/Guardian\s+Information:\s+<\/label>/);
```

Your third `label` element should have a `for` attribute.

```js
assert.isTrue(document.querySelector("label:last-of-type")?.hasAttribute("for"));
```

Your third `label` element's `for` attribute should have the value `"parent-name"`.

```js
assert.strictEqual(document.querySelector("fieldset:last-of-type label")?.getAttribute("for"), "parent-name");
```

You should have three `input` elements on the page.

```js
assert.lengthOf(document.querySelectorAll("input"), 3);
```

Your third `input` element should be below your third `label` element.

```js
const fieldsetChildren = [...document.querySelector("fieldset:last-of-type")?.children];
const inputEl = document.querySelector("fieldset:last-of-type input");
const labelEl = document.querySelector("fieldset:last-of-type label");

assert.isBelow(fieldsetChildren.indexOf(labelEl), fieldsetChildren.indexOf(inputEl));
```

Your third `input` element should have a `type` attribute set to `"text"`.

```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("type"), "text");
```

Your third `input` element should have a `name` attribute set to `"parent-name"`.

```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("name"), "parent-name");
```

Your third `input` element should have an `id` attribute set to `"parent-name"`.

```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("id"), "parent-name");
```

Your third `input` element should have a `placeholder` attribute set to `"E.g., Nancy Doe"`.

```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("placeholder"), "E.g., Nancy Doe");
```

Your third `input` element should have a `required` attribute.

```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.isTrue(inputEl?.hasAttribute("required"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Teacher Conference Form</title>
  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <main class="container">
    <h1 class="title center">Parent Teacher Conference Form</h1>
    <p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>

    <form>
      <fieldset>
        <legend>Student Information</legend>
        <label for="student-name">Full Name: </label>
        <input
            type="text"
            name="student-name"
            id="student-name"
            required
            placeholder="E.g., Jane Doe"
          />


        <label for="grade">Student Grade: </label>
        <input
            type="number"
            name="grade"
            id="grade"
            required
            placeholder="E.g., 4"
          />
      </fieldset>

      --fcc-editable-region--
      <fieldset>
        <legend>Parent/Guardian Information</legend>
        
      </fieldset>
      --fcc-editable-region--
    </form>
  </main>
</body>

</html>
```
