Μάθετε να βελτιώσετε την εμφάνιση του ιστότοπού σας
Η εκμάθηση πώς να μορφοποιείτε μορφές με το CSS είναι ένας πολύ καλός τρόπος για να βελτιώσετε την εμφάνιση του ιστότοπού σας. Οι φόρμες HTML είναι αναμφίβολα από τα πιο άσχημα πράγματα στις περισσότερες ιστοσελίδες. Είναι συχνά βαρετό και χρηστικό και δεν προσφέρουν πολλά στον τρόπο του στυλ.
Με το CSS, αυτό μπορεί να αλλάξει. Ο συνδυασμός του CSS με τις πιο προηγμένες ετικέτες φόρμας μπορεί να προσφέρει κάποιες ωραίες φόρμες.
Αλλάξτε τα χρώματα
Όπως και με το κείμενο, μπορείτε να αλλάξετε τα χρώματα του προσκηνίου και του φόντου των στοιχείων φόρμας.
Ένας εύκολος τρόπος να αλλάξετε το χρώμα φόντου σχεδόν σε κάθε στοιχείο φόρμας είναι να χρησιμοποιήσετε την ιδιότητα χρώματος φόντου στην ετικέτα εισόδου. Για παράδειγμα, αυτός ο κώδικας εφαρμόζει ένα μπλε χρώμα φόντου (# 9cf) σε όλα τα στοιχεία.
είσοδος {
φόντο-χρώμα: # 9cf;
χρώμα: # 000;
}}
Για να αλλάξετε το χρώμα φόντου μόνο για ορισμένα στοιχεία φόρμας, απλώς προσθέστε textarea και επιλέξτε το στυλ. Για παράδειγμα:
εισαγωγή, textarea, επιλέξτε {
φόντο-χρώμα: # 9cf;
χρώμα: # 000;
}}
Βεβαιωθείτε ότι έχετε αλλάξει το χρώμα κειμένου εάν κάνετε το χρώμα του φόντου σας σκοτεινό. Τα αντίθεση χρώματα βοηθούν τα στοιχεία του μορφοτύπου να είναι πιο ευανάγνωστα. Για παράδειγμα, το κείμενο σε σκούρο κόκκινο χρώμα φόντου διαβάζεται πολύ πιο εύκολα αν το χρώμα του κειμένου είναι λευκό. Για παράδειγμα, αυτός ο κώδικας τοποθετεί λευκό κείμενο σε κόκκινο φόντο.
εισαγωγή, textarea, επιλέξτε {
φόντο-χρώμα: # c00;
χρώμα: #fff;
}}
Μπορείτε να βάλετε ακόμη και ένα χρώμα φόντου στην ίδια την ετικέτα φόρμας. Θυμηθείτε ότι η ετικέτα φόρμας είναι ένα στοιχείο μπλοκ , οπότε το χρώμα γεμίζει ολόκληρο το ορθογώνιο, όχι μόνο τις θέσεις των στοιχείων.
Μπορείτε να προσθέσετε ένα κίτρινο φόντο σε ένα στοιχείο μπλοκ για να ξεχωρίσετε την περιοχή, όπως παρακάτω:
μορφή {
χρώμα φόντου: #ffc;
}}
Προσθέστε σύνορα
Όπως και με τα χρώματα, μπορείτε να αλλάξετε τα όρια των διαφόρων στοιχείων φόρμας. Μπορείτε να προσθέσετε ένα μόνο περιθώριο γύρω από ολόκληρη τη φόρμα. Βεβαιωθείτε ότι έχετε προσθέσει την επένδυση ή ότι τα στοιχεία της φόρμας θα μπλοκαριστούν δίπλα στο περίγραμμα.
Ακολουθεί ένα παράδειγμα κώδικα για μαύρο περίγραμμα 1 pixel με 5 pixels padding:
μορφή {
σύνορα: 1px στερεά # 000;
padding: 5px;
}}
Μπορείτε να βάλετε σύνορα γύρω από κάτι περισσότερο από την ίδια τη φόρμα. Αλλάξτε το περίγραμμα των στοιχείων εισόδου για να τα ξεχωρίσετε:
είσοδος {
σύνορα: 2px dashed # c00;
}}
Προσέξτε όταν τοποθετείτε τα σύνορα στα πλαίσια εισαγωγής, καθώς μοιάζουν λιγότερο με κουτιά εισόδου και, στη συνέχεια, κάποιοι άνθρωποι μπορεί να μην συνειδητοποιήσουν ότι μπορούν να συμπληρώσουν τη φόρμα.
Συνδυασμός χαρακτηριστικών στυλ
Συνδυάζοντας τα στοιχεία της φόρμας με τη σκέψη και μερικά CSS, μπορείτε να δημιουργήσετε μια όμορφη φόρμα που συμπληρώνει το σχέδιο και τη διάταξη του site σας.