25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
2.1 KiB
2.1 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60f81616cff80508badf9ad5 | Step 18 | 0 | step-18 |
--description--
At this point, you should be able to submit the form. However, you might notice not much happens.
To make the form more interactive, add the required attribute to the input elements in the first fieldset.
Now, if you try to submit the form without filling in the required fields, you will see an error message.
--hints--
You should give the first input element a required attribute.
assert.equal(document.querySelector('input')?.required, true);
You should give the second input element a required attribute.
assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
You should give the third input element a required attribute.
assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
You should give the fourth input element a required attribute.
assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
You should not give the submit input a required attribute.
assert.equal(document.querySelector('input[type="submit"]')?.required, false);
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://fcc-registration-form.com'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" /></label>
<label>Enter Your Last Name: <input type="text" /></label>
<label>Enter Your Email: <input type="email" /></label>
<label>Create a New Password: <input type="password" /></label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
<input type="submit" value="Submit" />
--fcc-editable-region--
</form>
</body>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}