Hvordan man opretter: Pop-up formular

Hvordan man opretter en login-formular

Trin 1 - Tilføj HTML:

Brug <form>-elementet til at håndtere input. Du kan lære mere om dette i vores PHP vejledning for mere information.

/* Bruges til at åbne pop-up formular */
<button class="open-button" onclick="openForm()">Åbn formular</button>
/* Form */
<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Log ind</h1>
    <label for="email"><b>E-mail</b></label>
    <input type="text" placeholder="Indtast e-mail" name="email" required>
    <label for="psw"><b>Kodeord</b></label>
    <input type="password" placeholder="Indtast kodeord" name="psw" required>
    <button type="submit" class="btn">Log ind</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Luk</button>
  </form>
</div>

Trin 2 - Tilføj CSS:

{box-sizing: border-box;}
/* Bruges til at åbne kontaktformularen - fastsat i bunden af siden */
.open-button {
  baggrundsfarve: #555;
  farve: hvid;
  marginal: 16px 20px;
  kanter: ingen;
  markør: pegefinger;
  gennemsigtighed: 0.8;
  position: fastsat;
  nedenunder: 23px;
  højre: 28px;
  bredde: 280px;
}
/* Pop-up form - som standard skjult */
.form-popup {
  display: ikke synlig;
  position: fastsat;
  nederst: 0;
  højre: 15px;
  kanter: 3px solid #f1f1f1;
  z-index: 9;
}
/* Tilføj stil til formularkontainer */
.form-container {
  maksbrede: 300px;
  marginal: 10px;
  baggrundsfarve: hvid;
}
/* Inputfelter med fuld bredde */
.form-container input[type=text], .form-container input[type=password] {
  bredde: 100%;
  marginal: 15px;
  marginal: 5px 0 22px 0;
  kanter: ingen;
  baggrund: #f1f1f1;
}
/* Udfør nogle handlinger, når inputfeltet får fokus */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  baggrundsfarve: #ddd;
  kantlinje: ingen;
}
/* Indstil stil til indsendelses-/loginknapper */
.form-container .btn {
  baggrundsfarve: #04AA6D;
  farve: hvid;
  marginal: 16px 20px;
  kanter: ingen;
  markør: pegefinger;
  bredde: 100%;
  marginalbunds: 10px;
  gennemsigtighed: 0.8;
}
/* Tilføj rød baggrundsfarve til annulleringsknappen */
.form-container .cancel {
  baggrundsfarve: rød;
}
/* Tilføj nogle museoverfladeeffekter til knapper */
.form-container .btn:hover, .open-button:hover {
  gennemsigtighed: 1;
}

Tredje trin - Tilføj JavaScript:

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

Prøv det selv

Relaterede sider

Vejledning:HTML formular

Vejledning:CSS formular