Πώς να Tame Φόρμες στο Web Design
Τα έντυπα θεωρούνται συχνά ένα από τα πιο επώδυνα στοιχεία HTML που προγραμματίζονται. Αλλά ο σχεδιασμός και η ανάπτυξη της φόρμας έχει προχωρήσει με άλματα. δεν είναι τόσο δύσκολο όσο ήταν κάποτε.
Τούτου λεχθέντος, ενώ η βιομηχανία έχει σημειώσει τεράστια πρόοδο, υπάρχουν ακόμη ορισμένα εμπόδια. Στο τέλος, είναι δυνατές μορφές εξημέρωσης. Χρειάζεται λίγη δουλειά.
Σε αυτήν την ανάρτηση, θα ρίξουμε μια ματιά σε ορισμένα από τα πιο χρησιμοποιημένα στοιχεία ελέγχου φόρμας και σε διάφορα εργαλεία και πρόσθετα που θα σας βοηθήσουν στην ανάπτυξη των φορμών στους ιστοτόπους σας.
Εάν έχετε οποιεσδήποτε άλλες συμβουλές ή συνδέσμους σε άλλους χρήσιμους πόρους, μην διστάσετε να τις δημοσιεύσετε στα σχόλια.
Σπάζοντας τα χειριστήρια
Ας ξεκινήσουμε διαιρώντας τους σε δύο κουβάδες, επειδή μερικοί έλεγχοι φόρμας δεν είχαν ποτέ πολύ κόπο να συνεργαστούν.
Φιλικοί έλεγχοι
Τα χειριστήρια με τα οποία είναι πιο εύκολο να εργαστείτε είναι το βασικό πλαίσιο εισαγωγής, η περιοχή κειμένου και το κουμπί. Λειτουργούν καλά με το πρότυπο CSS και, ευτυχώς, είναι τα πιο κοινά στοιχεία μορφής. Αν δεν χρειάζεται να χρησιμοποιήσετε τις πιο δύσκολες, τότε είστε τυχεροί.
Με την πρόοδο των στρογγυλεμένων γωνιών του CSS3, πέφτουν οι σκιές και οι κλίσεις, πολλά από τα πιο κοινά στυλ είναι πλέον πιο εύκολα. Δεν έχετε τίποτα να φοβηθείτε με αυτούς τους ελέγχους.
Διαταραχές ελέγχου
Ορισμένες άλλες μορφές ελέγχου μπορεί να είναι ένας τεράστιος πόνος στον αυχένα. Για παράδειγμα, αν σχεδιάσετε ένα αναπτυσσόμενο μενού που είναι εξαιρετικά τυποποιημένο, ο προγραμματιστής πιθανότατα θα θέλει να έχει συνομιλία μαζί σας. Οι επιλογές σας για το styling θα είναι αρκετά περιορισμένες: το χρώμα των περιθωρίων, το μαξιλάρι, το χρώμα φόντου, τα πράγματα αυτά. Εάν χρειάζεστε περισσότερο στυλ από αυτό, σας προτείνω να συμβουλευτείτε τον προγραμματιστή για να βεβαιωθείτε ότι δεν δημιουργείτε ένα σημαντικό πρόβλημα γι 'αυτούς.
Οι έλεγχοι ενοχλητικής φόρμας περιλαμβάνουν:
- επιλέξτε πολλαπλά,
- επιλέξτε αναπτυσσόμενο μενού,
- πλαίσια ελέγχου,
- κουμπιά ραδιοφώνου
- ανέβασμα αρχείου.
Σύγχρονα εργαλεία για φόρμες
Όπως αναφέρθηκε, υπάρχουν πολλά απίστευτα εργαλεία για να σας βοηθήσουν να μαστίσετε τα έντυπα ελέγχου σε σχήμα.
Φορμάρισμα είναι το μυστικό σας όπλο για να αποκτήσετε βασικές φόρμες ελέγχου και στυλ για να συμπεριφέρεστε με συνέπεια στα προγράμματα περιήγησης. Και τα προκαθορισμένα στυλ είναι καθαρά και όμορφα. Αυτή η awesome βιβλιοθήκη λειτουργεί επίσης τέλεια με ένα ευρύ φάσμα βιβλιοθηκών JavaScript, όπως jQuery , Dojo και MooTools .
Αντικατάσταση ελέγχου φόρμας
Αν θέλετε να κάνετε κάποια ριζοσπαστικά πράγματα σε μια μορφή, είναι διαθέσιμα χρήσιμα εργαλεία. Μια λαμπρή τακτική για την εξημέρωση των μορφών ιστού είναι να κρύψετε τον πραγματικό έλεγχο και να τον αντικαταστήσετε εξ ολοκλήρου με ένα κατασκευασμένο. Αυτό σας δίνει πολύ μεγαλύτερο έλεγχο σχετικά με τον τρόπο με τον οποίο η μορφή αποδίδει.
Ένα μεγάλο παράδειγμα αυτού είναι Στολή , μια jQuery plug-in για τη δημιουργία κηλίδων μορφών. Έρχεται σε τρία διαφορετικά θέματα. Και αν θέλετε να δημιουργήσετε ένα προσαρμοσμένο θέμα, απλώς χρησιμοποιήστε τις υπηρεσίες Γεννήτρια CSS για εύκολη επικάλυψη του plug-in.
Μια άλλη jQuery plug-in Niceforms . Αν και δεν έχει την εύχρηστη λειτουργία εκ νέου αποφλοίωσης της Uniform, προσφέρει ένα βασικό στυλ που θα μπορούσε να ταιριάξει πολύ τις ανάγκες σας όπως είναι.
Τέλος, υπάρχει η εμπορική επέκταση jQuery Wijmo . Η ενότητα που μας ενδιαφέρει εδώ είναι η διακοσμητή μορφή , η οποία είναι πραγματικά ελεύθερη για χρήση. Αντιμετωπίζει μερικούς από τους πιο προβληματικούς ελέγχους: πλαίσια ελέγχου, κουμπιά επιλογής και drop-down. Όντας μέρος μιας μεγαλύτερης εμπορικής βιβλιοθήκης, αυτό το εργαλείο φέρνει μερικά οφέλη, τα περισσότερα από τα οποία είναι ισχυρά απόδειξη με έγγραφα και πληρώθηκε υποστήριξη . Τέλος, μου αρέσει ο τρόπος με τον οποίο χειρίζεται την εκδορά. χρησιμοποιεί το jQuery UI ThemeRoller , καθιστώντας εύκολη την εργασία προσαρμοσμένων σχεδίων.
Επινοηθείσα μορφή ελέγχου
Τέλος, αν δεν υπάρχει έλεγχος φόρμας που να κάνει αυτό που χρειάζεστε, θα μπορούσατε να το εφεύρίνετε! Μερικοί πολύ έξυπνοι άνθρωποι έχουν ήδη κάνει πολλά από αυτό, και ίσως ένα από τα εργαλεία τους ταιριάζει ήδη στις ανάγκες σας.
Ολισθητήρες
Ένα πράγμα που λείπει από το πρότυπο HTML (αλλά αποτελεί μέρος του HTML5) είναι ένας βασικός έλεγχος του ρυθμιστή. Υπάρχουν πολλές απαντήσεις σε αυτό, μεταξύ άλλων ένα από το Wijmo , η οποία βασίζεται στην jQuery UI slider .
Μεταφορτωτές
Παρόλο που θα μπορούσατε να χρησιμοποιήσετε τον έλεγχο εισαγωγής αρχείων για να επιτρέψετε στους χρήστες να επιλέξουν ένα αρχείο για μεταφόρτωση, ίσως θελήσετε κάτι λίγο snazzier, ειδικά αν οι μεταφορτώσεις αρχείων είναι κρίσιμες για τον ιστότοπό σας. Μία από τις καλύτερες λύσεις είναι Μεταφόρτωση . Επιτρέπει στους χρήστες να επιλέγουν πολλά αρχεία και να βλέπουν την πρόοδο. Έρχεται με μια ποικιλία επιλογών διάταξης και λειτουργικότητας.
Κουτάκια επιλογής τύπου slider και κουμπιά επιλογής
Ένα δημοφιλές στοιχείο UI (χάρη στο iPhone) είναι ο διακόπτης on / off που ολισθαίνει από τη μία πλευρά στην άλλη. Με αυτό το εύχρηστο plug-in jQuery , μπορείτε να μετατρέψετε ένα βασικό πλαίσιο ελέγχου ή ένα κουμπί επιλογής σε ένα. Είτε ονομάζετε αυτό το εφευρεμένο εργαλείο ελέγχου είτε ένα εργαλείο αντικατάστασης φόρμας, είναι ένας πολύ καλός τρόπος για να επιτρέψετε στους χρήστες να ενεργοποιήσουν και να απενεργοποιήσουν τις επιλογές.
Κουμπιά δημιουργικών
jQuery UI είναι ένα άλλο ενδιαφέρον ενδιαφέρον για τους βασικούς ελέγχους. Τι χαρακτηρίζει ως κουμπιά θα μπορούσε επίσης να χρησιμοποιηθεί για τη δημιουργία συνόλων επιλογών βασισμένων σε κουμπιά, ραδιοφωνικά κουμπιά και πλαίσια ελέγχου. Με αυτόν τον τρόπο μετατρέπετε αυτά τα στοιχεία ελέγχου σε διαφορετική οπτική μορφή. Στην παρακάτω εικόνα υπάρχει ένα σύνολο κουμπιών ραδιοφώνου με στυλ κουμπιού.
HTML5 Έντυπα
Το HTML5 έχει φέρει πολλές συναρπαστικές δυνατότητες στις φόρμες ιστού. Αν και είναι πέρα από το πεδίο εφαρμογής αυτού του άρθρου, εξακολουθεί να ισχύει. Ακολουθούν ορισμένοι βασικοί πόροι που θα σας βοηθήσουν να ανακαλύψετε:
- " Μια μορφή τρελών , "Βόλτα στο HTML5;
- " Διασκέδαση με τα έντυπα HTML5 , "Richard Shepherd;
- " HTML5 Έντυπα , "Wufoo;
- " Έχετε μια μέρα πεδίου με φόρμες HTML5 , "Inayaili de León.
Συμπερασματικά, οι έλεγχοι φόρμας είναι ένα από τα πιο κρίσιμα εμπόδια στην ανάπτυξη ενός βασικού ιστότοπου.
Ένας σχεδιαστής που καταλαβαίνει τους περιορισμούς, ξέρει τα εργαλεία και αναγνωρίζει τις ευκαιρίες για εύκολο τσίμπημα θα είναι σε θέση να λάβει τεκμηριωμένες αποφάσεις που τελικά βελτιώνουν την κατώτατη γραμμή.