API tools faq
paste
Advertisement
fcamuso

Bootstrap - lezione 8

fcamuso
Jul 21st, 2023
1,261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.81 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <title>Title</title>
  6.   <!-- Required meta tags -->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.  
  10.   <!-- Bootstrap CSS v5.3.0 -->
  11.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  12.        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  13.        crossorigin="anonymous">
  14. </head>
  15.  
  16. <body>
  17.  
  18.   <form class="p-3">
  19.     <fieldset class="form-control-lg">
  20.       <div class="row mb-3">
  21.         <div class="col-1">
  22.           <label for="cognome" class="form-label">LARGE</label>
  23.         </div>
  24.         <div class="col-auto">
  25.           <input type="text" class="form-control" id="cognome">
  26.         </div>
  27.       </div>
  28.    </fieldset>
  29.  
  30.     <fieldset disabled>
  31.       <div class="row mb-3">
  32.         <div class="col-1">
  33.           <label for="nome" class="form-label">Normal</label>
  34.         </div>
  35.         <div class="col-auto">
  36.           <input type="text" class="form-control" id="nome" value="test prova">
  37.         </div>
  38.       </div>
  39.     </fieldset>
  40.    
  41.     <fieldset class="form-control-sm">
  42.       <div class="row mb-3">
  43.         <div class="col-1">
  44.           <label for="cognome_copia" class="form-label">small</label>
  45.         </div>
  46.         <div class="col-auto">
  47.           <input type="text" class="form-control" readonly  value="standard" id="cognome_copia">
  48.         </div>
  49.       </div>
  50.    </fieldset>
  51.  
  52.    <div class="row mb-3">
  53.     <div class="col-auto">
  54.       <select id="provincia" class="form-select form-select-sm">
  55.         <option selected>Scegli una provincia</option>
  56.         <option value="MI">Milano</option>
  57.         <option value="RM">Roma</option>
  58.         <option value="PA">Palermo</option>
  59.       </select>
  60.     </div>
  61.   </div>  
  62.  <br><br><br>
  63.   <div class="form-check">
  64.     <label class="form-check-label" for="check1">C++</label>
  65.     <input class="form-check-input" name="linguaggio" type="checkbox" id="check1">
  66.   </div>
  67.   <div class="form-check">
  68.     <label class="form-check-label" for="check2">Javascript</label>
  69.     <input class="form-check-input" name="linguaggio" type="checkbox" id="check2">
  70.   </div>
  71.   <div class="form-check form-switch">
  72.     <label class="form-check-label" for="check3">Precedenti Esperienze</label>
  73.     <input class="form-check-input"  name="esperienze" type="checkbox" id="check3">
  74.   </div>
  75.  
  76.   <br><br>
  77.   <div class="form-check">
  78.     <label class="form-check-label" for="radio1">M</label>
  79.     <input class="form-check-input" name="sesso" type="radio" id="radio1">
  80.   </div>
  81.   <div class="form-check">
  82.     <label class="form-check-label" for="radio2">F</label>
  83.     <input class="form-check-input" name="sesso" type="radio" id="radio2">
  84.   </div>
  85.  
  86.  
  87.   <br><br>
  88.   <div class="form-check form-check-inline">
  89.     <label class="form-check-label" for="radio3">M</label>
  90.     <input class="form-check-input" name="sesso" type="radio" id="radio3">
  91.   </div>
  92.   <div class="form-check form-check-inline">
  93.     <label class="form-check-label" for="radio4">F</label>
  94.     <input class="form-check-input" name="sesso" type="radio" id="radio4">
  95.   </div>  
  96.  
  97.   <br><br>
  98.   <div class="form-check form-check-reverse">
  99.     <label class="form-check-label" for="radio5">M</label>
  100.     <input class="form-check-input" name="sesso" type="radio" id="radio5">
  101.   </div>
  102.   <div class="form-check form-check-reverse">
  103.     <label class="form-check-label" for="radio6">F</label>
  104.     <input class="form-check-input" name="sesso" type="radio" id="radio6">
  105.   </div>  
  106.  
  107.   <div class="form-floating mb-3">
  108.     <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  109.     <label for="floatingInput">Email</label>
  110.   </div>
  111.   <div class="form-floating">
  112.     <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  113.     <label for="floatingPassword">Password</label>
  114.   </div>
  115.   <br><br>
  116.  
  117.   <div class="input-group mb-3">
  118.     <span class="input-group-text">@</span>
  119.     <input id="user" type="text" class="form-control" placeholder="Username"">
  120.   </div>
  121.  
  122.   <div class="input-group mb-3">
  123.     <span class="input-group-text">$</span>
  124.     <input id="dollaro" type="text" class="form-control">
  125.     <span class="input-group-text">.00</span>
  126.   </div>
  127.  
  128.   <br><br>
  129.   <label for="intervallo" class="form-label">Voto</label>
  130.   <input type="range" class="form-range" min="1" max="10" step="0.5" id="intervallo">
  131. </form>
  132. <br><br>
  133.  
  134. <div class="container">
  135. <form class="row" id="con_validazione" novalidate action="elabora.php">
  136.   <div class="col-md-4">
  137.     <label for="il_nome" class="form-label">Nome</label>
  138.     <input type="text" class="form-control" id="il_nome" value="Sandro">
  139.     <div class="valid-feedback">
  140.       OK!
  141.     </div>
  142.     <div class="invalid-feedback">
  143.       Errore!
  144.     </div>
  145.  
  146.   </div>
  147.   <div class="col-md-4">
  148.     <label for="il_cognome" class="form-label">Cognome</label>
  149.     <input type="text" class="form-control" id="il_cognome" value="Parchielli" required>
  150.     <div class="valid-feedback">
  151.       OK!
  152.     </div>
  153.   </div>
  154.   <div class="col-md-4">
  155.     <label for="username" class="form-label">Username</label>
  156.     <div class="input-group has-validation">
  157.       <span class="input-group-text" id="inputGroupPrepend">@</span>
  158.       <input type="text" class="form-control" id="username" required>
  159.       <div class="invalid-feedback">
  160.         Scegliere uno username.
  161.       </div>
  162.     </div>
  163.   </div>
  164.   <div class="col-md-6">
  165.     <label for="citta" class="form-label">Città</label>
  166.     <input type="text" class="form-control" id="citta" required>
  167.     <div class="invalid-feedback">
  168.       Scegliere una cittá valida
  169.     </div>
  170.   </div>
  171.   <div class="col-md-3">
  172.     <label for="nazione" class="form-label">Nazione</label>
  173.     <select class="form-select" id="nazione" required>
  174.       <option selected disabled value="">Scegli...</option>
  175.       <option>...</option>
  176.     </select>
  177.     <div class="invalid-feedback">
  178.       Scegli una nazione valida.
  179.     </div>
  180.   </div>
  181.   <div class="col-md-3">
  182.     <label for="zip" class="form-label">Zip</label>
  183.     <input type="text" class="form-control" id="zip" required>
  184.     <div class="invalid-feedback">
  185.       Scegli uno zip valido.
  186.     </div>
  187.   </div>
  188.   <div class="col-12">
  189.     <div class="form-check">
  190.       <input class="form-check-input" type="checkbox" value="" id="accettazione" required>
  191.       <label class="form-check-label" for="accettazione">
  192.         Accetto le condizioni
  193.       </label>
  194.       <div class="invalid-feedback">
  195.         Devi accettare per proseguire
  196.       </div>
  197.     </div>
  198.   </div>
  199.   <div class="col-12">
  200.     <button class="btn btn-primary" type="submit">INVIA</button>
  201.   </div>
  202. </form>
  203. </div>
  204.  
  205.  
  206.   <!-- Bootstrap JavaScript Libraries -->
  207.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  208.          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  209.          crossorigin="anonymous"></script>
  210.  
  211.   <script>
  212.     document.getElementById("con_validazione")
  213.      .addEventListener("submit", function(event) {
  214.      
  215.       //ERRATA CORRIGE RISPETTO AL VIDEO
  216.       //resetto lo stato della casella nome per
  217.       //rifare il check sul submit
  218.       const nome = document.getElementById("il_nome");
  219.       nome.classList.remove("is-valid"); nome.classList.remove("is-invalid");
  220.       // *************************************************************
  221.        
  222.       //ERRATA CORRIGE RISPETTO AL VIDEO: aggiungo il controllo customizzato sul nome
  223.       if (!(check_nome(nome) && this.checkValidity() )) {
  224.          event.preventDefault();
  225.           event.stopPropagation();
  226.  
  227.           //ribadisco lo stato dei feedback sul nome causa interferenze con checkValidity
  228.           //diversamente ci sono situazioni in cui rimangono visualizzati sia
  229.           //il messaggio di dato valido sia quello di dato non valido
  230.           check_nome();
  231.         }
  232.    
  233.         this.classList.add('was-validated');
  234.  
  235.       });
  236.  
  237.      
  238.      //ERRATA CORRIGE RISPETTO AL VIDEO: ho creato
  239.      //una funzione di check isolata per poterla
  240.      //richiamare anche al submit (vedi sopra)
  241.       document.getElementById("il_nome")
  242.        .addEventListener("blur", function() {      
  243.         check_nome(this);
  244.      });
  245.  
  246.      
  247.      //questa funzione nel video era in linea nell'addEventListener
  248.      function check_nome(nome)
  249.      {
  250.       //pulisco la classList
  251.       nome.classList.remove("is-valid"); nome.classList.remove("is-invalid");
  252.  
  253.       if(nome.value.length<3)
  254.      {        
  255.        nome.classList.add("is-invalid");
  256.        return false;
  257.      }
  258.      else
  259.      {
  260.        nome.classList.add("is-valid");
  261.        return true;
  262.      }
  263.     }
  264.  
  265.  </script>
  266.  
  267. </body>
  268.  
  269. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!