3.2 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60fabf0dd4959805dbae09e6 | Step 28 | 0 | step-28 |
--description--
Aggiungi un altro elemento label dopo il primo, con il testo Input your age (years):. Quindi, annida un input con l'attributo type con il valore number.
Poiché non vogliamo che gli utenti di età inferiore ai 13 anni si registrino, aggiungi un attributo min all'input con il valore 13. Inoltre, possiamo probabilmente presumere che non ci saranno utenti di età superiore ai 120 anni; aggiungi un attributo max con il valore 120.
Ora, se qualcuno tenta di inviare il modulo con valori al di fuori dell'intervallo, verrà visualizzato un avviso e il modulo non verrà inviato. Fai una prova.
--hints--
Dovresti aggiungere un elemento label al terzo fieldset, dopo l'elemento label esistente.
assert.exists(document.querySelector('fieldset:nth-child(3) > label + label'));
Dovresti assegnare all'elemento label il testo Input your age (years):.
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):');
Dovresti assegnare all'elemento label un input con l'attributo type con il valore number.
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]'));
Dovresti assegnare all'elemento input un attributo min con il valore 13.
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13');
Dovresti assegnare all'elemento input un attributo max con il valore 120.
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120');
--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'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
</fieldset>
--fcc-editable-region--
<input type="submit" value="Submit" />
</form>
</body>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}