Πώς να δημιουργήσετε: Έντυπο Εγγραφής

Μάθετε πώς να δημιουργήσετε ένα έντυπο εγγραφής χρησιμοποιώντας CSS.

Εγγραφή

Παρακαλώ συμπληρώστε αυτή τη φόρμα για να δημιουργήσετε έναν λογαριασμό.



Με τη δημιουργία λογαριασμού, δηλώνετε ότι συμφωνείτε με τουςΌροι Χρήσης και Πολιτική Απορρήτου

Try it yourself

Πώς να δημιουργήσετε ένα έντυπο εγγραφής

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

Χρησιμοποιήστε το στοιχείο <form> για την επεξεργασία εισαγωγών. Μπορείτε να μάθετε περισσότερα στο μάθημά μας για PHP.

Στη συνέχεια, προσθέστε ελέγχους εισαγωγής για κάθε πεδίο (μαζί με τις αντίστοιχες ετικέτες):

<form action="action_page.php">
  <div class="container">
    <h1>Εγγραφή</h1>
    <p>Παρακαλώ συμπληρώστε αυτή τη φόρμα για να δημιουργήσετε έναν λογαριασμό.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Εισάγετε Email" name="email" id="email" required>
    <label for="psw"><b>Κωδικός</b></label>
    <input type="password" placeholder="Εισάγετε Κωδικό" name="psw" id="psw" required>
    <label for="psw-repeat"><b>Επανάληψη Κωδικού</b></label>
    <input type="password" placeholder="Επανάληψη Κωδικού" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>Με τη δημιουργία λογαριασμού συμφωνείτε με τους <a href="#">Όρους και Προσωπικότητας</a>.</p>
    <button type="submit" class="registerbtn">Εγγραφή</button>
  </div>
  <div class="container signin">
    <p>Έχετε ήδη λογαριασμό; <a href="#">Σύνδεση</a>.</p>
  </div>
</form>

Δεύτερη Βήμα - Προσθέστε CSS:

* {box-sizing: border-box}
/* Προσθέστε εσωτερικό περιθώριο στο κουτί */
.container {
  padding: 16px;
}
/* Πλήρως πλάτος πεδία εισαγωγής */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Καλύψτε το προεπιλεγμένο στυλ του hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Ρυθμίστε το στυλ του κουμπιού υποβολής/εγγραφής */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* Για να προσθέσετε μπλε χρώμα κειμένου στις συνδέσεις */
a {
  color: dodgerblue;
}
/* Για να ρυθμίσετε το γκρι χρώμα φόντου για το τμήμα "Σύνδεση" και να κεντράρετε το κείμενο */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form