Συλλογή και Επεξεργασία Δεδομένων με Φόρμες

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Συλλογή και Επεξεργασία Δεδομένων με Φόρμες"

Σωφρονία Κεδίκογλου
7 χρόνια πριν
Προβολές:

1 Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του κειμένου και των γραφικών της οθόνης αλληλεπιδραστικά. Οι φόρμες επιτρέπουν τη δημιουργία πεδίων στα οποία ο χρήστης εισάγει πληροφορίες ή επιλέγει μεταξύ κάποιων προ-επιλογών. Όταν αποσταλούν οι πληροφορίες, αυτές συλλέγονται από ένα πρόγραμμα (script) στο διακομιστή (server) για περαιτέρω επεξεργασία. Η ετικέτα <FORM> δείχνει την αρχή μιας φόρμας και το το τέλος. Ορίζοντας μια φόρμα πρέπει να καθορίσουμε : το περιεχόμενο, τη διεύθυνση στην οποία θα σταλεί, και τον τρόπο με τον οποίο θα σταλεί. Μπορούμε να τοποθετήσουμε ανάμεσα στο <FORM> και το όποιους και όσους τύπους δημιουργίας πεδίων εισαγωγής δεδομένων μιας φόρμας θέλουμε. Γενικά, υπάρχουν 3 τύποι σημειώσεων (tags) για τη δημιουργία πεδίων που θα ορίζουν το περιεχόμενο μιας φόρμας: <TEXTAREA> <SELECT> <INPUT> <TEXTAREA> Με την ετικέτα <TEXTAREA>, μπορούμε να ορίσουμε ένα πεδίο χαρακτήρων πολλών γραμμών. Αυτόματα εμφανίζεται ένα παράθυρο χωρητικότητας 40 χαρακτήρων. <HTML> <HEAD> <TITLE>TEXTAREA.HTML</TITLE> </HEAD> <BODY> <FORM> <TEXTAREA NAME="comments" ROWS=4 COLS=40> Κείμενο... 2η σειρά 3η σειρά κτλ </TEXTAREA> </BODY> </HTML> Περίγραμμα 4.1. Παράδειγμα δημιουργίας μιας φόρμας

2 Εικόνα 4.1. Εμφάνιση του περιγράμματος 4.1. Με τη βοήθεια των ιδιοτήτων ROWS και COLS μπορούμε να ορίσουμε περισσότερες γραμμές και στήλες όπως χαρακτηριστικά εμφανίζονται στο περίγραμμα 4.1. όπου ορίζεται ένας χώρος με τέσσερις γραμμές και 40 χαρακτήρες ανά γραμμή. Επίσης, μπορούμε να ορίσουμε ένα όνομα για την κάθε οριζόμενη περιοχή με την ιδιότητα NAME. Συνήθως, με την ετικέτα <TEXTAREA> ορίζουμε μια περιοχή μέσα στην οποία προσθέτουμε σχόλια ή παρατηρήσεις που είναι χρήσιμες στον χρήστη κατά την περιήγησή του στην εμφανιζόμενη σελίδα. Το πρόγραμμα του περιγράμματος 4.1. θα εμφανίσει την εικόνα <SELECT> Η ετικέτα <SELECT> επιτρέπει να εμφανιστεί μια λίστα επιλογών στην οθόνη. Πρέπει να ορίσουμε υποχρεωτικά και ένα διακεκριμένο όνομα για κάθε μια φόρμα και μπορούμε να ορίσουμε όσες επιλογές επιθυμούμε. Οι ιδιότητες της ετικέτας <SELECT> είναι: NAME SIZE MULTIPLE Ορίζεται το όνομα των δεδομένων Καθορίζεται ο αριθμός των επιλογών. Αν δεν οριστεί είναι 1. Επιτρέπει να ορίσουμε πολλαπλές επιλογές. <HTML> <HEAD> <TITLE>SELECT2.HTM</TITLE> </HEAD> <BODY> <FORM> Τύποι συνδέσεων :<BR> <SELECT MULTIPLE NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB

3 <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk </SELECT> </BODY> </HTML> Περίγραμμα 4.2. Παράδειγμα δημιουργίας μιας φόρμας με τη <SELECT> Επίσης, υπάρχει και η επιλογή OPTION με την οποία μπορούμε να ορίσουμε τις τιμές που θα αποσταλούν με τη βοήθεια της VALUE και αν θέλουμε να εμφανίζεται μια επιλογή εξ ορισμού (default) πρέπει να χρησιμοποιηθεί η τιμή SELECTED. Το παράδειγμα του περιγράμματος 4.2. ορίζει μια λίστα με 4 επιλογές που εμφανίζονται στην εικόνα <INPUT> Εικόνα 4.2. Εμφάνιση του περιγράμματος 4.2. Το στοιχείο <INPUT> επιτρέπει να συλλέξουμε πληροφορίες και έχει τις ακόλουθες ιδιότητες : NAME Ορίζει το όνομα των δεδομένων και είναι υποχρεωτικό SIZE Ορίζει το μέγεθος του πεδίου σε χαρακτήρες MAXLENGTH Ορίζει το μέγιστο επιτρεπτό πλήθος των χαρακτήρων σε πεδία text ή password VALUE Εμφανίζει το εξ ορισμού κείμενο CHECKED Δείχνει αναμμένο ένα check box ή ένα radio button όταν ξεκινά η εμφάνισή τους στην οθόνη TYPE Είναι η πιο χαρακτηριστική ιδιότητα της ετικέτας <INPUT> και μπορεί να πάρει τιμές με τον ακόλουθο τρόπο: Η εξ ορισμού τιμή της TYPE είναι TEXT και επιτρέπει να ορίσουμε τη φύση του κειμένου που θα εμφανιστεί με την <INPUT>.

4 Αν οριστεί PASSWORD, εμφανίζει αστεράκια στην οθόνη αντί για τους χαρακτήρες που πληκτρολογούνται έτσι ώστε να μην είναι αναγνώσιμο το συνθηματικό που πληκτρολογείται Αν οριστεί CHECKBOX, εμφανίζει ένα απλό ορθογώνιο (check box) π.χ. για να ορίσουμε μια απάντηση της μορφής ΝΑΙ ή ΟΧΙ Αν οριστεί RADIO τότε αποτελεί μια πιο σύνθετη μορφή ενός CHECKBOX επιτρέποντας όμως μια μόνο επιλογή από το σύνολο των δυνατών επιλογών Αν οριστεί RESET εμφανίζει ένα ορθογώνιο (push button) που όταν ενεργοποιηθεί (πατηθεί) θα καθαρίσει (θα αδειάσει) το περιεχόμενο όλων των φορμών, τοποθετώντας ταυτόχρονα τις αρχικές τιμές σε κάθε μια φόρμα. Αν οριστεί SUBMIT εμφανίζει ένα ορθογώνιο (push button) το οποίο όταν ενεργοποιηθεί αποστέλλει τα δεδομένα στο διακομιστή. Αν οριστεί HIDDEN δεν εμφανίζει τίποτε στην οθόνη και επιτρέπει να κρύψουμε ένα πεδίο INPUT στην οθόνη. Οι δύο ιδιότητες με τις οποίες ορίζουμε τη διεύθυνση και τον τρόπο αποστολής των στοιχείων μιας συμπληρωμένης φόρμας προς το διακομιστή είναι οι ACTION και η METHOD για τις οποίες και έχουμε: ACTION METHOD Ορίζει τη διεύθυνση (URL) του διακομιστή η οποία θα δεχτεί το περιεχόμενο της φόρμας Αν δεν οριστεί καμία διεύθυνση, τότε επιστρέφει το περιεχόμενο της φόρμας στη διεύθυνση από όπου προέρχεται η σελίδα. Ορίζει τον τρόπο αποστολής των πληροφοριών. Οι τιμές της METHOD είναι POST και GET. Μια πιο αναλυτική περιγραφή για αυτές τις τιμές και τον τρόπο αποστολής των πληροφοριών στο διακομιστή υπάρχει στην παράγραφο Παράδειγμα σύνταξης μιας φόρμας για αποστολή στοιχείων: <FORM METHOD="POST" ACTION="/cgi-bin/comment_script"> Παράδειγμα φόρμας συγκέντρωσης πληροφοριών Το περίγραμμα 4.3. αποτελεί ένα χαρακτηριστικό πρόγραμμα παρουσίασης μιας σελίδας στην οποία χρησιμοποιούνται πολλές από τις δυνατότητες δημιουργίας μιας φόρμας και όπου ο χρήστης μπορεί να πραγματοποιήσει άμεσα (on line) μια παραγγελία μέσω του Διαδικτύου. Η συμπληρωμένη φόρμα θα αποσταλεί με τη μέθοδο POST (περισσότερες λεπτομέρειες υπάρχουν στην παράγραφο ) μόλις ο χρήστης πατήσει το σημείο όπου εμφανίζεται το κείμενο ΑΠΟΣΤΟΛΗ ΠΑΡΑΓΓΕΛΙΑΣ και θα επεξεργαστεί σύμφωνα με το πρόγραμμα που βρίσκεται στη διεύθυνση: όπως καθορίζεται από την ιδιότητα ACTION. Το πρόγραμμα αυτό μπορεί να είναι γραμμένο σε μια οποιαδήποτε γλώσσα προγραμματισμού και το οποίο ουσιαστικά δέχεται σαν είσοδο τις τιμές που μεταφέρουν οι μεταβλητές οι οποίες ορίζονται με την ιδιότητα NAME. Η ιδιότητα TYPE με τιμή SUBMIT σημαίνει ότι, όταν ο χρήστης πατήσει το εικονίδιο που εμφανίζεται και έχει περιεχόμενο την τιμή της ιδιότητας VALUE (εδώ η έκφραση ΑΠΟΣΤΟΛΗ ΠΑΡΑΓΓΕΛΙΑΣ), θα αποσταλεί το περιεχόμενο της φόρμας στη δηλωθείσα διεύθυνση από την ιδιότητα ACTION. Η ιδιότητα TYPE μπορεί να πάρει και

5 την τιμή RESET που σημαίνει ότι, όταν ο χρήστης πατήσει το εικονίδιο που εμφανίζεται και έχει περιεχόμενο την τιμή της ιδιότητας VALUE (εδώ η έκφραση ΑΚΥΡΩΣΗ ΠΑΡΑΓΓΕΛΙΑΣ), δεν θα αποσταλεί η φόρμα αλλά θα επανεμφανιστεί από την αρχή μια κενή φόρμα στην οθόνη για την εκ νέου εισαγωγή των δεδομένων. Με τη βοήθεια της ετικέτας INPUT ορίζουμε τα πεδία στα οποία ο χρήστης θα πρέπει να συμπληρώσει τις αναγκαίες πληροφορίες τις οποίες και θα επεξεργαστεί το πρόγραμμα. Κάνοντας χρήση της ιδιότητας SIZE, μπορούμε να ορίσουμε το εύρος κάθε πεδίου έτσι ώστε αφ ενός να είναι ικανό να δεχτεί την πληροφορία χωρίς πιθανές απώλειες π.χ. για τον αριθμό του τηλεφώνου δεν θα πρέπει να είναι μικρότερο από δέκα θέσεις, αφ ετέρου η συνολική εικόνα που θα παρουσιάζει η φόρμα στην οθόνη να είναι ευχάριστη οπτικά και εύκολη στην πρόσβαση. Η ιδιότητα NAME επιτρέπει να δώσουμε ένα διακεκριμένο όνομα στις μεταβλητές οι οποίες θα μεταφέρουν την πληροφορία που θα εισάγει ο χρήστης και η οποία θα επεξεργαστεί από το πρόγραμμα. Η σελίδα που εμφανίζει το πρόγραμμα αυτό στο διαδίκτυο είναι η εικόνα 4.3. Στον πίνακα 4.1. εμφανίζονται οι ετικέτες της HTML που μπορούν να χρησιμοποιηθούν για τη δημιουργία και επεξεργασία μιας φόρμας συνοδευόμενες και από ένα παράδειγμα γενικής μορφής σύνταξης.. <HTML> <HEAD> <TITLE> Παραγγελία μέσω INTERNET</TITLE> </HEAD> <BODY> <H1>Εντυπο Παραγγελίας</H1> Συμπληρώστε το ακόλουθο έντυπο : <HR> <FORM METHOD="POST" ACTION=< <INPUT NAME="Name1" SIZE="15"> <INPUT NAME=" Name2" SIZE="25"> Όνομα, Επίθετο <INPUT NAME="Adress" SIZE="42"> Οδός <INPUT NAME="Zip" SIZE="10"> <INPUT NAME="Town" SIZE="30"> ΤΚ, Πόλη <INPUT NAME="TEL" SIZE="42"> Τηλέφωνο <H4>Επιθυμώ να παραγγείλω :</H4> <TEXTAREA NAME="Order" COLS="40" ROWS="3"> </TEXTAREA> <H4> Τρόπος πληρωμής :</H4> <INPUT NAME ="TypeP1" TYPE="radio" VALUE="REMB">Μετρητής <INPUT NAME="TypeP2" TYPE="radio" VALUE="CARTE">Πιστωτική Κάρτα <INPUT TYPE="submit" VALUE="Αποστολή παραγγελίας"> <INPUT TYPE="reset" VALUE="Ακύρωση παραγγελίας">

6 <HR> </BODY> </HTML> Περίγραμμα 4.3. Παράδειγμα μιας φόρμας για παραγγελία προϊόντων Εικόνα 4.3. Εμφάνιση του προγράμματος του περιγράμματος 4.3. Ετικέτα Ιδιότητα Γενική μορφή form <FORM ACTION="url" METHOD=GET

7 select textarea input TYPE ή ACTION="url" METHOD=POST <SELECT NAME="name"> <OPTION>1 <OPTION>2... <OPTION>n </SELECT> -με default τιμή το: <OPTION SELECTED> -πολλαπλών επιλογών (multiple choice): <SELECT NAME="name" MULTIPLE> <TEXTAREA NAME="name" ROWS=x COLS=y> </TEXTAREA> text <INPUT TYPE="TEXT" NAME="name" SIZE="x" MAXLENGTH="y" VALUE="12345"> password checkbox <INPUT TYPE="PASSWORD" NAME="pass" SIZE="x" VALUE="12345"> <INPUT TYPE="CHECKBOX" NAME="check"> -με έλεγχο: <INPUT TYPE="CHECKBOX" NAME="check" CHECKED> radio <INPUT TYPE="RADIO" NAME="radio" VALUE="value"> -με έλεγχο: <INPUT TYPE="RADIO" NAME="radio" VALUE="value" CHECKED > submit reset hidden <INPUT TYPE="SUBMIT" NAME="process" VALUE="Submit"> <INPUT TYPE="RESET" VALUE="reset"> <INPUT TYPE="HIDDEN" NAME="hiddenname" VALUE="value"> Πίνακας 4.1. Οι ετικέτες της HTML για τη δημιουργία φορμών

Σχετικά έγγραφα

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .