How to create: login form

How to create a login form

Πρώτη Βήμα - Προσθήκη HTML:

Add an image in the container and add input controls (with matching labels) for each field. Wrap them in a <form> element to handle input.

You can find more information about our Εκμάθηση PHP Learn more about how to handle input information here.

<form action="action_page.php" method="post">
  <div κλάδα="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>
  <div class="container">
    <label for="uname"><b>Όνομα Χρήστη</b></label>
    <input type="text" placeholder="Εισάγετε Όνομα Χρήστη" name="uname" required>
    <label for="psw"><b>Κωδικός Πρόσβασης</b></label>
    <input type="password" placeholder="Εισάγετε Κωδικό Πρόσβασης" name="psw" required>
    <button type="submit">Σύνδεση</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Μένετε υπενθυμισμένος
    </label>
  </div>
  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Ξεχάσατε <a href="#">παράσυρση κωδικού;</a></span>
  </div>
</form>

Βήμα 2 - Προσθέστε CSS:

/* Form with border */
form {
  border: 3px solid #f1f1f1;
}
/* Full width input box */
input[type=text], input[type=password] {
  πλάτος: 100%;
  padding: 12px 20px;
  παράθεση: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* For all buttons set styles */
button {
  background-color: #04AA6D;
  χρώμα: λευκό;
  παράθεση: 14px 20px;
  παράθεση: 8px 0;
  περίγραμμα: δεν υπάρχει;
  cursor: pointer;
  πλάτος: 100%;
}
/* Προσθήκη εφέ κλικ στο κουμπί */
button:hover {
  διαφάνεια: 0.8;
}
/* Προσθέστε επιπλέον στυλ στο κουμπί ακύρωσης (κόκκινο) */
.ακυρώσιμηκουμπί {
  πλάτος: αυτόματο;
  παράθεση: 10px 18px;
  χρώμα φόντου: #f44336;
}
/* Κεντρώωση εικόνας προφίλ μέσα στο κουτί */
.imgcontainer {
  υπογραφή κειμένου: κέντρο;
  παράθεση: 24px 0 12px 0;
}
/* Εικόνα Προφίλ */
img.avatar {
  πλάτος: 40%;
  ακτίνα: 50%;
}
/* Προσθήκη εσωτερικής παραθέτησης στο κουτί */
.κουτί {
  παράθεση: 16px;
}
/* κείμενο "Ξεχάσατε τον κωδικό πρόσβασης" */
span.psw {
  ποταμός: δεξιά;
  παράθεση: 16px;
}
/* Αλλαγή στυλ span και κουμπιών ακύρωσης σε μικροοθόνη */
@μέσα σε οθόνη και (μέγιστο πλάτος: 300px) {
  span.psw {
    προβολή: block;
    ποταμός: δεν υπάρχει;
  }
  .ακυρώσιμηκουμπί {
    πλάτος: 100%;
  }
}

Προσπαθήστε個人

Πώς να δημιουργήσετε Μοτίβο Είσοδου με Φόρμα

Πρώτη Βήμα - Προσθήκη HTML:

<!-- Κουμπί Ανοίγματος Μοτίβου Είσοδου -->
<button κλικ="document.getElementById('id01').style.display='block'">Είσοδος</button>
<!-- Μοτίβο -->
<div id="id01" κλάδα="modal">
  <span κλικ="document.getElementById('id01').style.display='none'"
κλάδα="close" τίτλος="Κλείσιμο Μοτίβου">×</span>
  <!-- Περιεχόμενο Μοτίβου -->
  <form κλάδα="modal-content animate" δράση="/action_page.php">
    <div κλάδα="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>
    <div class="container">
      <label for="uname"><b>Όνομα Χρήστη</b></label>
      <input type="text" placeholder="Εισάγετε Όνομα Χρήστη" name="uname" required>
      <label for="psw"><b>Κωδικός Πρόσβασης</b></label>
      <input type="password" placeholder="Εισάγετε Κωδικό Πρόσβασης" name="psw" required>
      <button type="submit">Σύνδεση</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Μένετε υπενθυμισμένος
      </label>
    </div>
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Ακύρωση</button>
      <span class="psw">Ξεχάσατε <a href="#">παράσυρση κωδικού;</a></span>
    </div>
  </form>
</div>

Βήμα 2 - Προσθέστε CSS:

/* Μοντέλο (βάθος) */
.modal {
  display: none; /* Προεπιλεγμένο είναι η εξαφάνιση */
  position: fixed; /* Μείνετε στον τόπο σας */
  z-index: 1; /* Στην κορυφή */
  left: 0;
  top: 0;
  width: 100%; /* Πλήρης πλάτος */
  height: 100%; /* Πλήρης ύψος */
  overflow: auto; /* Αν χρειάζεται, ενεργοποιήστε τον αθροισμό */
  background-color: rgb(0,0,0); /* Χρώμα ανακάλυψης */
  background-color: rgba(0,0,0,0.4); /* Μπλε με διαφάνεια */
  padding-top: 60px;
}
/* Περιεχόμενο/κουτί μοδαίου */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% από την κορυφή και κεντρωμένο */
  border: 1px solid #888;
  width: 80%; /* Πιθανώς μερικά ή περισσότερα, ανάλογα με το μέγεθος της οθόνης */
}
/* Κουμπί κλείσιμο */
.close {
  /* Τοποθετείται στην επάνω δεξιά γωνία του μοδαίου */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
/* Κουμπί κλείσιμο κατά την αναζήτηση */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
/* Προσθήκη κινήσεων κλιμάκωσης */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

Συμβουλή:Μπορείτε επίσης να χρησιμοποιήσετε κώδικα JavaScript για να κλείσετε το μοδαίο κάνοντας κλικ σε περιοχές εκτός του περιεχομένου του μοδαίου (και όχι μόνο χρησιμοποιώντας το κουμπί "x" ή "ακύρωση"):

<script>
// Αποκτά τη μορφή
var modal = document.getElementById('id01');
// Όταν ο χρήστης κάνει κλικ σε οποιαδήποτε άλλη τοποθεσία από το μοδαίο, το κλείνει 
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Προσπαθήστε個人

Σελίδες σχετικές

Εκμάθηση:HTML μορφές

Εκμάθηση:CSS μορφές