freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-buildin.../60fab9f17fa294054b74228c.md

---
id: 60fab9f17fa294054b74228c
title: Step 31
challengeType: 0
dashedName: step-31
---

# --description--

Passiamo all'ultimo `fieldset`. Cosa succede se vuoi consentire a un utente di caricare un'immagine profilo?

Beh, il valore `file` delll'attributo type di `input` ti permette esattamente di fare questo. Aggiungi un elemento `label` con il testo `Upload a profile picture:` e aggiungi un `input` che accetta il caricamento di un file.

# --hints--

Dovresti aggiungere un elemento `label` con il testo `Upload a profile picture:`.

```js
assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);
```

Dovresti annidare un elemento `input` all'interno dell'elemento `label`.

```js
assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));
```

Dovresti assegnare all'elemento `input` un attributo `type` con il valore `file`.

```js
assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');
```

# --seed--

## --seed-contents--

```html
<!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'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions">
          <input id="terms-and-conditions" 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>

      </fieldset>
--fcc-editable-region--
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
```

```css
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}

```
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`---`
			`id: 60fab9f17fa294054b74228c`
chore(i18n,learn): processed translations (#48364) 2022-11-01 14:06:22 +00:00			`title: Step 31`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`challengeType: 0`
chore(i18n,learn): processed translations (#48364) 2022-11-01 14:06:22 +00:00			`dashedName: step-31`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`---`

			`# --description--`

			Passiamo all'ultimo `fieldset`. Cosa succede se vuoi consentire a un utente di caricare un'immagine profilo?

			Beh, il valore `file` delll'attributo type di `input` ti permette esattamente di fare questo. Aggiungi un elemento `label` con il testo `Upload a profile picture:` e aggiungi un `input` che accetta il caricamento di un file.

			`# --hints--`

			Dovresti aggiungere un elemento `label` con il testo `Upload a profile picture:`.

			```js
			`assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);`
			```

			Dovresti annidare un elemento `input` all'interno dell'elemento `label`.

			```js
			`assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));`
			```

			Dovresti assegnare all'elemento `input` un attributo `type` con il valore `file`.

			```js
			`assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');`
			```

			`# --seed--`

			`## --seed-contents--`

			```html
			`<!DOCTYPE html>`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`<html lang="en">`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`<head>`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`<meta charset="UTF-8">`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`<title>Registration Form</title>`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`<link rel="stylesheet" href="styles.css" />`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`</head>`
			`<body>`
			`<h1>Registration Form</h1>`
			`<p>Please fill out this form with the required information</p>`
chore(i18n,learn): processed translations (#48364) 2022-11-01 14:06:22 +00:00			`<form method="post" action='https://register-demo.freecodecamp.org'>`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`<fieldset>`
chore(i18n,learn): processed translations (#47421) 2022-09-01 18:32:36 +00:00			`<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>`
			`<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>`
			`<label for="email">Enter Your Email: <input id="email" type="email" required /></label>`
			`<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`</fieldset>`
			`<fieldset>`
chore(i18n,learn): processed translations (#47421) 2022-09-01 18:32:36 +00:00			`<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>`
			`<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>`
			`<label for="terms-and-conditions">`
			`<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`</label>`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`</fieldset>`
			`--fcc-editable-region--`
			`<fieldset>`

			`</fieldset>`
			`--fcc-editable-region--`
			`<input type="submit" value="Submit" />`
			`</form>`
			`</body>`
			`</html>`
			```

			```css
			`body {`
			`width: 100%;`
			`height: 100vh;`
			`margin: 0;`
			`background-color: #1b1b32;`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`color: #f5f6f7;`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`}`

			`label {`
chore(i18n,learn): processed translations (#47114) 2022-08-02 11:46:54 +00:00			`display: block;`
			`margin: 0.5rem 0;`
chore(i18n,learn): processed translations (#46119) 2022-05-23 14:21:03 +00:00			`}`

			```