2.2 KiB
2.2 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60f81616cff80508badf9ad5 | Step 18 | 0 | step-18 |
--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>
<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://register-demo.freecodecamp.org'>
--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;
}