Πώς δημιουργούμε μια φόρμα επικοινωνίας

Για να δημιουργήσουμε μια φόρμα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων μας, χρειαζόμαστε την οδηγία <FORM> η λειτουργία της οποίας ρυθμίζεται από τις παραμέτρους METHOD (παίρνει τις τιμές GET και POST) και ACTION.

Η παράμετρος ACTION καλεί ένα CGI script, με άλλα λόγια ένα προγραμματάκι (τεχνικά δεν είναι πρόγραμμα, απλώς μια ακολουθία εντολών) που θα φροντίσει για την διαχείριση των δεδομένων που θα δώσει ο χρήστης.

Η παράμετρος METHOD, καθορίζει με ποιο τρόπο θα λάβει τα δεδομένα το CGI script. Όταν έχει την τιμή GET, τότε τα περιεχόμενα της φόρμας θα προστεθούν στο τέλος του URL που θα λάβει το CGI script. Με την τιμή POST το CGI script θα λάβει ξεχωριστά τα δεδομένα από το URL το οποίο του τα αποστέλλει (το URL χρειάζεται διότι όπως θα δούμε ένα CGI script μπορεί να εξυπηρετεί πολλές φόρμες, άρα πρέπει να γνωρίζει ποια του στέλνει τα δεδομένα που διαχειρίζεται). Συνήθως χρησιμοποιούμε την τιμή POST διότι δεν έχει περιορισμούς στην ποσότητα δεδομένων που θα δώσει ο χρήστης της φόρμας. Η GET έχει κάποιους περιορισμούς και σε μεγάλες ποσότητες δεδομένων, μπορεί κάποια από αυτά να χαθούν. Επίσης, οι διαχειριστές υπολογιστικών συστημάτων την αποφεύγουν διότι έχει αποδειχθεί ιδιαίτερα ευάλωτη σε επιθέσεις hackers.

Με βάση τα παραπάνω η <FORM> συντάσσεται ως εξής:

Στα παρακάτω παραδείγματα θα χρησιμοποιήσουμε ένα CGI script με το όνομα post-query που βρίσκεται στην διεύθυνση http://www.mcp.com/cgi-bin/post-query

ΣΥΜΒΟΥΛΗ: Ο κόμβος στον οποίο θα τοποθετήσετε τις σελίδες σας, έχει μια σειρά από CGI scripts. Φροντίστε να μάθετε ποια είναι αυτά διότι αν και μπορείτε να χρησιμοποιήσετε scripts και από άλλους κόμβους (όπως κάνουμε τώρα) θα είναι πολύ ταχύτερη η λειτουργία αν χρησιμοποιήσετε κάποιο που βρίσκεται στον ίδιο κόμβο.

Παράδειγμα:

Είδαμε το πλαίσιο μέσα στο οποίο δημιουργείται μια φόρμα. Για να δημιουργήσουμε τους χώρους στους οποίους θα τοποθετήσει τα δεδομένα του ο χρήστης χρησιμοποιούμε μια άλλη οδηγία, την <INPUT>.

<INPUT>

Καθορίζει τους χώρους στους οποίους θα τοποθετήσει τα δεδομένα του ο χρήστης. Λειτουργεί με τις παραμέτρους TYPE ή/και NAME.

Η TYPE καθορίζει το είδος των δεδομένων που θα πάρει η φόρμα από τον χρήστη. Αν δεν υπάρχει, τότε θεωρείται πως έχει την τιμή text (TYPE="text") που είναι η default (δηλαδή τα δεδομένα που εισάγονται είναι σε μορφή κειμένου.

Η NAME καθορίζει το όνομα (λεζάντα) που δίδεται στο πεδίο αυτό και το CGI script μας δίνει το όνομα δίπλα σε κάθε τιμή. Π.χ. αν ο χρήστης θα γράψει το επάγγελμά του τότε μπορεί να δώσουμε στην NAME το όνομα profession έτσι ώστε τα δεδομένα που θα λαμβάνουμε να παρουσιάζονται με μορφή του τύπου profession = economist Αν δεν υπήρχε η NAME θα λαμβάναμε μόνο όσα έγραψε ο χρήστης στο INPUT χωρίς καμία πληροφορία για τη σημασία τους.

Για παράδειγμα αν ζητούσαμε το βάρος και την ηλικία όσων συμπληρώνουν τη φόρμα θα λαμβάναμε μόνα τους τα νούμερα 59 και 55 χωρίς να γνωρίζουμε αν ο χρήστης είναι 55 ετών με βάρος 59 κιλά ή 59 ετών με βάρος 55 κιλά. Αν όμως έχουμε χρησιμοποιήσει την NAME θα λάβουμε:

Weight: 59

Age: 55

όπου Weight και Age είναι οι λεζάντες (NAME) των INPUT πεδίων.

Με την υιοθέτηση της NAME, το παραπάνω παράδειγμα συντάσεται ως εξής:

Φυσικά εννοείται πως η οδηγία <P> δεν είναι απαραίτητη, απλώς την χρησιμοποιούμε για καλύτερο στήσιμο της σελίδας.

Αυτό που μένει τώρα είναι να δώσουμε στην χρήση την δυνατότητα να μας στείλει τα στοιχεία που μόλις συμπλήρωσε. Αυτό θα γίνει πάλι με την <INPUT> ως εξής:
<INPUT TYPE="submit"> με την οποία λέμε στον browser να δημιουργήσει το εικονίδιο υποβολής των δεδομένων της φόρμας.

Έτσι το παράδειγμά μας γίνεται:

RESET

Πολλές φορές τυχαίνει ο χρήστης που συμπλήρωσε μια φόρμα, να θέλει να ακυρώσει όλες τις επιλογές του για να τις αντικαταστήσει με άλλες. Αυτό μπορεί να γίνει με την τιμή RESET της παραμέτρου TYPE που δημιουργεί ένα άλλο πλήκτρο επιλογής. Π.χ.

ΑΛΛΕΣ ΠΑΡΑΜΕΤΡΟΙ ΣΧΕΤΙΚΑ ΜΕ ΤΙΣ ΦΟΡΜΕΣ

VALUE

Με την παράμετρο VALUE, μπορούμε να αλλάξουμε το κείμενο του εικονιδίου υποβολής των δεδομένων της φόρμας. Π.χ. αν θέλουμε αντί για Submit Query να γράφει Υποβολή θα αλλάξουμε την οδηγία σε:

TEXT

Μπορούμε να δώσουμε στον χρήστη την δυνατότητα να γράψει κάποιο μικρό κείμενο που θα συμπεριληφθεί στην φόρμα.

Αν θέλουμε το κείμενο να βρίσκεται όλο σε μια γραμμή, τότε θα χρησιμοποιήσουμε την TEXT ως εξής: <INPUT TYPE="text" NAME="X">
όπου X είναι το όνομα που θα δώσουμε στο πεδίο αυτό.

Το μήκος της γραμμής μπορεί να είναι όσο μεγάλο θέλουμε (αν δεν χωράει θα σκρολλάρει κατά το πλάτος της οθόνης), αλλά για πρακτικούς λόγους καλό είναι να το περιορίζουμε στους 50 χαρακτήρες. Η default τιμή είναι 20 χαρακτήρες αλλά μπορεί να αλλάξει με την παράμετρο SIZE π.χ.

Αντίστοιχα λειτουργεί και η παράμετρος MAXLENGTH. Με την SIZE καθορίζουμε ότι θα λάβουμε τους πρώτους X χαρακτήρες που θα γράψει ο χρήστης αλλά δεν τον εμποδίζουμε να γράψει όσους θέλει (που θα χαθούν). Η MAXLENGHT χρησιμοποιείται για να μην μπορεί να γράψει περισσότερους από τους επιτρεπόμενους. Π.χ.

PASSWORD

Η τιμή PASSWORD της παραμέτρου TYPE χρησιμοποιείται για να απεικονίζει στην οθόνη αστερίσκους ή σφαιρίδια αντί για τους χαρακτήρες που πληκτρολογεί ο χρήστης. Π.χ. <INPUT TYPE="password" NAME="XYZ">

ΠΡΟΣΟΧΗ! Το να αποστέλλονται passwords με αυτό τον τρόπο δεν είναι ασφαλές. Μπορεί στην οθόνη να μην εμφανίζεται τι γράφει ο χρήστης αλλά αυτά που έγραψε αποστέλλονται στο cgi script για επεξεργασία σε text μορφή.

RADIO

Πιθανώς να χρειάζεται να δημιουργήσουμε μια φόρμα που ο χρήστης θα επιλέγει μεταξύ κάποιων προκαθορισμένων τιμών για αυτά που θα συμπεριληφθούν στην φόρμα που συμπληρώνει (multiple choice). Ένας τρόπος να γίνει αυτό είναι με τα λεγόμενα RADIO BUTTONS. Για να το επιτύχουμε αυτό συνήθως χρησιμοποιούμε μια λίστα όπου TYPE="radio" Name="όποιο θέλουμε αλλά το ίδιο για όλα" Value="η τιμή κάθε επιλογής" Π.χ.

<OL>
<LI><INPUT TYPE="radio" NAME="country" Value="USA">USA
<LI><INPUT TYPE="radio" NAME="country" Value="CANADA">CANADA
<LI><INPUT TYPE="radio" NAME="country" Value="UK">UK
<LI><INPUT TYPE="radio" NAME="country" Value="GREECE">GREECE
</OL>

Φυσικά εννοείται πως αφού οι επιλογές είναι σε μορφή λίστας μπορούμε να έχουμε radio buttons σε λίστες που βρίσκονται μέσα σε άλλες λίστες με radio buttons.

Σημείωση: Τα RADIO BUTTONS μπορούν να έχουν όποια διάταξη θέλουμε και δεν είναι υποχρεωτικό να συντάσσονται σε μορφή λίστας.

CHECKED

Εξ' ορισμού (by default) όλες οι τιμές των RADIO BUTTONS είναι κενές. Μπορούμε όμως να ορίσουμε κάποια σαν προεπιλεγμένη και να αποφασίσει ο χρήστης αν θα την κρατήσει ή αν θα την αλλάξει. Π.χ. στο παραπάνω παράδειγμα αν θέλουμε σαν προεπιλεγμένη την Ελλάδα η οδηγία θα είναι:

<LI><INPUT TYPE="radio" NAME="country" Value="GREECE" CHECKED>GREECE<BR>

CHECKBOX

Στα RADIO BUTTONS μπορούμε να επιλέξουμε μόνο μια τιμή από την λίστα τιμών που έχουμε στην διάθεσή μας. Αν θέλουμε να επιλέγονται περισσότερες τιμές, τότε χρησιμοποιούμε την τιμή CHECKBOX στην παράμετρο TYPE. Π.χ.

<UL>
<LI><INPUT TYPE="CHECKBOX" NAME="USA" Value="chosen">USA
<LI><INPUT TYPE="CHECKBOX" NAME="CANADA" Value="chosen">CANADA
<LI><INPUT TYPE="CHECKBOX" NAME="UK" Value="chosen">UK
<LI><INPUT TYPE="CHECKBOX" NAME="GREECE" Value="chosen" CHECKED>GREECE
</UL>

Όπως φαίνεται από το παράδειγμα, μπορούμε να χρησιμοποιήσουμε και εδώ την CHECKED όπως κάναμε στα RADIO BUTTONS. Αντίθετα όμως από τα RADIO BUTTONS η NAME δεν έχει την ίδια τιμή σε όλα ενώ έχουμε την ίδια τιμή στην VALUE (=chosen). Μπορούμε να ακολουθήσουμε το ίδιο σχήμα με τα RADIO BUTTONS ( ίδιο NAME και διαφορετικό VALUE) αλλά επειδή εδώ έχουμε δυνατότητα πολλαπλών επιλογών δεν θα ήταν βολικό να έχουμε διαφορετικές τιμές με το ίδιο όνομα πεδίου (NAME).

ΠΑΡΑΤΗΡΗΣΗ: Τα RADIO BUTTONS και τα CHECK BOXES μπορούν να βρίσκονται μέσα σε κάθε είδους λίστες (αριθμημένες και μη).

<SELECT>...</SELECT>

Η οδηγία αυτή δημιουργεί ένα pull down menu επιλογών από τις οποίες ο χρήστης μπορεί να επιλέξει μια. Αυτή θα σταλεί στο cgi script μαζί με την τιμή της NAME. Π.χ.

<P>SELECT A COUNTRY:
<SELECT NAME="COUNTRY">
<OPTION>GREECE
<OPTION>FRANCE
<OPTION>GERMANY
<OPTION>ITALY
<OPTION>SPAIN
<OPTION>IRELAND
<OPTION>FINLAND
</SELECT>

Οι επιλογές εμφανίζονται στο παράθυρο που δημιουργείται με την σειρά που τις καταγράψαμε παραπάνω.

Αν το επιθυμούμε, μπορούμε η τιμή που θα λάβουμε από το cgi script να είναι διαφορετική από αυτή που γράφεται στο OPTION. Αυτό γίνεται με την παράμετρο VALUE. Π.χ. <OPTION VALUE="HELLAS">GREECE

Η επιλογή για την χρήστη θα είναι GREECE αλλά η τιμή που θα λάβει ο διαχειριστής της φόρμας από το cgi script θα είναι HELLAS.

’λλες τιμές της <SELECT> η MULTIPLE και η SIZE. Η MULTIPLE επιτρέπει στον χρήστη να επιλέγει περισσότερες από μια τιμές (αλλά δεν είναι λειτουργική και καλό είναι να αποφεύγεται). Η SIZE καθορίζει το μέγεθος του παραθύρου (πόσες γραμμές θα εμφανίζονται). Π.χ.

ΠΡΟΣΟΧΗ! Σε πολλούς browsers η SIZE θα εμφανίσει μια σειρά λιγότερη από την τιμή της, π.χ. SIZE="5 σημαίνει πως θα εμφανιστούν 4 επιλογές.

<TEXTAREA>...</TEXTAREA>

Αν θέλουμε ο χρήστης μια φόρμας να συμπεριλάβει αρκετό κείμενο σε αυτήν (περισσότερο από μια γραμμή), τότε χρησιμοποιούμε την <TEXTAREA>. Οι παράμετροί της είναι NAME, ROWS, COLS.

NAME Η γνωστή από τα προηγούμενα

ROWS Ο αριθμός των γραμμών που θα υπάρχουν διαθέσιμες

COLS Ο αριθμός των στηλών (χαρακτήρων ανά γραμμή) που θα είναι διαθέσιμες.

Το κείμενο που θα γραφτεί θα είναι συνήθως με γράμματα courier (κάτι που δημιουργεί αρκετά προβλήματα στα Ελληνικά).

Π.χ. <TEXTAREA NAME="dokimh" ROWS="10" COLS="45">Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας:</TEXTAREA>

Στο παράδειγμα αυτό έχουμε 10 γραμμές 45 χαρακτήρων η κάθε μια και τον τίτλο: "Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας:"

HIDDEN

Τιμή της παραμέτρου TYPE. Χρησιμοποιείται για να δώσουμε μια εντολή στο cgi script που δεν θέλουμε (συνήθως διότι δεν χρειάζεται) να είναι ορατή στους χρήστες της φόρμας. Η σύνταξή της είναι <INPUT TYPE="HIDDEN" NAME="xyz" VALUE="ABC">

ΔΙΑΧΕΙΡΙΣΗ ΤΩΝ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ΜΙΑΣ ΦΟΡΜΑΣ

Υπάρχουν διάφοροι τρόποι να αποκτά κανείς τα αποτελέσματα μιας φόρμας που κατασκευάζει ανάλογα με το cgi script που χρησιμοποιεί. Ένας από τους πιο συνηθισμένους είναι να τα λαμβάνει με email. Ένα τέτοιο παράδειγμα έχουμε στην παρακάτω περίπτωση όπου χρησιμοποιούμε το script FormMail.pl:

<P><FORM METHOD=POST ACTION="http://www.eexi.gr/cgi-bin/FormMail.pl"> <P> Γράψτε το όνομά σας: <INPUT NAME="theName"><P> <UL>
<LI><INPUT TYPE="CHECKBOX" NAME="USA" Value="chosen">USA
<LI><INPUT TYPE="CHECKBOX" NAME="CANADA" Value="chosen">CANADA
<LI><INPUT TYPE="CHECKBOX" NAME="UK" Value="chosen">UK
<LI><INPUT TYPE="CHECKBOX" NAME="GREECE" Value="chosen" CHECKED>GREECE
</UL><p><TEXTAREA NAME="dokimh" ROWS="10" COLS="45">Γράψτε εδώ τις παρατηρήσεις ή τα σχόλιά σας:</TEXTAREA><P><INPUT TYPE="hidden" NAME="recipient" VALUE="gepiti@eexi.gr"><INPUT TYPE="submit" VALUE="Υποβολή"><P><INPUT TYPE="RESET" VALUE="Ακύρωση Επιλογών">
</FORM>

ΠΡΟΣΟΧΗ! Αν το cgi script βρίσκεται σε UNIX πρέπει να λάβετε υπ' όψιν σας ότι το UNIX είναι case sensitive. Τα κεφαλαία είναι διαφορετικά από τα μικρά. ’λλο το FormMail.pl και άλλο το formmail.pl (που δεν υπάρχει και φυσικά θα κάνει την φόρμα σας άχρηστη).

Σημείωση: Όταν κλείνει η οδηγία FORM (</FORM>) τότε ο browser αφήνει στο σημείο αυτό μια γραμμή κενή και ξεκινά την υπόλοιπη σελίδα από νέα παράγραφο (ακόμη και αν εμείς δεν έχουμε δηλώσει <P>)

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων