ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI)

Transcript

1 ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος τρόπος για να προστεθεί αλληλεπιδραστικότητα στις ιστοσελίδες. Παρέχουν το κατάλληλο φιλικό περιβάλλον διασύνδεσης για την εισαγωγή δεδομένων, αναζητήσεις σε βάσεις δεδομένων κτλ. Η αποστολή των στοιχείων μιας φόρμας και η επεξεργασία τους, στη συνέχεια, γίνεται συνήθως από κάποια εφαρμογή η οποία χρησιμοποιεί μια τεχνική, που ονομάζεται Συνήθης ιεπαφή ιασύνδεσης (Common Gateway Interface - CGI). 2 1

2 Η ετικέτα <FORM> Η δημιουργία μιας φόρμας επιτυγχάνεται με τη χρήση της ετικέτας <FORM>. Η κύρια αποστολή μιας φόρμας είναι η αποστολή των δεδομένων που έλαβε σε κάποιο πρόγραμμαεφαρμογή για επεξεργασία. Η δομή της είναι η παρακάτω: <FORM METHOD= ACTION= > <INPUT > <SELECT > </FORM> εν επιτρέπεται η εμφωλευμένη χρήση της ετικέτας <FORM>. 3 Μέθοδοι αποστολής δεδομένων (METHOD) Η ιδιότητα METHOD προδιαγράφει την μέθοδο με την οποία θα γίνει η αποστολή της φόρμας. Οι εναλλακτικές τιμές αυτής της ιδιότητας είναι αρκετές, αλλά χρησιμοποιούνται συνήθως μόνο δύο: METHOD = GET METHOD = POST 4 2

3 GET ή POST Η προκαθορισμένη (default) μέθοδος είναι η GET. H προτιμότερη όμως είναι η POST: Τα δεδομένα αποστέλλονται ως μια ξεχωριστή σειρά εισόδου, στον εξυπηρετητή (server) και στο κατάλληλο σενάριο (χωρίς τη διαμεσολάβηση μεταβλητών ή ορισμάτων ). εν υπάρχει όριο στο μέγεθος των δεδομένων που περνούνστονεξυπηρετητή. Με τη μέθοδο GET: Η αποστολή των δεδομένων γίνεται μέσα από την προσκόλλησή τους στο URL του σεναρίου. Υπάρχει περιορισμός του μήκους της συμβολοσειράς που μπορεί να αποστέλλει (255 χαρακτήρες μαζί με το URL). 5 H ιδιότητα της ενέργειας (ACTION) H ιδιότητα ACTION προδιαγράφει την ενέργεια που θα εκτελεστεί, όταν αποσταλεί η φόρμα. Μια φόρμα χωρίς προκαθορισμένη την ιδιότητα ACTION δεν μπορεί να εκτελεστεί. Ο ορισμός μιας ενέργειας γίνεται με την αναγραφή του κατάλληλου URL τουσεναρίουπουθα εκτελεστεί. Συνήθως τα περισσότερα σενάρια CGI είναι τοποθετημένα σε έναν κατάλογο που ονομάζεται cgi-bin. Αν αντί για URL χρησιμοποιηθεί διεύθυνση (ACTION= mailto:spkar@sch.gr ) τα δεδομένα της φόρμας αποστέλλονται στη συγκεκριμένη διεύθυνση. 6 3

4 Πρόσθεση περιεχομένου στις φόρμες Οι τρεις ετικέτες που χρησιμοποιούνται για πρόσθεση περιεχομένου σε φόρμες είναι: INPUT: χρησιμοποιούνται για τον ορισμό πεδίων εισόδου, όπως τα πλαίσια κειμένου, ραδιοπλήκτρα κλπ. SELECT: δημιουργεί μενού με επιλογές. TEXTAREA: δημιουργεί πλαίσια κειμένου με πολλές γραμμές για είσοδο. 7 INPUT <INPUT TYPE= τύπος πεδίου NAME= όνομα πεδίου > Τύπος πεδίου TEXT PASSWORD CHECKBOX RADIO HIDDEN IMAGE RESET SUBMIT Περιγραφή Πεδίο κειμένου μιας γραμμής. Πεδίο κειμένου που παρουσιάζει όλους τους χαρακτήρες με *. Κουτί ελέγχου για επιλογή από τον χρήστη. Ραδιόπληκτρο όπου ο χρήστης μπορεί να επιλέξει μόνο μια τιμή από μια ομάδα Πεδίο τιμών. αόρατο στον χρήστη, αλλά γνωστό στο σενάριο επεξεργασίας των δεδομένων. Πεδίο μεεικόνα. Πλήκτρο που καθαρίζει όλα τα δεδομένα της φόρμας. Πλήκτρο που αποστέλλει όλα τα δεδομένα της φόρμας. Παράμετροι MAXLENGTH: Toμέγιστο μήκος ενός πεδίου. SIZE: Το μήκος του πεδίου σε αριθμό χαρακτήρων. VALUE: Μια αρχική τιμή για το πεδίο κειμένου. CHECKED: Καθορίζεται η προεπιλογή ενός πεδίου. DISABLED: Απενεργοποιείται ένα πεδίο. VALUE: Η τιμή που αποδίδεται αν επιλεγεί το πεδίο. VALUE: Η τιμή του πεδίου. ALIGN: top/middle/bottom SRC: η εικόνα VALUE: η περιγραφή που εμφανίζεται πάνω στο κουμπί. 8 4

5 SELECT <SELECT NAME= SIZE= > <OPTION></OPTION> <OPTION></OPTION> SELECTED </SELECT> Για να επιτραπεί στο χρήστη η πολλαπλή επιλογή θα πρέπει να χρησιμοποιηθεί η ιδιότητα MULTIPLE. Αν size= 1 τότε δημιουργείται πτυσσόμενο μενού (pull down). 9 TEXTAREA <TEXTAREA NAME= ROWS= COLS= > </TEXTAREA> ROWS: Το ύψος του παραθύρου σε γραμμές. COLS: Το μήκος του παραθύρου σε χαρακτήρες. 10 5