2.3 KiB
id | title | challengeType | dashedName |
---|---|---|---|
60f80e0081e0f2052ae5b505 | Step 16 | 0 | step-16 |
--description--
Specificare l'attributo type
di un elemento form è importante per far sì che il browser sappia con che tipo di dati ha a che fare. Se il type
non è specificato, il browser userà il valore predefinito text
.
Assegna ai primi due elementi input
un attributo type
con il valore text
, al terzo un attributo type
con il valore email
e al quarto un attributo type
con il valore password
.
Il valore email
assegnato all'attributo type, permette di inserire solo e-mail contenenti un carattere @
e un carattere .
. Il valore password
dell'attributo type nasconde l'input e avvisa se il sito non utilizza HTTPS.
--hints--
Dovresti assegnare al primo elemento input
un attributo type
con il valore text
.
assert.equal(document.querySelector('input')?.type, 'text');
Dovresti assegnare al secondo elemento input
un attributo type
con il valore text
.
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
Dovresti assegnare al terzo elemento input
un attributo type
con il valore email
.
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
Dovresti assegnare al quarto elemento input
un attributo type
con il valore password
.
assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
--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 /></label>
<label>Enter Your Last Name: <input /></label>
<label>Enter Your Email: <input /></label>
<label>Create a New Password: <input /></label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>
<fieldset></fieldset>
</form>
</body>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}