Η Javascript φορά πολλά καπέλα. Μπορείτε να χρησιμοποιήσετε το JavaScript για να δημιουργήσετε ειδικά εφέ. Μπορείτε να χρησιμοποιήσετε το JavaScript για να κάνετε τις σελίδες HTML σας "πιο έξυπνες" αξιοποιώντας τις δυνατότητές της στη λήψη αποφάσεων. Και μπορείτε να χρησιμοποιήσετε το JavaScript για να βελτιώσετε τις φόρμες HTML. Αυτή η τελευταία εφαρμογή έχει ιδιαίτερη σημασία. Από όλα τα καπέλα που μπορεί να φορέσει η JavaScript, τα χαρακτηριστικά επεξεργασίας φορμών είναι από τα πιο περιζήτητα και χρησιμοποιούνται.
Τίποτα δεν προκαλεί περισσότερο φόβο στην καρδιά ενός εκδότη Ιστού από αυτά τα τρία γράμματα: C-G-I. Το CGI (που σημαίνει κοινή διεπαφή πύλης), είναι ένας μηχανισμός για την ασφαλή μεταφορά δεδομένων από έναν πελάτη (ένα πρόγραμμα περιήγησης) σε έναν διακομιστή. Συνήθως χρησιμοποιείται για τη μεταφορά δεδομένων από μια φόρμα HTML στον διακομιστή.
Με το JavaScript στο πλάι σας, μπορείτε να επεξεργαστείτε απλές φόρμες χωρίς να καλέσετε τον διακομιστή. Και όταν είναι απαραίτητη η υποβολή της φόρμας σε ένα πρόγραμμα CGI, μπορείτε να έχετε τη JavaScript να φροντίζει όλες τις προκαταρκτικές απαιτήσεις, όπως την επικύρωση εισόδου για να βεβαιωθείτε ότι ο χρήστης έχει σημείωσε κάθε i. Σε αυτήν τη στήλη θα εξετάσουμε προσεκτικά τη σύνδεση φόρμας JavaScript, συμπεριλαμβανομένου του τρόπου χρήσης του αντικειμένου φόρμας JavaScript, του τρόπου ανάγνωσης και ρύθμισης περιεχομένου φόρμας και του τρόπου ενεργοποίησης συμβάντων JavaScript με χειρισμό στοιχείων ελέγχου φόρμας. Θα καλύψουμε επίσης τον τρόπο χρήσης του JavaScript για την επαλήθευση της εισαγωγής φόρμας και την παράδοση της φόρμας σε ένα πρόγραμμα CGI.
Εκμάθηση JavaScript
Αυτό το άρθρο είναι μέρος του αρχείου τεχνικού περιεχομένου JavaWorld. Μπορείτε να μάθετε πολλά για τον προγραμματισμό JavaScript διαβάζοντας άρθρα στο Σειρά JavaScript, απλώς λάβετε υπόψη ότι ορισμένες από τις πληροφορίες είναι πιθανό να είναι ξεπερασμένες. Ανατρέξτε στην ενότητα "Χρήση ενσωματωμένων αντικειμένων JavaScript" και "Προγραμματισμός εντοπισμού σφαλμάτων JavaScript" για περισσότερα σχετικά με τον προγραμματισμό με JavaScript.
Δημιουργία της φόρμας
Υπάρχουν λίγες διαφορές μεταξύ μιας ευθείας φόρμας HTML και μιας φόρμας με βελτιωμένη JavaScript. Το κύριο είναι ότι μια φόρμα JavaScript βασίζεται σε έναν ή περισσότερους χειριστές συμβάντων, όπως το onClick ή το onSubmit. Αυτά επικαλούνται μια ενέργεια JavaScript όταν ο χρήστης κάνει κάτι στη φόρμα, όπως κάνοντας κλικ σε ένα κουμπί. Οι διαχειριστές συμβάντων, οι οποίοι τοποθετούνται με τα υπόλοιπα χαρακτηριστικά στις ετικέτες φόρμας HTML, είναι αόρατοι σε ένα πρόγραμμα περιήγησης που δεν υποστηρίζει JavaScript. Λόγω αυτού του χαρακτηριστικού, μπορείτε συχνά να χρησιμοποιήσετε μία φόρμα τόσο για προγράμματα περιήγησης JavaScript όσο και για προγράμματα περιήγησης εκτός JavaScript.
Τυπικά αντικείμενα ελέγχου φόρμας - που ονομάζονται επίσης "widgets" - περιλαμβάνουν τα ακόλουθα:
- Πλαίσιο κειμένου για εισαγωγή γραμμής κειμένου
- Πιέστε το κουμπί για να επιλέξετε μια ενέργεια
- Κουμπιά επιλογής για να κάνετε μία επιλογή μεταξύ μιας ομάδας επιλογών
- Επιλέξτε τα πλαίσια για να επιλέξετε ή να αποεπιλέξετε μία, ανεξάρτητη επιλογή
Δεν θα ασχοληθώ με την απαρίθμηση όλων των χαρακτηριστικών αυτών των στοιχείων ελέγχου (widgets) και τον τρόπο χρήσης τους σε HTML. Οι περισσότερες αναφορές σε HTML θα σας παρέχουν τις λεπτομέρειες. Για χρήση με JavaScript, πρέπει πάντα να θυμάστε να παρέχετε ένα όνομα για την ίδια τη φόρμα και κάθε στοιχείο ελέγχου που χρησιμοποιείτε. Τα ονόματα σάς επιτρέπουν να αναφέρετε το αντικείμενο στη σελίδα σας με βελτιωμένη JavaScript.
Η τυπική φόρμα μοιάζει με αυτό. Σημείωση Έχω παράσχει NAME = χαρακτηριστικά για όλα τα στοιχεία ελέγχου φόρμας, συμπεριλαμβανομένης της ίδιας της φόρμας:
Εισαγάγετε κάτι στο πλαίσιο:- ΟΝΟΜΑ ΕΝΤΥΠΟ = "myform" ορίζει και ονομάζει τη φόρμα. Αλλού στο JavaScript μπορείτε να αναφέρετε αυτήν τη φόρμα με το όνομα Μορφή. Το όνομα που δίνετε στη φόρμα σας εξαρτάται από εσάς, αλλά θα πρέπει να συμμορφώνεται με τους τυπικούς κανόνες ονομασίας μεταβλητής / λειτουργίας JavaScript (χωρίς κενά, χωρίς περίεργους χαρακτήρες εκτός από την υπογράμμιση κ.λπ.)
- ΔΡΑΣΗ = "" καθορίζει πώς θέλετε το πρόγραμμα περιήγησης να χειρίζεται τη φόρμα όταν υποβάλλεται σε πρόγραμμα CGI που εκτελείται στο διακομιστή. Δεδομένου ότι αυτό το παράδειγμα δεν έχει σχεδιαστεί για να υποβάλει τίποτα, η διεύθυνση URL για το πρόγραμμα CGI παραλείπεται.
- ΜΕΘΟΔΟΣ = "GET" ορίζει τα δεδομένα της μεθόδου που διαβιβάζονται στον διακομιστή κατά την υποβολή της φόρμας. Σε αυτήν την περίπτωση το atttibute είναι puffer καθώς το παράδειγμα φόρμας δεν υποβάλλει τίποτα.
- ΤΥΠΟΣ ΕΙΣΟΔΟΥ = "κείμενο" ορίζει το αντικείμενο του πλαισίου κειμένου. Αυτή είναι η τυπική σήμανση HTML.
- ΤΥΠΟΣ ΕΙΣΟΔΟΥ = "κουμπί" ορίζει το αντικείμενο του κουμπιού. Πρόκειται για τυπική σήμανση HTML εκτός από το πρόγραμμα χειρισμού onClick.
- onClick = "testResults (this.form)" είναι ένας χειριστής συμβάντων - χειρίζεται ένα συμβάν, σε αυτήν την περίπτωση κάνοντας κλικ στο κουμπί. Όταν κάνετε κλικ στο κουμπί, το JavaScript εκτελεί την έκφραση εντός των εισαγωγικών. Η έκφραση λέει ότι καλεί τη συνάρτηση testResults αλλού στη σελίδα και μεταβιβάζει σε αυτήν το τρέχον αντικείμενο φόρμας.
Λήψη τιμής από ένα αντικείμενο φόρμας
Ας πειραματιστούμε με τη λήψη τιμών από αντικείμενα φόρμας. Φορτώστε τη σελίδα και, στη συνέχεια, πληκτρολογήστε κάτι στο πλαίσιο κειμένου. Κάντε κλικ στο κουμπί και αυτό που πληκτρολογήσατε εμφανίζεται στο πλαίσιο ειδοποίησης.
Λίστα 1. testform.html
Test Input function testResults (form) {var TestVar = form.inputbox.value; ειδοποίηση ("Πληκτρολογήσατε:" + TestVar); } Εισαγάγετε κάτι στο πλαίσιο:Δείτε πώς λειτουργεί το σενάριο. Το JavaScript καλεί τη λειτουργία testResults όταν κάνετε κλικ στο κουμπί στη φόρμα. Η συνάρτηση testResults περνά το αντικείμενο φόρμας χρησιμοποιώντας τη σύνταξη this.form (αυτή η λέξη-κλειδί αναφέρεται στο στοιχείο ελέγχου κουμπιού · η φόρμα είναι μια ιδιότητα του κουμπιού ελέγχου και αντιπροσωπεύει το αντικείμενο φόρμας). Έχω δώσει το όνομα του αντικειμένου της φόρμας μορφή μέσα στη συνάρτηση testResult, αλλά μπορείτε να ορίσετε οποιοδήποτε όνομα θέλετε.
Η συνάρτηση testResults είναι απλή - απλώς αντιγράφει τα περιεχόμενα του πλαισίου κειμένου σε μια μεταβλητή που ονομάζεται TestVar. Παρατηρήστε πώς αναφέρεται το περιεχόμενο του πλαισίου κειμένου. Ορίσαμε το αντικείμενο φόρμας που ήθελα να χρησιμοποιήσω (ονομάζεται μορφή), το αντικείμενο μέσα στη φόρμα που ήθελα (κάλεσε κουτί εισόδου), και την ιδιότητα αυτού του αντικειμένου που ήθελα (το αξία ιδιοκτησία).
Περισσότερα από το JavaWorld
Θέλετε περισσότερα μαθήματα προγραμματισμού και ειδήσεις; Αποκτήστε το ενημερωτικό δελτίο JavaWorld Enterprise Java στα εισερχόμενά σας.
Ορισμός τιμής σε ένα αντικείμενο φόρμας
Η ιδιότητα τιμής του πλαισίου εισόδου, που φαίνεται στο παραπάνω παράδειγμα, είναι αναγνώσιμη και εγγράψιμη. Δηλαδή, μπορείτε να διαβάσετε ό, τι έχει πληκτρολογηθεί στο πλαίσιο και μπορείτε να γράψετε δεδομένα ξανά σε αυτό. Η διαδικασία καθορισμού της τιμής σε ένα αντικείμενο φόρμας είναι ακριβώς το αντίστροφο της ανάγνωσής της. Ακολουθεί ένα σύντομο παράδειγμα για να δείξετε τον καθορισμό μιας τιμής σε ένα πλαίσιο κειμένου φόρμας. Η διαδικασία είναι παρόμοια με το προηγούμενο παράδειγμα, εκτός από αυτήν τη φορά υπάρχουν δύο κουμπιά. Κάντε κλικ στο κουμπί "Ανάγνωση" και το σενάριο διαβάζει αυτό που πληκτρολογήσατε στο πλαίσιο κειμένου. Κάντε κλικ στο κουμπί "Εγγραφή" και το σενάριο γράφει μια ιδιαίτερα έντονη φράση στο πλαίσιο κειμένου.
Λίστα 2. set_formval.html
Test Input function readText (form) {TestVar = form.inputbox.value; ειδοποίηση ("Πληκτρολογήσατε:" + TestVar); }
function writeText (form) {form.inputbox.value = "Καλή σας μέρα!" } Εισαγάγετε κάτι στο πλαίσιο:
- Όταν κάνετε κλικ στο κουμπί "Ανάγνωση", το JavaScript καλεί τη συνάρτηση readText, η οποία διαβάζει και εμφανίζει την τιμή που εισαγάγατε στο πλαίσιο κειμένου.
- Όταν κάνετε κλικ στο κουμπί "Εγγραφή", το JavaScript καλεί τη συνάρτηση writeText, η οποία γράφει "Καλή μέρα!" στο πλαίσιο κειμένου.
Ανάγνωση άλλων τιμών αντικειμένου φόρμας
Το πλαίσιο κειμένου είναι ίσως το πιο κοινό αντικείμενο φόρμας που θα διαβάσετε (ή να γράψετε) χρησιμοποιώντας JavaScript. Ωστόσο, μπορείτε να χρησιμοποιήσετε JavaScript για να διαβάσετε και να γράψετε τιμές από τα περισσότερα άλλα αντικείμενα (σημειώστε ότι το JavaScript δεν μπορεί προς το παρόν να χρησιμοποιηθεί για ανάγνωση ή εγγραφή δεδομένων χρησιμοποιώντας το πλαίσιο κειμένου κωδικού πρόσβασης) Εκτός από τα πλαίσια κειμένου, το JavaScript μπορεί να χρησιμοποιηθεί με:
- Κρυφό πλαίσιο κειμένου (ΤΥΠΟΣ = "κρυφό").
- Κουμπί επιλογής (TYPE = "radio")
- Πλαίσιο ελέγχου (ΤΥΠΟΣ = "πλαίσιο ελέγχου")
- Περιοχή κειμένου ()
- Λίστες ()
Χρήση κρυφών πλαισίων κειμένου
Από άποψη JavaScript, τα κρυφά πλαίσια κειμένου συμπεριφέρονται όπως τα κανονικά πλαίσια κειμένου, μοιράζονται τις ίδιες ιδιότητες και μεθόδους. Από την άποψη του χρήστη, τα κρυφά πλαίσια κειμένου "δεν υπάρχουν" επειδή δεν εμφανίζονται στη φόρμα. Αντίθετα, τα κρυφά πλαίσια κειμένου είναι τα μέσα με τα οποία μπορούν να περάσουν ειδικές πληροφορίες μεταξύ διακομιστή και πελάτη. Μπορούν επίσης να χρησιμοποιηθούν για την αποθήκευση προσωρινών δεδομένων που μπορεί να θέλετε να χρησιμοποιήσετε αργότερα. Επειδή τα κρυφά πλαίσια κειμένου χρησιμοποιούνται όπως τα τυπικά πλαίσια κειμένου, δεν θα δοθεί ξεχωριστό παράδειγμα εδώ.
Χρήση κουμπιών ραδιοφώνου
Τα κουμπιά επιλογής χρησιμοποιούνται για να επιτρέψουν στον χρήστη να επιλέξει ένα και μόνο ένα στοιχείο από μια ομάδα επιλογών. Τα κουμπιά επιλογής χρησιμοποιούνται πάντα σε πολλαπλάσια. δεν υπάρχει λογική αίσθηση ότι έχετε μόνο ένα κουμπί επιλογής σε μια φόρμα, επειδή μόλις κάνετε κλικ σε αυτό, δεν μπορείτε να το ξεκλειδώσετε. Εάν θέλετε μια απλή επιλογή κλικ / αποεπιλέξτε, χρησιμοποιήστε ένα πλαίσιο ελέγχου (δείτε παρακάτω).
Για να ορίσετε κουμπιά επιλογής για JavaScript, δώστε σε κάθε αντικείμενο το ίδιο όνομα. Το JavaScript θα δημιουργήσει έναν πίνακα χρησιμοποιώντας το όνομα που έχετε καταχωρίσει. Στη συνέχεια αναφέρετε τα κουμπιά χρησιμοποιώντας τους πίνακες ευρετηρίου. Το πρώτο κουμπί της σειράς αριθμείται 0, το δεύτερο αριθμείται 1 και ούτω καθεξής. Λάβετε υπόψη ότι το χαρακτηριστικό VALUE είναι προαιρετικό για φόρμες μόνο JavaScript. Ωστόσο, θα θέλατε να δώσετε μια τιμή εάν υποβάλετε τη φόρμα σε ένα πρόγραμμα CGI που εκτελείται στο διακομιστή.
Ακολουθεί ένα παράδειγμα δοκιμής ποιο κουμπί έχει επιλεγεί. Ο βρόχος για τη λειτουργία testButton περιστρέφεται σε όλα τα κουμπιά της ομάδας "rad". Όταν εντοπίσει το κουμπί που έχει επιλεγεί, ξεσπά από τον βρόχο και εμφανίζει τον αριθμό του κουμπιού (θυμηθείτε: ξεκινώντας από το 0).
Λίστα 3. form_radio.html
Radio Button Test function testButton (form) {για (Count = 0; Count <3; Count ++) {if (form.rad [Count] .checked) break; } ειδοποίηση ("Κουμπί" + Πλήθος + "έχει επιλεγεί"); }Η ρύθμιση επιλογής κουμπιών επιλογής με αγορά HTML είναι απλή. Εάν θέλετε να εμφανίζεται αρχικά η φόρμα με επιλεγμένο ένα συγκεκριμένο κουμπί επιλογής, προσθέστε το χαρακτηριστικό CHECKED στη σήμανση HTML για αυτό το κουμπί:
Μπορείτε επίσης να ορίσετε την επιλογή κουμπιών μέσω προγραμματισμού μέσω JavaScript, χρησιμοποιώντας την επιλεγμένη ιδιότητα. Καθορίστε το ευρετήριο της συστοιχίας κουμπιών επιλογής που θέλετε να ελέγξετε.
form.rad [0] .checked = true; // ορίζει το πρώτο κουμπί στην ομάδα radΧρήση πλαισίων ελέγχου
Τα πλαίσια ελέγχου είναι αυτόνομα στοιχεία. δηλαδή, δεν αλληλεπιδρούν με γειτονικά στοιχεία όπως τα κουμπιά επιλογής. Επομένως είναι λίγο πιο εύκολο στη χρήση. Χρησιμοποιώντας JavaScript μπορείτε να ελέγξετε εάν ένα πλαίσιο ελέγχου είναι επιλεγμένο χρησιμοποιώντας την επιλεγμένη ιδιότητα, όπως φαίνεται εδώ. Ομοίως, μπορείτε να ρυθμίσετε την επιλεγμένη ιδιότητα να προσθέτει ή να αφαιρεί το σημάδι επιλογής από ένα πλαίσιο ελέγχου. Σε αυτό το παράδειγμα ένα μήνυμα προειδοποίησης σάς ενημερώνει εάν είναι επιλεγμένο το πρώτο πλαίσιο ελέγχου. Η τιμή είναι αληθής εάν είναι επιλεγμένο το πλαίσιο. ψεύτικο αν δεν είναι.
Λίστα 4. form_check.html
Checkbox Test function testButton (form) {alert (form.check1.checked); }Πλαίσιο ελέγχου 1
Πλαίσιο ελέγχου 2
Πλαίσιο ελέγχου 3
Όπως και με το αντικείμενο του κουμπιού επιλογής, προσθέστε ένα χαρακτηριστικό CHECKED στη σήμανση HTML για το πλαίσιο ελέγχου που θέλετε να ελέγξετε αρχικά όταν φορτώνεται η φόρμα.
Πλαίσιο ελέγχου 1>Μπορείτε επίσης να ορίσετε την επιλογή κουμπιών μέσω προγραμματισμού μέσω JavaScript, χρησιμοποιώντας την επιλεγμένη ιδιότητα. Καθορίστε το όνομα του πλαισίου ελέγχου που θέλετε να ελέγξετε, όπως στο
form.check1.checked = true;Χρήση περιοχών κειμένου
Οι περιοχές κειμένου χρησιμοποιούνται για την εισαγωγή κειμένου πολλαπλών γραμμών. Το προεπιλεγμένο μέγεθος του πλαισίου κειμένου είναι 1 σειρά με 20 χαρακτήρες. Μπορείτε να αλλάξετε το μέγεθος χρησιμοποιώντας τα χαρακτηριστικά COLS και ROWS. Ακολουθεί ένα τυπικό παράδειγμα περιοχής κειμένου με πλαίσιο κειμένου πλάτους 40 χαρακτήρων με 7 σειρές:
Μπορείτε να χρησιμοποιήσετε το JavaScript για να διαβάσετε τα περιεχόμενα του πλαισίου περιοχής κειμένου. Αυτό γίνεται με την ιδιότητα value. Εδώ είναι ένα παράδειγμα:
