μια φόρμα με στυλιζαρισμένες ετικέτες
Πώς να διαμορφώσετε το στυλ μιας ετικέτας φόρμας με CSS. Ένα στοιχείο φόρμας που χρησιμοποιείται για την επισήμανση των διαφόρων πεδίων και περιοχών εισαγωγής σε μια φόρμα ιστοσελίδας είναι το στοιχείο ετικέτας. Μπορεί να διαμορφωθεί χρησιμοποιώντας κανόνες Cascading Style Sheet.
Βήμα 1
Για να διαμορφώσετε τα στοιχεία ετικέτας με τον τρόπο που εμφανίζονται στην εικόνα στην εισαγωγή, πρέπει να χρησιμοποιήσετε το στοιχείο ετικέτας με το χαρακτηριστικό "for". Επιπλέον, πρέπει να κλείσετε το στοιχείο ετικέτας πριν προσθέσετε το ίδιο το στοιχείο "εισαγωγή". Το HTML για την πλήρη φόρμα που φαίνεται στην εικόνα.
Το βίντεο της ημέρας
Βήμα 2
Για το στυλ των στοιχείων της ετικέτας, έκανα τις ετικέτες να εμφανίζονται ως στοιχεία επιπέδου μπλοκ, τα οποία μετακινήθηκαν προς τα αριστερά. Στη συνέχεια, εκχώρησα ένα πλάτος στις ετικέτες, έτσι ώστε τα πεδία εισαγωγής να βρίσκονται όλα σε ομοιόμορφη απόσταση από τις ετικέτες. Έδωσα ένα χρώμα και έκανα το κείμενο τολμηρό. Χρησιμοποίησα περιεχόμενο που δημιουργήθηκε για να προσθέσω άνω και κάτω τελεία (: ) μετά την ετικέτα. (Η άνω και κάτω τελεία ενδέχεται να μην εμφανίζεται σε κάθε πρόγραμμα περιήγησης.)
Εδώ είναι το CSS:
ετικέτα { χρώμα: #B4886B; βάρος γραμματοσειράς: έντονη γραφή; οθόνη: μπλοκ; πλάτος: 150 px; float: αριστερά; } label: after { content: ": " }
Βήμα 3
Για λόγους πληρότητας, θα σας δείξω επίσης το CSS που χρησιμοποιείται για το στυλ του συνόλου πεδίων, καθώς τα στοιχεία της ετικέτας περικλείονται από ένα σύνολο πεδίων με περίγραμμα.
Εδώ είναι αυτό το CSS:
fieldset { border: 1px solid #CCA383; πλάτος: 400 px; φόντο: #FFE8EF; padding: 3px; } fieldset legend { background: #CCA383; padding: 6px; βάρος γραμματοσειράς: έντονη γραφή; }
Βήμα 4
Θα μπορούσατε να κάνετε πολλά άλλα πράγματα για να διαμορφώσετε τα στοιχεία της ετικέτας. Το παράδειγμά μου είναι μόνο ένας τρόπος να το κάνω.
Η φόρμα HTML
Πράγματα που θα χρειαστείτε
Γνώση εργασίας HTML
Γνώση εργασίας CSS
