Come creare: modulo a comparsa

Come creare un modulo di accesso

Primo passo - Aggiungi HTML:

Usa l'elemento <form> per gestire l'input. Puoi trovarne di più nei nostri Tutorial PHP Per ulteriori informazioni.

<!-- Utilizzato per aprire il modulo a comparsa -->
<button class="open-button" onclick="openForm()">Apri modulo</button>
<!-- Modulo -->
<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Accedi</h1>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Inserisci l'email" name="email" required>
    <label for="psw"><b>Parola chiave</b></label>
    <input type="password" placeholder="Inserisci la password" name="psw" required>
    <button type="submit" class="btn">Accedi</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Chiudi</button>
  </form>
</div>

Secondo passo - Aggiungi CSS:

{box-sizing: border-box;}
/* Utilizzato per aprire il modulo di contatto - fisso nel fondo della pagina */
.open-button {
  colore_di_sfondo: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fisso;
  inferiore: 23px;
  destra: 28px;
  larghezza: 280px;
}
/* 形弹出表单 - predefinito nascosto */
.form-popup {
  display: none;
  position: fisso;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}
/* Aggiungi stili alla contenitore del modulo */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}
/* Campo di input a piena larghezza */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}
/* Esegui alcune operazioni quando il campo di input riceve l'attenzione */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Imposta lo stile per i pulsanti di invio/autenticazione */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}
/* Aggiungi un colore di sfondo rosso al pulsante annulla */
.form-container .cancel {
  background-color: red;
}
/* Aggiungi alcune effetti di hover ai pulsanti */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Passo 3 - Aggiungi JavaScript:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

Prova tu stesso

Pagine correlate

Tutorial:Modulo HTML

Tutorial:Modulo CSS