Οι φόρμες HTML είναι ένα πολύ ισχυρό εργαλείο για την αλληλεπίδραση με τους χρήστες, αλλά για τεχνικούς λόγους δεν είναι πάντα προφανές πώς να τις χρησιμοποιήσετε στο μέγιστο των δυνατοτήτων τους. Η απλή υποβολή δεδομένων δεν αρκεί σε αυτήν την περίπτωση - πρέπει επίσης να βεβαιωθείτε ότι τα δεδομένα που συμπληρώνουν οι χρήστες σε φόρμες θα σταλούν στη σωστή μορφή που απαιτείται για την επιτυχή επεξεργασία τους και ότι αυτό δεν θα σπάσει τις υπάρχουσες εφαρμογές. Είναι επίσης σημαντικό να βοηθάτε τους χρήστες να συμπληρώνουν σωστά τις φόρμες και να μην απογοητεύονται όταν προσπαθούν να χρησιμοποιήσουν εφαρμογές.
Η ετικέτα χρησιμοποιείται για τη δημιουργία μιας φόρμας HTML. Στην πραγματικότητα δεν δημιουργεί περιθώριο, αλλά χρησιμοποιείται ως γονικό κοντέινερ για στοιχεία όπως. Είτε θέλετε να δημιουργήσετε μια απλή φόρμα συνδρομής με τακτικά ταμεία και πληρωμή, είτε διαδραστικές εφαρμογές ιστού, θα χρειαστεί να χρησιμοποιήσετε ετικέτες στοιχείων HTML για να εργαστείτε, το πιο σημαντικό από τα οποία είναι.
Πόσο τυπικόΦόρμες HTML
Οι φόρμες HTML εφευρέθηκαν και τυποποιήθηκαν σε μεγάλο βαθμό πριν από την εμφάνιση της ασύγχρονης JavaScript και των πολύπλοκων διαδικτυακών εφαρμογών. Σήμερα, χρησιμοποιούνται είσοδοι φορμών, κουμπιά και άλλοι μηχανισμοί αλληλεπίδρασης, αλλά στον πυρήνα αυτού βρίσκεται ένα σύστημα που βασίζεται στο παράδειγμα αιτήματος και απόκρισης
Όταν ένας χρήστης φορτώνει μια σελίδα, αποστέλλεται ένα αίτημα http (συνήθως το λεγόμενο αίτημα GET). Αποστέλλεται από το πρόγραμμα περιήγησής σας στον διακομιστή και συνήθως ο διακομιστής απαντά με την ιστοσελίδα που αναζητά ο χρήστης. Αυτή η αλληλεπίδραση είναι μια από τις πιο θεμελιώδεις έννοιες του Διαδικτύου. Και αυτό εξηγεί ακριβώς πώς λειτουργούν οι φόρμες HTML.
Η διαδικασία ανταλλαγής πληροφοριών με τον διακομιστή
Κάθε, που περιλαμβάνει στοιχεία όπως, βρίσκεται μέσα και έχει ένα χαρακτηριστικό name (όνομα), καθώς και την τιμή του. Η τιμή ορίζεται με διαφορετικούς τρόπους. Για κείμενο, αυτή θα είναι η τιμή που εισήχθη στο πεδίο από τον χρήστη του ιστότοπου. Για ένα κουμπί επιλογής, η τιμή της επιλεγμένης επιλογής. Ο χρήστης μπορεί να ορίσει την τιμή, αλλά τις περισσότερες φορές δεν μπορεί να ορίσει το χαρακτηριστικό name. Αυτό δημιουργεί ένα σύνολο ζευγών ονόματος/τιμής όπου οι τιμές καθορίζονται από την εισαγωγή του χρήστη.
Η κύρια διαφορά μεταξύ μιας φόρμας και ενός κανονικού εγγράφου HTML είναι ότι, στις περισσότερες περιπτώσεις, τα δεδομένα που συλλέγονται από μια φόρμα αποστέλλονται σε έναν διακομιστή ιστού. Σε αυτήν την περίπτωση, πρέπει να ρυθμίσετε έναν διακομιστή ιστού για λήψη και επεξεργασία δεδομένων. χαρακτηριστικό δράσης ετικέταςκαθορίζει την τοποθεσία (URL) όπου πρέπει να σταλούν τα δεδομένα που συλλέγονται.
Πώς μοιάζει η απόκριση διακομιστή
Όταν υποβάλλεται η φόρμα, τα ζεύγη ονόματος-τιμής και όλα τα πεδία εντός του στοιχείου περιλαμβάνονται στο HTTP. Υποβάλλεται ένα αίτημα στη διεύθυνση URL που καθορίζεται με τη μορφή του χαρακτηριστικού δράσης. Ο τύπος αιτήματος (GET ή POST) θα βρίσκεται στο χαρακτηριστικό μέθοδος. Αυτό σημαίνει ότι όλα τα δεδομένα που παρέχονται από τον χρήστη αποστέλλονται στον διακομιστή αμέσως μόλις υποβληθεί η φόρμα και ο διακομιστής μπορεί να κάνει ό,τι θέλει με αυτά τα δεδομένα. Όταν ο διακομιστής λαμβάνει μια υποβολή φόρμας, την αντιμετωπίζει όπως κάθε άλλο αίτημα HTTP. Ο διακομιστής κάνει ό,τι χρειάζεται να κάνει με τα δεδομένα που περιλαμβάνονται και δίνει μια απάντηση στο πρόγραμμα περιήγησης.
Αν θυμάστε ότι η φόρτωση της σελίδας είναι η απάντηση, θα παρατηρήσετε ότι το ίδιο συμβαίνει και εδώ. Σε μια τυπική μορφή που δημιουργείται με την ετικέτα, η απάντηση είναι μια νέα σελίδα που φορτώνεται από το πρόγραμμα περιήγησης. Συνήθως, η νέα σελίδα αντικαθιστά το τρέχον περιεχόμενο, αλλά αυτό μπορεί να παρακαμφθεί με το χαρακτηριστικό target. Η συντριπτική πλειονότητα των διαδικτυακών φορμών λειτουργεί με αυτόν τον τρόπο, γι' αυτό ο χρήστης αποστέλλεται σε μια σελίδα Ευχαριστιών όταν συμπληρώνει μια φόρμα συνδρομής μέσω email.
Εφαρμογές και φόρμες ιστού χωρίς ετικέτα
Οι σύγχρονες διαδραστικές εφαρμογές Ιστού χρησιμοποιούν κώδικα JavaScript για να κάνουν ασύγχρονα αιτήματα http. Πρόκειται για κλήσεις προς τον διακομιστή που δεν προκαλούν επαναφόρτωση σελίδας. Δεν βασίζονται σε μια ετικέτα - ένα στοιχείο HTML ενσωματωμένο στη συμπεριφορά. Δεν συνδυάζουν όλα τα δεδομένα σε ένα ενιαίο σύνολο.χρήστη και μην τα στείλετε αμέσως. Για αυτόν τον λόγο, πολλοί σχεδιαστές διάταξης HTML + JS σε εφαρμογές web δεν χρησιμοποιούν την ετικέτα σε όλες τις φόρμες. Τις περισσότερες φορές, το χρησιμοποιούν απλώς ως ένα είδος κοντέινερ για διάφορους τύπους πεδίων και στοιχείων εισόδου. Σε αυτήν την περίπτωση, τα χαρακτηριστικά μεθόδου και ενέργειας που χρησιμοποιούνται δεν θα είναι ορατά.
Περισσότερα για τις φόρμες
Οι φόρμες HTML είναι ένα από τα σημαντικότερα σημεία της αλληλεπίδρασης ενός χρήστη με έναν ιστότοπο ή μια εφαρμογή. Επιτρέπουν στους χρήστες να υποβάλλουν δεδομένα στον ιστότοπο. Τις περισσότερες φορές, τα δεδομένα αποστέλλονται στον διακομιστή ιστού, αλλά η ιστοσελίδα μπορεί επίσης να τα υποκλέψει για να τα χρησιμοποιήσει μόνη της. Υπάρχουν πολλά στοιχεία που σχετίζονται με τη φόρμα - διαφορετικά είδη κουμπιών, επιλογείς για διαφορετικούς τύπους, μηχανισμοί ανάδρασης. Επομένως, μπορεί να είναι δύσκολο να αποφασίσετε ποιες τιμές θα εκχωρήσετε στα χαρακτηριστικά της ετικέτας. Όταν πρόκειται να δημιουργήσετε φόρμες, πρέπει να τις κάνετε να λειτουργούν σε διαφορετικά μεγέθη οθόνης. Είναι σημαντικό να γίνουν προσβάσιμα σε άτομα με αναπηρία. Αυτός είναι ο λόγος για τον οποίο οι φόρμες και οι ετικέτες χαρακτηριστικών είναι ίσως η πιο περίπλοκη πτυχή του HTML.
Από τι αποτελείται το σχήμα
Η φόρμα HTML αποτελείται από ένα ή περισσότερα γραφικά στοιχεία. Μπορούν να είναι πεδία κειμένου μιας γραμμής ή πολλών γραμμών, πλαίσια επιλογής, κουμπιά ή κουμπιά επιλογής. Συχνά συνδέονται με ένα χαρακτηριστικό που περιγράφει τον σκοπό τους - η σωστή εφαρμογή μπορεί να καθοδηγήσει ξεκάθαρα τόσο τους βλέποντες όσο και τους τυφλούς χρήστες πώς να φτάσουν στη φόρμα εισαγωγής. Χαρακτηριστικόσυσχετίζονται σωστά με τα χαρακτηριστικά τους for και id, αντίστοιχα. Η ετικέτα for αναφέρεται στη συνέχεια στο χαρακτηριστικό id του αντίστοιχου γραφικού στοιχείου και το πρόγραμμα ανάγνωσης οθόνης, χρησιμοποιώντας το, θα διαβάσει ό,τι είναι γραμμένο σε αυτό.
Εκτός από τις δομές που είναι συγκεκριμένες για την ετικέτα, είναι σημαντικό να θυμάστε ότι οι φόρμες είναι απλώς κώδικας HTML. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε την πλήρη ισχύ της HTML για τη δομή των φορμών σας. Μια κοινή πρακτική είναι η χρήση της ετικέτας για την αναδίπλωση στοιχείων με ετικέτα
. Οι λίστες HTML χρησιμοποιούνται επίσης ευρέως· χρησιμοποιούνται πολλαπλά πλαίσια ελέγχου ή κουμπιά επιλογής για τη δόμηση. Αφού δημιουργήσετε τα πεδία εισαγωγής, μένει να προσθέσετε ένα κουμπί χρησιμοποιώντας την ετικέτα και να ελέγξετε το αποτέλεσμα. Η ευελιξία των μορφών HTML τις καθιστά μία από τις πιο σύνθετες δομές στη μορφή HTML. Ωστόσο, με τη σωστή δομή κατά τη δημιουργία μιας φόρμας HTML, μπορείτε να διασφαλίσετε ότι είναι και χρησιμοποιήσιμη και προσβάσιμη.
