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

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

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

Χρησιμοποιήστε το στοιχείο <form> για να χειρίζεστε τις εισαγωγές. Μπορείτε να βρείτε περισσότερες πληροφορίες στο μάθημά μας για το PHP.

Ότε προσθέτουμε ελέγχους εισαγωγής για κάθε πεδίο:

<form action="/action_page.php">
  <h2>Register Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </div>
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>
  <button type="submit" class="btn">Register</button>
</form>

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

* {περιλαμβάνει κουτί: κουτί;}
/* ρύθμιση στυλ του κουτιού εισαγωγής */
.input-container {
  προσκόλληση: σκληρό;
  πλάτος: 100%;
  απόσταση κάτω: 15px;
}
/* ρύθμιση στυλ του εικονιδίου φόρμας */
.icon {
  παράθεση: 10px;
  υπόβαθρο: dodgerblue;
  χρώμα: λευκό;
  ελάχιστο πλάτος: 50px;
  αξιόριστο κείμενο: κέντρο;
}
/* ρύθμιση στυλ του πεδίου εισαγωγής */
.input-field {
  πλάτος: 100%;
  παράθεση: 10px;
  κασκήλες: δεν υπάρχει;
}
.input-field:focus {
  περίγραμμα: 2px αλυσίδα dodgerblue;
}
/* ρύθμιση στυλ του κουμπιού υποβολής */
.btn {
  χρώμα υποβάθρου: dodgerblue;
  χρώμα: λευκό;
  παράθεση: 15px 20px;
  περίγραμμα: δεν υπάρχει;
  σφίγγτρος: σύνδεσμος;
  πλάτος: 100%;
  διαφάνεια: 0.9;
}
.btn:hover {
  διαφάνεια: 1;
}

Δοκιμάστε το προσωπικά

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

Εκμάθηση:Φόρμα HTML

Εκμάθηση:Φόρμα CSS

Εκμάθηση:CSS Flexbox