2.3 KiB
2.3 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60f81616cff80508badf9ad5 | Step 21 | 0 | step-21 |
--description--
A questo punto, dovresti essere in grado di inviare il modulo. Tuttavia, come puoi notare, non succede molto.
Per rendere il modulo più interattivo, aggiungi l'attributo required agli elementi input nel primo fieldset.
Ora, se tenti di inviare il modulo senza compilare i campi richiesti, vedrai un messaggio di errore.
--hints--
Dovresti assegnare al primo elemento input un attributo required.
assert.equal(document.querySelector('input')?.required, true);
Dovresti assegnare al secondo elemento input un attributo required.
assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
Dovresti assegnare al terzo elemento input un attributo required.
assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
Dovresti assegnare al quarto elemento input un attributo required.
assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
L'input di submit non dovrebbe avere un attributo required.
assert.equal(document.querySelector('input[type="submit"]')?.required, false);
--seed--
--seed-contents--
<!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'>
--fcc-editable-region--
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
<label for="email">Enter Your Email: <input id="email" type="email" /></label>
<label for="new-password">Create a New Password: <input id="new-password" 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;
}