Χρησιμοποιώντας HTML για να συμπληρώσετε φόρμες - οι φόρμες

Οι φόρμες σάς επιτρέπουν να καταγράφετε δεδομένα από τους επισκέπτες του ιστότοπού σας. Η καταγραφή εισερχομένων από τους επισκέπτες σας επιτρέπει να τροποποιήσετε το υπάρχον περιεχόμενο στη σελίδα. Για παράδειγμα, τα φίλτρα τιμών και ημερομηνιών σε ιστότοπους αερογραμμών επιτρέπουν την ταχύτερη εύρεση μιας επιθυμητής πτήσης. Μπορείτε επίσης να αποθηκεύσετε την είσοδο για μεταγενέστερη χρήση.

Για παράδειγμα, ένας ιστότοπος μπορεί να χρησιμοποιήσει μια φόρμα εγγραφής για να συλλέξει τα στοιχεία σας ηλεκτρονικού ταχυδρομείου, όνομα χρήστη και κωδικό πρόσβασης για να σας επιτρέψει να την αποκτήσετε αργότερα.

Κατανόηση του τρόπου με τον οποίο λειτουργούν οι φόρμες

Τα έντυπα μεταδίδουν τις πληροφορίες που εισήγαγε ένας χρήστης σε ένα διακομιστή χρησιμοποιώντας την ακόλουθη διαδικασία:

1. Το πρόγραμμα περιήγησης εμφανίζει μια φόρμα στο μηχάνημα-πελάτη.

2. Ο χρήστης ολοκληρώνει τη φόρμα και πατά το κουμπί υποβολής.

3. Το πρόγραμμα περιήγησης υποβάλλει τα δεδομένα που συλλέγονται από τη φόρμα σε ένα διακομιστή.

4. Ο διακομιστής επεξεργάζεται και αποθηκεύει τα δεδομένα και αποστέλλει μια απάντηση στο μηχάνημα-πελάτη.

5. Το πρόγραμμα περιήγησης εμφανίζει την απάντηση, συνήθως υποδεικνύοντας εάν η υποβολή ήταν επιτυχής.

Προς το παρόν, όλα όσα χρειάζεται να γνωρίζετε είναι ότι οι γλώσσες προγραμματισμού από την πλευρά του διακομιστή, όπως Python, PHP και Ruby, χρησιμοποιούνται για την εγγραφή σεναρίων που λαμβάνουν και αποθηκεύουν υποβολές φόρμας.

Τα έντυπα είναι πολύ ευέλικτα και μπορούν να καταγράφουν ποικίλες εισόδους χρηστών. Τα πεδία εισαγωγής που χρησιμοποιούνται σε φόρμες μπορούν να περιλαμβάνουν πεδία ελεύθερου κειμένου, ραδιοφωνικά κουμπιά, πλαίσια ελέγχου, αναπτυσσόμενα μενού, εύρος τιμών, ημερομηνίες, αριθμούς τηλεφώνου και άλλα. Επιπλέον, τα πεδία εισαγωγής μπορούν να ρυθμιστούν στις αρχικές προεπιλεγμένες τιμές χωρίς εισροές χρηστών.

Χαρακτηριστικά

Περιγραφή τύπος πλαίσιο email submit

κείμενο

ραδιόφωνο

(μια πλήρης λίστα τιμών έχει παραλειφθεί εδώ για συντομία)

Ορίζει τον τύπο του πεδίου εισαγωγής που θα εμφανιστεί στη φόρμα. Για το παράδειγμα , το κείμενο χρησιμοποιείται για πεδία ελεύθερου κειμένου και η υποβολή χρησιμοποιείται για την δημιουργία ενός κουμπιού υποβολής.

τιμή

κείμενο Η αρχική τιμή του στοιχείου ελέγχου εισόδου. Δημιουργία βασικών εντύπων Μπορείτε να δημιουργήσετε μια βασική φόρμα με

Ορισμός μιας φόρμας με το στοιχείο της φόρμας.

Ξεκινήστε προσθέτοντας μια ετικέτα ανοίγματος και ετικέτα κλεισίματος.

1. Χρησιμοποιώντας το χαρακτηριστικό δράσης, καθορίστε στο στοιχείο της φόρμας όπου θέλετε να στείλετε δεδομένα φόρμας.

   Προσθέστε ένα χαρακτηριστικό δράσης στην ετικέτα ανοίγματος και ορίστε το ίσο με το URL μιας δέσμης ενεργειών που θα επεξεργαστεί και θα αποθηκεύσει την είσοδο του χρήστη.

2. Χρησιμοποιώντας το χαρακτηριστικό της μεθόδου, καθορίστε στο στοιχείο φόρμας πώς να στείλετε δεδομένα φόρμας.

   Προσθέστε ένα χαρακτηριστικό μεθόδου στην ετικέτα ανοίγματος και ορίστε το ίσο με το POST.

3. Το χαρακτηριστικό της μεθόδου είναι ίσο με το GET ή το POST. Γενικά, το POST χρησιμοποιείται για την αποθήκευση ευαίσθητων πληροφοριών (όπως αριθμούς πιστωτικών καρτών), ενώ το GET χρησιμοποιείται για να επιτρέπει στους χρήστες να κάνουν σελιδοδείκτες ή να μοιράζονται με άλλους τα αποτελέσματα μιας υποβαλλόμενης φόρμας (όπως για παράδειγμα λίστες πτήσεων).

   Παρέχοντας στους χρήστες τη δυνατότητα να εισάγουν και να υποβάλλουν απαντήσεις με το στοιχείο εισόδου.

   Μεταξύ των ετικετών ανοίγματος και κλεισίματος, δημιουργήστε μια ετικέτα.

4. Η φόρμα σας θα έχει μόνο μία ετικέτα ανοίγματος και κλεισίματος. Ωστόσο, θα έχετε τουλάχιστον δύο ετικέτες για τη συλλογή και την υποβολή δεδομένων χρήστη.

   Καθορίστε τους τύπους εισόδου χρησιμοποιώντας το χαρακτηριστικό τύπου στο στοιχείο εισόδου.

   Για αυτό το παράδειγμα, ορίστε το χαρακτηριστικό τύπου που αντιστοιχεί στο "κείμενο".

5. Η ετικέτα δεν έχει ετικέτα κλεισίματος, η οποία αποτελεί εξαίρεση στον κανόνα "κλείσιμο κάθε ετικέτας που ανοίγετε". Αυτές οι ετικέτες ονομάζονται αυτοκόλλητες ετικέτες.

   Τέλος, δημιουργήστε μια άλλη ετικέτα και ορίστε το χαρακτηριστικό τύπου που είναι ίσο με την υποβολή.

   Ο παρακάτω κώδικας παραδείγματος δείχνει τη σύνταξη για τη δημιουργία της μορφής που εμφανίζεται.

6. Το χαρακτηριστικό δράσης σε αυτή τη φόρμα είναι ίσο με το mailto, το οποίο σηματοδοτεί στο πρόγραμμα περιήγησης να στείλει ένα μήνυμα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας τον προεπιλεγμένο πελάτη αλληλογραφίας (όπως το Outlook ή το Gmail). Αν το πρόγραμμα περιήγησης δεν έχει ρυθμιστεί ώστε να χειρίζεται συνδέσμους ηλεκτρονικού ταχυδρομείου, τότε αυτή η φόρμα δεν θα λειτουργήσει. Συνήθως, οι φόρμες υποβάλλονται σε ένα διακομιστή για να επεξεργαστούν και να αποθηκεύσουν τα περιεχόμενα της φόρμας, αλλά σε αυτή τη μορφή παραδειγμάτων τα περιεχόμενα υποβάλλονται στην εφαρμογή ηλεκτρονικού ταχυδρομείου του χρήστη.