--- id: 6141fabd6f75610664e908fd title: Step 14 challengeType: 0 dashedName: step-14 --- # --description-- As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements. Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method. # --hints-- You should nest a `form` element within your `main` element. ```js assert.exists(document.querySelector('main > form')); ``` You should nest three `section` elements within your `form` element. ```js assert.equal(document.querySelectorAll('main > form > section')?.length, 3); ``` You should give the `form` element an `action` attribute. ```js assert.notEmpty(document.querySelector('main > form')?.action); ``` You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`. ```js assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); ``` You should give the `form` element a `method` attribute. ```js assert.notEmpty(document.querySelector('main > form')?.method); ``` You should give the `form` element a `method` attribute with a value of `post`. ```js assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); ``` # --seed-- ## --seed-contents-- ```html Accessibility Quiz

HTML/CSS Quiz

--fcc-editable-region--
--fcc-editable-region-- ``` ```css body { background: #f5f6f7; color: #1b1b32; font-family: Helvetica; margin: 0; } header { width: 100%; height: 50px; background-color: #1b1b32; display: flex; } #logo { width: max(100px, 18vw); background-color: #0a0a23; aspect-ratio: 35 / 4; padding: 0.4rem; } h1 { color: #f1be32; font-size: min(5vw, 1.2em); } nav { width: 50%; max-width: 300px; height: 50px; } nav > ul { display: flex; justify-content: space-evenly; } ```