---
id: 68ea9f01c51b66b937793611
title: Step 12
challengeType: 0
dashedName: step-12
---

# --description--

Next, add another label with a class of `"contact-method"` and a `for` attribute set to `"phone"`. The label text should be `Phone: `.

Below your `label` element, add a radio button with `id` and `value` attributes set to `"phone"`. The `name` attribute should be set to `"contact-method"` and the class should be set to `"contact-method-radio-btn"`.

# --hints--

You should have two `label` elements in the last `fieldset`.

```js
assert.lengthOf(document.querySelectorAll("fieldset:last-of-type label"), 2);
```

The `label` element should have a class of `"contact-method"`.

```js
assert.exists(document.querySelector("fieldset:last-of-type label.contact-method"));
```

The `label` element's `for` attribute should be set to `"phone"`.

```js
assert.exists(document.querySelector("fieldset:last-of-type label[for='phone']"));
```

The `label` element should have the text `Phone: `.

```js
const label = document.querySelector("fieldset:last-of-type label[for='phone']");
assert.match(label?.innerText, /Phone:\s?/);
```

You should have two `input` elements inside the last `fieldset`.

```js
assert.lengthOf(document.querySelectorAll("fieldset:last-of-type input"), 2);
```

Your `input` element should have a `type` attribute set to `radio`.

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

The `input` element should have an `id` attribute set to `"phone"`.

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

The `input` element should have a `value` attribute set to `"phone"`.

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

The `input` element should have a `name` attribute set to `"contact-method"`.

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

The `input` element should have a class of `"contact-method-radio-btn"`.

```js
assert.exists(document.querySelector("fieldset:last-of-type input[id='phone'].contact-method-radio-btn"));
```

# --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>

      <fieldset>
        <legend>Parent/Guardian Information</legend>
        <label for="parent-name">Parent/Guardian Information: </label>
        <input
            type="text"
            name="parent-name"
            id="parent-name"
            required
            placeholder="E.g., Nancy Doe"
          />
      </fieldset>

      <fieldset>
        <legend>Preferred Contact Method</legend>
        <label class="contact-method" for="email">Email: </label>
        <input
            id="email"
            class="contact-method-radio-btn"
            type="radio"
            name="contact-method"
            value="email"
            checked
          />

        --fcc-editable-region--
        
        --fcc-editable-region--

      </fieldset>
    </form>
  </main>
</body>

</html>
```
