Πώς να δημιουργήσετε: Έντυπο Εγγραφής
- Previous page Social login form
- Next page Iconic form
Μάθετε πώς να δημιουργήσετε ένα έντυπο εγγραφής χρησιμοποιώντας CSS.
Πώς να δημιουργήσετε ένα έντυπο εγγραφής
Βήμα 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; }
Related pages
Tutorial:HTML form
Tutorial:CSS form
- Previous page Social login form
- Next page Iconic form