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

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

Απανταγωνιστικό γραμμικό φόρμα

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

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

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

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

Χρησιμοποιήστε το στοιχείο <form> για την επεξεργασία εισόδου. Μπορείτε να βρείτε περισσότερες πληροφορίες στο κεφάλαιο PHP μας.

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Εισάγετε email" name="email">
  <label for="pwd">Κωδικός Πρόσβασης:</label>
  <input type="password" id="pwd" placeholder="Εισάγετε κωδικό πρόσβασης" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Ενσωμάτωσή μου
  </label>
  <button type="submit">Υποβολή</button>
</form>

Βήμα 2 - Προσθήκη CSS:

/* Διαμόρφωση στυλ φόρμας - Οριζόντια εμφάνιση στοιχείων */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Προσθήκη κάποιων εξωτερικών χάσεων σε κάθε ετικέτα */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Διαμόρφωση στυλ πεδίου εισαγωγής */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Διαμόρφωση στυλ κουμπιού υποβολής */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Προσθήκη απάντησης - Εμφάνιση των ελέγχων φόρμας κάθετα αντί για οριζόντια σε οθόνες με πλάτος κάτω από 800 εικονοστοιχεία */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

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

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

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

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