ContextQMD
Back to Freecodecamp

Step 30

curriculum/challenges/english/blocks/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md

latest2.9 KB
Original Source

--description--

You need to confirm that the user has read the terms and conditions.

Add a label element. Inside the newly created label element add an input element and set the type attribute to checkbox. Make this input element required so users can not sign up without agreeing to the terms and conditions.

Add an id and for attribute with the value terms-and-conditions to the elements for accessibility.

--hints--

You should add an label after the third fieldset element.

js
assert.exists(document.querySelector('fieldset:nth-child(3) + label'));

You should add an input to the label element.

js
assert.exists(document.querySelector('fieldset:nth-child(3) + label > input'));

You should add a type attribute of value checkbox to the input element.

js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input')?.type, 'checkbox');

You should add a required attribute to the input element.

js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input')?.required, true);

The input element should have an id of terms-and-conditions.

js
assert(document.querySelector('fieldset:nth-child(3) + label > input')?.matches('#terms-and-conditions'))

The label element should have a for attribute with a value of terms-and-conditions.

js
assert(document.querySelector('fieldset:nth-child(3) + label')?.matches('label[for="terms-and-conditions"]'))

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label>
      </fieldset>
      <fieldset></fieldset>
--fcc-editable-region--

--fcc-editable-region--
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
css
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}