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

2.1 KiB

id title challengeType dashedName
60f81167d0d4910809f88945 Step 20 0 step-20

--description--

Il primo elemento input con l'attributo type con il valore submit viene automaticamente impostato per inviare l'elemento genitore form più vicino.

Per gestire l'invio del modulo, dopo l'ultimo elemento fieldset, aggiungi un elemento input con un attributo type con il valore submit e un attributo value con il valore Submit.

--hints--

Dovresti aggiungere l'elemento input dopo l'ultimo elemento fieldset.

assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');

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

assert.exists(document.querySelector('fieldset + input[type="submit"]'));

Dovresti assegnare all'elemento input un attributo value con il valore Submit.

assert.exists(document.querySelector('fieldset + input[value="Submit"]'));

--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>

--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;
}