Bootstrap - lezione 7

<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.3.0 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
        crossorigin="anonymous">
</head>

<body>

  <!-- prima form -->
  <form class="p-3 w-25 mx-auto">

  <fieldset disabled>
      <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control"
              id="email" placeholder="name@example.com">
        <div class="form-text">Non cederemo mai a terzi i tuoi dati</div>

      </div>

      <div class="mb-3">
        <label for="textarea" class="form-label">Note</label>
        <textarea class="form-control" id="textarea" rows="3"></textarea>
      </div>
  </fieldset>

  </form>

  <!-- seconda form -->
  <form class="p-3">
    <div class="row mb-3">
      <div class="col-1">
        <label for="cognome" class="form-label">Cognome</label>
      </div>
      <div class="col-auto">
        <input type="text" class="form-control" id="cognome">
      </div>
    </div>

   <div class="row mb-3">
      <div class="col-1">
        <label for="nome" class="form-label">Nome</label>
      </div>
      <div class="col-auto">
        <input type="text" class="form-control" id="nome">
      </div>
    </div>


  </form>

  <!-- terza form -->
  <form class="p-3">
    <div class="row">

      <div class="col-auto">
        <div class="row mb-3">
            <div class="col-auto">
              <label for="cognome" class="form-label">Cognome</label>
            </div>
            <div class="col-auto">
              <input type="text" class="form-control" id="cognome">
            </div>
        </div>
      </div>


      <div class="col-auto">
        <div class="row mb-3">
          <div class="col-auto">
             <label for="nome" class="form-label">Nome</label>
          </div>
          <div class="col-auto">
             <input type="text" class="form-control" id="nome">
          </div>
        </div>
      </div>

    </div>
  </form>


 <br><br>

   <!-- quarta form -->
   <form>
    <div class="row mb-3">

      <div class="col-auto">
        <label class="visually-hidden" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
       </div>

       <div class="col-auto">
        <label class="visually-hidden" for="inputPsw">Password</label>
        <input type="password" class="form-control" id="inputPsw" placeholder="psw">
       </div>


        <div class="col-auto">
          <button type="submit" class="btn btn-primary">Accedi</button>
        </div>

     </div>
   </form>


  <!-- Bootstrap JavaScript Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
          crossorigin="anonymous"></script>

</body>

</html>