Οι διαδικτυακές φόρμες είναι ένας από τους πιο δύσκολους τομείς ανάπτυξης ιστοσελίδων για να γίνουν σωστοί, ειδικά με τόσα πολλά πράγματα που μπορεί να πάνε στραβά. Η μεταβαλλόμενη φύση του τρόπου με τον οποίο οι χρήστες έχουν πρόσβαση στο διαδικτυακό περιεχόμενο είχε επίσης αντίκτυπο σε μια τεχνολογία που αναπτύχθηκε χρόνια πριν οι άνθρωποι περίμεναν να είναι σε θέση με ένα τηλέφωνο αυτό που συνήθως θα έκαναν μόνο με έναν υπολογιστή. Είναι μια τεχνολογία που έχει υποστεί πολύ μικρή εξέλιξη.
Ο σχεδιασμός των διαδικτυακών εντύπων πρέπει να είναι αυτόνομο επάγγελμα. Οι σχεδιαστές ιστοσελίδων πρέπει να εμπλέκουν τις υπηρεσίες επαγγελματιών σχεδιαστών φόρμας πλήρους απασχόλησης για να τους βοηθήσουν στο έργο τους. Αλλά αυτό δεν θεωρείται αρκετά οικονομικό, και έτσι τις περισσότερες φορές ο σχεδιαστής του ιστότοπου είναι επίσης υπεύθυνος για το σχεδιασμό οποιωνδήποτε μορφών που χρησιμοποιούνται στον ιστότοπο.
Αλλά ο σχεδιασμός φορμών είναι μια εξαιρετικά εξειδικευμένη δεξιότητα. Απαιτεί την κατανόηση του τρόπου με τον οποίο αλληλεπιδρούν οι άνθρωποιformatιόν και κατανόηση των καλύτερων τρόπων συλλογής και παρουσίασηςformatιόν. Όπου η γενική σχεδίαση ιστοσελίδων επικεντρώνεται κυρίως στην παρουσίασηformatιόντα και εικόνες με ελκυστικούς αλλά πρακτικούς τρόπους, διαμορφώνουν το σχεδιασμό που απαιτεί να εστιάζουμε την προσοχή μας στη φύση του information και, στη συνέχεια, αποφασίστε τον καλύτερο τρόπο να το δομήσετε στη σελίδα έτσι ώστε να λειτουργεί όπως προβλέπεται. Η αισθητική είναι λιγότερο σημαντικός παράγοντας σε αυτήν την περίπτωση, αλλά και πάλι δεν πρέπει να είναι γιαgotten.
Σε αυτό το άρθρο θα ρίξουμε μια ματιά στην τέχνη του σχεδιασμού φόρμας ιστού και θα δούμε αν μπορούμε να βρούμε έναν τρόπο να κάνουμε τις φόρμες ιστού μας πιο έξυπνες τόσο από άποψη εμφάνισης όσο και πώς λειτουργούν.
Τα εργαλεία δημιουργίας φόρμας Ιστού
Τα τυπικά εργαλεία που μας έχουν δοθεί από προγραμματιστές του προγράμματος περιήγησης και το W3C για να συνδυάσουμε τις φόρμες ιστού μας δεν είναι ακριβώς ιδανικά, και πριν από την εφαρμογή CSS σε αυτά, είναι στην πραγματικότητα μάλλον φρικτά. Έτσι μοιάζουν:
Υπάρχει επίσης ένας άλλος τυπικός έλεγχος εισόδου που ονομάζεται επιλέξτε, αλλά θα πρέπει να αποφύγετε τη χρήση αυτού, εκτός εάν η εξοικονόμηση χώρου αποτελεί σοβαρή ανησυχία. Υπάρχουν καλύτεροι τρόποι για να χειριστείτε την εργασία που εκτελείται από το στοιχείο ελέγχου επιλογής, όπως θα συζητήσουμε αργότερα. Τα χειριστήρια Textarea θα πρέπει επίσης να αποφεύγονται όταν είναι δυνατόν, επειδή είναι τόσο προβληματικά και αρχαία.
Εκτός από αυτά τα τυπικά στοιχεία εισαγωγής, υπάρχουν επίσης ειδικά νέα που δημιουργήθηκαν για HTML5. Εκτός από την προετοιμασία ενός εγγράφου αυστηρά για εσωτερική χρήση και όπου είναι γνωστό το περιβάλλον του προγράμματος περιήγησης, πρέπει να χρησιμοποιούνται μόνο στοιχεία που λειτουργούν τόσο στον Firefox όσο και στο Chrome. Είναι καλό εάν ένα στοιχείο λειτουργεί και σε άλλα προγράμματα περιήγησης, αλλά δεν θα έπρεπε αποκλειστικά να εργάζεστε σε άλλα προγράμματα περιήγησης. Ακολουθούν τα στοιχεία HTML5 όπως εμφανίζονται στον Firefox:
Και η ελαφρώς διαφορετική εμφάνισή τους στο Chrome:
Τώρα, προφανώς είναι πολύ σημαντικό να γνωρίζετε ότι οι εισόδους HTML5 σας θα φαίνονται και θα λειτουργούν διαφορετικά μεταξύ του Chrome και του Firefox, αλλά θα εξακολουθούν να λειτουργούν. Τα τυπικά στοιχεία ελέγχου εισόδου φαίνονται επίσης λίγο πιο ωραία στο Chrome από ό, τι στον Firefox. Σημειώστε ότι το Chrome επιβάλλει το πρότυπο ημερομηνίας της Βόρειας Αμερικής, το οποίο οι χρήστες ενδέχεται να μην εκτιμούν. Επίσης, η έκδοση Chrome του στοιχείου ελέγχου ημερομηνίας το καθιστά ακατάλληλο για προβολή και θα πρέπει να χρησιμοποιείται μόνο για εισαγωγή. Η προσθήκη ενός επιλογέα ημερομηνίας είναι η κύρια βελτίωση στο Chrome, αλλά μάλλον μπορούμε να περιμένουμε να το δούμε σε μελλοντικές εκδόσεις του Firefox.
Επειδή ο Firefox είναι ανοιχτού κώδικα, μπορείτε πραγματικά να φτιάξετε τη δική σας προσωπική έκδοση του Firefox να αποδώσει τις εισόδους με τον ίδιο τρόπο που κάνει το Chrome κατεβάζοντας τον πηγαίο κώδικα ανοιχτού κώδικα του προγράμματος περιήγησης Chromium στον οποίο βασίζεται το Chrome και μεταφέροντας τη σχετική ενότητα κώδικα στην πηγή του Firefox κωδικός (αλλά τότε θα πρέπει να το κάνετε αυτό κάθε φορά που αναβαθμίζετε τον Firefox σε νέα έκδοση).
Το κύριο σημείο είναι, ωστόσο, ότι ακόμη και με τις βελτιώσεις του Chrome, η προεπιλεγμένη εμφάνιση των στοιχείων ελέγχου εισόδου είναι μικρή και μη ελκυστική. Υπάρχουν μερικά άλλα διαθέσιμα στοιχεία ελέγχου, αλλά επειδή δεν λειτουργούν τόσο στο Chrome όσο και στον Firefox, δεν θα πρέπει να χρησιμοποιούνται σε ιστότοπους που προορίζονται για το κοινό.
(Σχεδόν επαρκής) απάντηση Bootstrap
Το Bootstrap εφαρμόζει στυλ στα τυπικά χειριστήρια που βελτιώνουν την εμφάνισή τους σε κάποιο βαθμό. Ωστόσο, λόγω της φιλοσοφίας σχεδιασμού για κινητές συσκευές της Bootstrap, προκαλεί κάποια ανεπιθύμητα εφέ σε φόρμες που δεν προορίζονται να εμφανιστούν ως μία στήλη και κάνει τα πεδία σύντομης εισαγωγής να φαίνονται αστεία όταν εκτείνονται σε μια ολόκληρη στήλη από προεπιλογή. Ο κόσμος μπορεί να έχει κινηθεί, αλλά οι φόρμες δεν εφευρέθηκαν με γνώμονα τους χρήστες κινητών.
Το Bootstrap επεκτείνει τα χειριστήρια για να γεμίσει το οριζόντιο πλάτος του κοντέινερ τους, πράγμα που σημαίνει ότι όλα τα χειριστήρια θα έχουν το ίδιο πλάτος είτε σας αρέσει είτε όχι (εκτός εάν υπερβαίνετε χειροκίνητα αυτήν τη συμπεριφορά) και σας επιτρέπει να ντύσετε μερικούς τύπους ελέγχου με επιπλέον bling. Η λύση του Bootstrap είναι κομψή και ξεπερνά ορισμένα από τα προβλήματα των χειριστηρίων που έχουν διαφορετικές εμφανίσεις σε διαφορετικά προγράμματα περιήγησης, αλλά λειτουργεί μόνο με τα τυπικά στοιχεία ελέγχου. Τα στοιχεία ελέγχου HTML5 δεν εφαρμόζονται στις τρέχουσες εκδόσεις του Bootstrap, οπότε θα πρέπει να κάνετε στυλ μόνοι σας.
Το Bootstrap σας επιτρέπει επίσης να συνδυάσετε τα στοιχεία ελέγχου μαζί. Μερικές φορές αυτό είναι καλό και μερικές φορές όχι τόσο καλό. Ο συνδυασμός μιας εισαγωγής κειμένου με ένα κουμπί και ένα πλαίσιο ελέγχου μπορεί να φαίνεται καλός, αλλά θα μπορούσε να προκαλέσει σύγχυση στον χρήστη ως προς το πώς πρέπει να αλληλεπιδράσει με ένα τόσο άγνωστο στοιχείο ελέγχου.
Αυτό που παρέχει το Bootstrap είναι δύο από τις αγαπημένες μου συσκευές δημιουργίας φορμών, το πίνακας και την καλά. Αυτά είναι πολύ χρήσιμα για την ομαδοποίηση δεδομένων φόρμας για να δώσουν μια οπτική ένδειξη των δεδομένων που σχετίζονται με ποια άλλα δεδομένα, καθώς και για το διαχωρισμό δεδομένων.
Έξυπνο κτίριο 101
Τώρα είμαστε έτοιμοι να σκεφτούμε πώς οι φόρμες μπορούν να κατασκευαστούν με πιο έξυπνους τρόπους. Για να γίνει αυτό, πρέπει να σκεφτούμε καλά τις προεπιλογές. Πρέπει να γνωρίζουμε το desktop-δεσμευμένες ρίζες των στοιχείων ελέγχου φορμών, καθώς και την ανάγκη για συμβατότητα με κινητά. Και πρέπει να νοιαζόμαστε για πράγματα όπως η χρηστικότητα και η επικύρωση (εάν η φόρμα θα χρησιμοποιηθεί για τη συλλογή δεδομένων).
Αυτό το τελευταίο σημείο είναι καλό, γιατί ενώ τα στοιχεία ελέγχου φόρμας χρησιμοποιούνται για τη συλλογή δεδομένων, χρησιμοποιούνται επίσης για την εμφάνιση αποθηκευμένων δεδομένων. Ο μέσος χρήστης του Ιστού ενδιαφέρεται (και θα έπρεπε) περισσότερο να μπειformatιόν από εσάς παρά να υποχωρήσετεformatιόν σε σας.
Η συλλογή δεδομένων είναι εύκολη. Οι άνθρωποι θα συμπληρώσουν οτιδήποτε κολλάτε μπροστά τους, ακόμα κι αν είναι χάος. Αλλά όταν πρόκειται για την εμφάνιση δεδομένων, είναι πιο ιδιότροποι. Κατά συνέπεια, εδώ θα επικεντρωθούμε περισσότερο στη χρήση φορμών για την εμφάνιση δεδομένων παρά στη συλλογή τους, καθώς η προβολή απαιτεί περισσότερη προσοχή και περισσότερη «ευφυΐα».
1. Χρειαζόμαστε μια φόρμα;
Πριν δημιουργήσουμε μια φόρμα, πρέπει να ελέγξουμε ότι πραγματικά χρειαζόμαστε μία. Εάν τα δεδομένα μπορούν να αναπαρασταθούν επαρκώς και χωρίς σύγχυση ως πίνακας, ένας πίνακας θα είναι συνήθως πιο αποτελεσματικός και πρακτικός.
Μια φόρμα είναι απαραίτητη εάν:
- Συλλέγουμε στοιχεία από τον χρήστη
- Έχουμε πολλά δεδομένα για προβολή
- Τα δεδομένα πρέπει να είναι σαφώς τμηματοποιημένα
- Ο χρήστης είναι πιθανό να έχει πρόσβαση στα δεδομένα από μια κινητή συσκευή
Εάν κάποιο από τα παραπάνω στοιχεία δεν είναι αληθές, τότε δεν είναι απαραίτητο να χρησιμοποιήσετε μια φόρμα και θα αρκεί ένας πίνακας. Η πρόκληση που αντιμετωπίζουμε με τη συμβατότητα με κινητά είναι ότι ούτε πίνακες ούτε φόρμες είναι πραγματικά κατάλληλες για μια οθόνη για κινητά. Το γεγονός ότι οι σχεδιαστές smartphone έδωσαν στους χρήστες τη δυνατότητα να χρησιμοποιούν ένα πρόγραμμα περιήγησης σε κατακόρυφο προσανατολισμό και ότι οι περισσότεροι χρήστες προτιμούν να κρατούν τα τηλέφωνά τους με αυτόν τον τρόπο προκαλούν τα περισσότερα από τα προβλήματα συμβατότητας για κινητά που πρέπει να αντιμετωπίσουν οι σχεδιαστές ιστότοπων.
Ανεξάρτητα, οι φόρμες είναι πιο προσαρμόσιμες σε οθόνη για κινητά από ό, τι οι πίνακες. Επομένως, εάν πρέπει πραγματικά να διασφαλίσετε ότι όλα τα δεδομένα μπορούν να προβληθούν εύκολα σε μια οθόνη κινητού, τότε οι φόρμες είναι μια καλύτερη επιλογή από τους πίνακες… μερικές φορές!
2. Σχεδιάστε το desktop διάταξη
Είναι αλήθεια ότι γενικά υποτίθεται ότι πρέπει να σχεδιάσετε μια διάταξη για κινητά πρώτα, αλλά όταν πρόκειται για φόρμες, αυτός δεν είναι ο καλύτερος τρόπος, γιατί πρέπει να γνωρίζουμε πώς θα ομαδοποιηθούν τα δεδομένα και μπορούμε να το κάνουμε μόνο εάν μπορεί να δει όλα τα πεδία ταυτόχρονα, κάτι που δεν μπορεί να γίνει σε κινητό, εκτός εάν εμφανίζετε τόσο λίγα δεδομένα που δεν χρειάζεται να ασχοληθούμε με το σχεδιασμό της φόρμας.
Ο πιο γρήγορος τρόπος για να μαρκάρετε ένα σχέδιο φόρμας είναι με το InkScape. Σε αυτό το παράδειγμα, θα δημιουργήσουμε ένα σύστημα για τη διαχείριση των αρχείων HR. Εδώ είναι η μακέτα για το desktop πρωτότυπο:
Το εξωτερικό ορθογώνιο αντιπροσωπεύει ολόκληρο τον χώρο μιας οθόνης 1024 x 768 px. Σε οποιαδήποτε desktop πρόγραμμα περιήγησης, δεν έχουμε πρόσβαση σε τόσα pixel εκτός εάν ο χρήστης βρίσκεται σε λειτουργία πλήρους οθόνης (κάτι που συμβαίνει σπάνια). Οπότε το δικό μας
Η σχεδίαση είναι 900 x 600 px, η οποία θα πρέπει να ταιριάζει στη διαθέσιμη περιοχή των περισσότερων desktop οθόνες.
Όταν η διαθέσιμη περιοχή έχει πλάτος μικρότερο από 900 εικονοστοιχεία, οι στήλες μας 2 x 450 εικονοστοιχεία θα σπάσουν και θα εμφανιστούν ως μία συνεχής στήλη 450 εικονοστοιχείων. Αυτό επιλύει το πρόβλημα της συμβατότητας με κινητά, τουλάχιστον έως ότου ζητήσει η Google, ώστε όλοι οι ιστότοποί μας να μπορούν να χωρέσουν σε μια οθόνη ρολογιού χειρός.
Θα παρατηρήσετε ότι το μεγαλύτερο μέρος της οθόνης αποτελείται απλώς από συνηθισμένα κουτιά εισόδου, τα οποία μπορεί να φαίνονται βαρετά, αλλά στην πραγματικότητα είναι σχεδόν πάντα ο καλύτερος τρόπος για να το κάνετε. Επίσης, παρατηρήστε τη χρήση γραμματοσειράς σταθερού πλάτους. Αυτό βοηθά στη διατήρηση της ομοιομορφίας στο σχεδιασμό της φόρμας.
Οι στήλες μας θα είναι στην πραγματικότητα λίγο μεγαλύτερες από 450 εικονοστοιχεία, περίπου 600 εικονοστοιχεία η καθεμία, αλλά αν θέλαμε να αναγκάσουμε το πλάτος της στήλης να είναι περίπου 450 εικονοστοιχεία, απλώς μειώνουμε το μέγεθος της στήλης από 6 σε 5. Αλλά μια στήλη 600 εικονοστοιχείων θα πρέπει να χωράει σε μια οθόνη κινητής τηλεφωνίας σε κατάσταση πορτρέτου χωρίς να τυλίγεται.
Θα δοκιμάσουμε τη διάταξή μας με αυτόν τον κωδικό:
Και μπορούμε να δούμε ότι όλα φαίνονται καλά (γιατί προσωρινά προσθέσαμε περιγράμματα για να μας δείξουν).
Το widget χάρακα οθόνης Linux προφανώς δεν αποτελεί μέρος της ιστοσελίδας, αλλά είναι εκεί για να μας δείξει ότι οι στήλες μας δεν θα σπάσουν άσχημα σε μια μικρότερη οθόνη. Ας δούμε τι συμβαίνει σε διαφορετικά κοινά πλάτη οθόνης:
3. Δημιουργία προσαρμοσμένων μεγεθών εισαγωγής και θέσης ετικέτας
Εάν αφήσουμε τα πάντα στην προεπιλογή, χωρίς να προσθέσουμε προσαρμοσμένο CSS, αυτό θα συμβεί όταν προσθέσουμε την πρώτη σειρά στοιχείων ελέγχου εισόδου:
Αυτό συμβαίνει επειδή η ετικέτα για κάθε είσοδο είναι προεπιλεγμένη στα αριστερά της εισόδου και επειδή δεν έχουμε ορίσει ένα προσαρμοσμένο πλάτος για τα στοιχεία ελέγχου εισόδου. Μπορούμε να διορθώσουμε και τα δύο προβλήματα με το CSS.
Τώρα απλώς ρυθμίζουμε την ιδιότητα εμφάνισης των στοιχείων ετικέτας σε "μπλοκ", θέτουμε τα πεδία Πρώτο και Τελευταίο στην κλάση "in40w" και το πεδίο MI στην τάξη "in10w" και όλα θα πρέπει να φαίνονται πολύ πιο ωραία.
Όπως μπορείτε να δείτε, φαίνεται καλύτερα, αλλά η διάταξη δεν είναι πλέον σωστή. Τώρα τα κουτιά στοιβάζονται. Λοιπόν, πώς μπορούμε να το διορθώσουμε, καταργώντας την ιδέα της χρήσης του στοιχείου ετικέτας καθόλου, γιατί δεν το χρειαζόμαστε πραγματικά. Απλώς θα εφαρμόσουμε το δικό μας σε 40w και σε 10w μαθήματα, και κάντε μια νέα τάξη που ονομάζεται στοLeftOf.
Το οποίο, μόλις εφαρμοστεί, διορθώνει το πρόβλημα που είδαμε νωρίτερα, ως εξής:
Αλλά αυτό δεν αφήνει αρκετό χώρο για το πεδίο SSN. Αυτό συμβαίνει επειδή η αριστερή στήλη μας είναι μεγαλύτερη από το αναμενόμενο, οπότε το 40% είναι στην πραγματικότητα περισσότερο χώρο από ό, τι χρειαζόμαστε για αυτά τα πεδία, έτσι μπορούμε πραγματικά να τα μειώσουμε σε σε 30w, και το μεσαίο πεδίο είναι μεγαλύτερο από ό, τι χρειάζεται, έτσι μπορούμε να το κάνουμε αυτό σε 5w. Να τι συμβαίνει:
Τώρα λοιπόν υπάρχει αρκετός χώρος για να προσθέσετε το πεδίο SSN, το οποίο συμπληρώνει την πρώτη γραμμή της φόρμας εισαγωγής. Αφού εξομαλύνετε όλες αυτές τις λεπτομέρειες, η κατασκευή της υπόλοιπης αριστερής στήλης πρέπει να είναι πολύ εύκολη. Μπορούμε να απαλλαγούμε από το προσωρινό περίγραμμα τώρα, και επίσης να εφαρμόσουμε το σωστό υπόβαθρο στη στήλη. Εδώ είναι το πάνω μισό του πίνακα, προτού φτάσουμε σε ειδικές περιοχές της φόρμας:
Μερικά πράγματα έχουν συμβεί σε αυτό το στάδιο. Το πρώτο ήταν το εύκολο μέρος της ρύθμισης του χρώματος φόντου για τη στήλη (rgb (235,235,246)) και παρόλο που δεν μπορείτε να το δείτε εδώ, το χρώμα κειμένου για όλες τις εισόδους έχει οριστεί σε # 427DB4 και το βάρος γραμματοσειράς ρυθμίστηκε σε τόλμη, ώστε να μειώσει την καταπόνηση των ματιών. Το κείμενο ρυθμίστηκε για αυτόματη μετατροπή σε κεφαλαία χρησιμοποιώντας την ιδιότητα μετατροπής κειμένου CSS, έτσι ώστε να επιταχυνθεί η εισαγωγή δεδομένων και να μειωθούν τα σφάλματα.
Το πιο περίπλοκο ζήτημα της ευθυγράμμισης των χειριστηρίων και της διασφάλισης ότι θα διατηρούσαν μια αξιοπρεπή ευθυγράμμιση σε οποιονδήποτε τύπο οθόνης απαιτούσε περισσότερη σκέψη. Έχετε ήδη δει την τεχνική που χρησιμοποιείται για την πρώτη γραμμή εισόδων και τις ετικέτες τους. Αυτή η τεχνική θα λειτουργήσει όταν δεν χρειάζεται να υπάρχει επιπλέον απόσταση μεταξύ των εισόδων, αλλά αν χρειαστεί να προσθέσουμε χώρο, τότε είναι καλύτερο να χρησιμοποιήσετε μια άλλη τεχνική.
Αυτή η άλλη τεχνική περιλαμβάνει τη δημιουργία μιας ένθετης σειράς στηλών μέσα στην κύρια στήλη μας, η οποία θα σας βοηθήσει να διατηρήσετε τα στοιχεία ελέγχου σε σωστή απόσταση. Ο αριθμός των στηλών και τα μεγέθη τους αλλάζουν ανάλογα με τις απαιτήσεις κάθε συνόλου στοιχείων ελέγχου. Θυμηθείτε ότι όλα είναι responsive, οπότε όταν αλλάζει το μέγεθος μιας στήλης, όλα μέσα στη στήλη θα προσπαθήσουν να αλλάξουν το μέγεθος ώστε να ταιριάζουν με την αλλαγή. Αυτά είναι καλά νέα για τους χρήστες με προβλήματα όρασης, καθώς μπορούν να μεγεθύνουν τη μεγέθυνση στην οθόνη τους και όλα θα είναι ευθυγραμμισμένα σωστά όπως για κάθε άλλο χρήστη.
Προχωρώντας στο πιο περίπλοκο τμήμα της αριστερής στήλης, η αρχική ιδέα που περιγράφεται στο πρότυπο απαιτεί μια δομή που θα ήταν δύσκολο να εφαρμοστεί. Ευτυχώς συνειδητοποίησα ότι τα δεδομένα στον πίνακα δικαιωμάτων θα μπορούσαν να διπλασιαστούν εάν χρησιμοποιήθηκαν τυποποιημένα πλαίσια ελέγχου και αυτό έλυσε όμορφα το πρόβλημα πολυπλοκότητας διάταξης:
Τα ελαφρύτερα πάνελ γύρω από τα ειδικά τμήματα είναι απλώς συνηθισμένα φρεάτια Bootstrap. Για την εισαγωγή δεδομένων θρησκείας, είναι απαραίτητο να επιλέξετε από μια λίστα προκαθορισμένων επίσημων θρησκειών (συμπεριλαμβανομένων των «άλλων»). Η ανάπτυξη των στηλών της δεξιάς πλευράς ήταν ακόμα πιο εύκολη και απλώς χρησιμοποιήθηκαν οι ίδιες τεχνικές από το πρώτο σύνολο στοιχείων ελέγχου στην αριστερή στήλη, οργανώνοντας τα στοιχεία ελέγχου σε έναν πίνακα format, αλλά χωρίς τη χρήση πίνακα.
Για να πετύχει αυτό το έργο, έπρεπε να προσφέρει τέλεια responsiveσε όλα τα επίσημα μεγέθη οθόνης. Ας δούμε πώς βγήκε το αποτέλεσμα. Πρώτα με την έκδοση πλήρους ανάλυσης:
Αυτό είναι αρκετά κοντά στο πρωτότυπο που μπορούμε να είμαστε ικανοποιημένοι με αυτό. Στην πραγματικότητα, είναι ακόμη και μια βελτίωση. Τώρα ας δούμε το responsive διάταξη σε καθεμία από τις διαφορετικές ενότητες της σελίδας:
Το Bootstrap και το HTML5 έχουν κάνει την ανάπτυξη φόρμας πιο γρήγορη και ευκολότερη από κάθε άλλη φορά, αλλά πολλοί προγραμματιστές υπονομεύουν αυτήν την πρόοδο κάνοντας τις φόρμες πολύ περίπλοκες (χρησιμοποιώντας τα ειδικά στοιχεία φόρμας HTML5 μόνο και μόνο επειδή είναι εκεί για να χρησιμοποιηθούν αντί επειδή χρειάζονται για το έργο ), και δημιουργώντας εντελώς μονοδιάστατες φόρμες που δεν επιχειρούν καν να εκμεταλλευτούν responsive σχέδιο. Με λίγη προσοχή και επιπλέον δουλειά, όλα τα δεδομένα μπορούν να γίνουν πιο εμφανή σε οποιοδήποτε μέγεθος οθόνης.
Ενδέχεται να έχετε μερικές μικρές δυσλειτουργίες στο μικρότερο μέγεθος οθόνης σε διάταξη πορτραίτου στο μικρότερο μέγεθος οθόνης (στην περίπτωση αυτού του έργου, το πεδίο Middle Initial στην πρώτη σειρά είναι λίγο μικρότερο από ό, τι θα ήταν ιδανικό), αλλά οι χρήστες κινητών γενικά αποδεχτείτε ότι αυτή είναι η αντιστάθμιση που πρέπει να κάνουν για να μην κρατούν σωστά τα τηλέφωνά τους.
Κάντε το σωστά και οι φόρμες δεδομένων σας μπορούν να έχουν την εξής μορφή:
Αντί, ε, αυτό:
Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του
Σχόλια απαντήσεις 0