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

Το CSS ανήκει σε μια μοναδική κατηγορία γλωσσών, γνωστή ως γλώσσα φύλλων στυλ. Χρησιμοποιείται κυρίως για τον καθορισμό της παρουσίασης της ιστοσελίδας σας. Ενώ το HTML σάς επιτρέπει να καθορίσετε πώς πρέπει να δομηθεί η σελίδα σας, είναι το CSS που χρησιμοποιείται για τη διαμόρφωσή της. Διαφορετικά, θα καταλήξετε με έναν αρκετά ελκυστικό ιστότοπο.

Η εστίαση στο CSS είναι ένας από τους καλύτερους τρόπους βελτίωσης της ελκυστικότητας του ιστότοπού σας, ειδικά όταν πρόκειται για την ενίσχυση της εμπειρίας χρήστη. Με αυτόν τον τρόπο, μπορείτε επίσης να αυξήσετε την επισκεψιμότητά σας. Για αρχή, μπορείτε να χρησιμοποιήσετε μια στοιβαγμένη φόρμα.

Τι είναι μια στοιβαγμένη φόρμα;

Μια στοιβαγμένη φόρμα σάς επιτρέπει να δημιουργήσετε μια εξειδικευμένη φόρμα όπου μπορείτε να τοποθετήσετε τις ετικέτες και τις εισόδους σας η μία πάνω στην άλλη, αντί να τις τοποθετήσετε σε οριζόντιο μοτίβο.

Δείτε πώς μπορείτε να το κάνετε.

Κωδικοποιήστε το HTML

Χρησιμοποιήστε το στοιχείο HTML, , για την επεξεργασία των πληροφοριών σας. Προσθέστε ετικέτες για τα σχετικά πεδία και εκχωρήστε τα σχετικά πεδία εισαγωγής. Σε αυτό το παράδειγμα, ζητάμε από τους χρήστες να δώσουν το πλήρες όνομα και τη διεύθυνση ηλεκτρονικού ταχυδρομείου τους με τον τύπο εισαγωγής της φόρμας κείμενο , ενώ δημιουργείται ένα αναπτυσσόμενο μενού μέσω επιλέξτε αναγνωριστικό για να τους βοηθήσουν να επιλέξουν τον κλάδο τους.

  
  
  
  
What Is a Stacked Form?
  
Here's how you create a stacked form.
  
  
Full Name  
  
Email Address  
  
Department  
  
Information Technology  
Customer Support  
Sales

Ωστόσο, η εκτέλεση αυτού του τμήματος κώδικα θα παράγει μόνο μια ήπια μορφή χωρίς να στοιβάζουμε κάθετα τα πεδία. Και εκεί θα πρέπει να προσθέσετε CSS.

πώς να αντικαταστήσετε ένα φόντο στο photoshop

Κωδικοποιήστε το Μέρος CSS

Τώρα, δημιουργήστε ένα ξεχωριστό φύλλο στυλ και προσθέστε το στο HTML σας πριν από την ετικέτα σώματος:

Στη συνέχεια, επιλέξτε το σώμα της HTML, τους τύπους εισαγωγής και το κοντέινερ και μορφοποιήστε τα μέσω CSS. Αυτό θα περιλαμβάνει πειραματισμό με διαφορετικές ιδιότητες CSS, όπως γραμματοσειρά, οικογένεια, πλάτος, επένδυση, περιθώριο, οθόνη, περίγραμμα κ.λπ. και προσθήκη των προτιμώμενων τιμών. Με αυτόν τον τρόπο, θα καταλήξετε με μια στοιβασμένη φόρμα που ταιριάζει στις ακριβείς προτιμήσεις σας. Ιδού ένα παράδειγμα.

  
body {  
font-family: Calibri;  
}  
input[type=text], select {  
width: 25%;  
padding: 12px 20px;  
margin: 8px 10;  
display: list-item;  
border: 4px double #39A9DB;  
border-radius: 8px;  
box-sizing: border-box;  
}  
input[type=submit] {  
width: 25%;  
background-color: #F8E2E6;  
color: #0000FF;  
padding: 12px 18px;  
margin: 20px 0;  
border: none;  
border-radius: 6px;  
cursor: pointer;  
}  
div.container {  
border-radius: 10px;  
background-color: #39A9DB;  
padding: 40px;  
}

Ελέγξτε την έξοδο παρακάτω.

Τώρα μπορείτε να δημιουργήσετε μια στοιβασμένη φόρμα σε CSS

Με αυτό το άρθρο, έχετε μάθει πώς να δημιουργείτε μια στοιβαγμένη φόρμα στο CSS. Με την εξάσκηση, θα μπορείτε να βελτιώσετε τις φόρμες σας και να κάνετε τον ιστότοπό σας πιο φιλικό προς το χρήστη.

Το τηλεχειριστήριο onn roku tv δεν λειτουργεί

Το όνομα του παιχνιδιού προγραμματισμού είναι «εξάσκηση». Βελτιώστε τις δεξιότητές σας CSS μέρα με τη μέρα με εκθεσιακά έργα για να γίνετε ένας κομψός σχεδιαστής Ιστού και πιο αποτελεσματικός προγραμματιστής Ιστού.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

Χρειάζεστε βοήθεια με το CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS για να ξεκινήσετε και, στη συνέχεια, εφαρμόστε τα στις δικές σας ιστοσελίδες.

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
Ανάπτυξη διαδικτύου
CSS

Σχετικά με τον Συγγραφέα Ουσμάν Γκανί(4 άρθρα δημοσιεύθηκαν)

Ο Usman είναι έμπορος περιεχομένου που έχει βοηθήσει αρκετές επιχειρήσεις με οργανική ανάπτυξη σε ψηφιακές πλατφόρμες. Του αρέσει τόσο ο προγραμματισμός όσο και η γραφή, πράγμα που σημαίνει ότι η τεχνική γραφή είναι κάτι που του αρέσει πολύ. Όταν δεν εργάζεται, ο Usman απολαμβάνει να περνάει χρόνο παρακολουθώντας τηλεοπτικές εκπομπές, ακολουθώντας κρίκετ και διαβάζοντας για αναλύσεις δεδομένων.

Περισσότερα από τον Usman Ghani

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή