Μια ιστοσελίδα πολλές φορές απαιτεί από το χρήστη
,που εισέρχεται στη σελίδα, εισαγωγή δεδομένων. Αφού ο χρήστης
τελειώσει τη συμπλήρωση της φόρμας, τα εισαγόμενα στοιχεία
στέλνονται σε ένα CGI (Common Gateway Interface) script για
επεξεργασία. Το script τρέχει μέσω του web server. Τα CGI scripts
επιστρέφουν σαν αποτέλεσμα ένα είδος κειμένου που αντιπροσωπεύει μια
ιστοσελίδα. Αυτή η σελίδα περιέχει κείμενο και markup tags μιας
συμβατικής ιστοσελίδας. Η μόνη διαφορά είναι ότι αρχικά υπάρχει η
φράση:
Content-type:
text/html
Μια φόρμα εισάγεται με το tag <FORM> και τελειώνει με το αντίθετο
tag </FORM>.Τα επιπλέον
στοιχεία του <FORM> tag
είναι:
ACTION="http://host/cgi-bin/script_name"
Αφού η φόρμα έχει συμπληρωθεί, τα εισαγόμενα
δεδομένα στέλνονται στο CGI script για επεξεργασία. Το script
βρίσκεται στον κατάλογο που έχει οριστεί απο τον web administrator
.
Απλές φόρμες
Μία φόρμα η οποία απαιτεί από το χρήστη
εισαγωγή κειμένου, το οποίο στέλνεται στο CGI script "URL"
φαίνεται παρακάτω. "URL" είναι η θέση του cgi script στον
server. Ένα απλό παράθυρο κειμένου το οποίο αποτελείται από μια απλή
γραμμή των 20 χαρακτήρων και το οποίο αρχικοποιείται με τη
φράση "Your name" εισάγεται με το <INPUT> tag όπως
παρουσιάζεται παρακάτω:
Για να ενεργοποιηθεί το CGI πρόγραμμα πρέπει να
εισάγουμε πληροφορίες σε μορφή κειμένου μέσα στο text box και έπειτα
να πέσουμε το "Enter" στο πληκτρολόγιο. Τα εισαγόμενα δεδομένα
στέλνονται στο CGI script με τη μορφή:
Όταν πατηθεί ένα κουμπί η φόρμα αυτή στέλνει ένα μήνυμα με τη
μορφή:
button =
+A+
στο CGI script , εάν το "A" κουμπί πατηθεί.
Πολλαπλές γραμμές κειμένου σαν
είσοδος
Μία φόρμα η οποία απαιτεί από το χρήστη να εισάγει
πολλαπλές γραμμές κειμένου χρησιμοποιεί το tag <TEXTAREA>. Επίσης χρησιμοποιείται
το tag <INPUT TYPE="submit"> για να σηματοδοτήσει τη συμπήρωση
της φόρμας. Για παράδειγμα:
Browser
Κώδικας
HTML
<FORM
ACTION="URL"> <TEXTAREA NAME="feedback"
ROWS=5 COLS=20> My thoughts so far
are: </TEXTAREA> <BR> <INPUT
TYPE="submit"
NAME="button" VALUE=Send </FORM>
Τα attributes του <TEXTAREA> tag περιλαμβάνουν:
ROWS=n
Καθορίζει τον αριθμό των σειρών στην περιοχή εισαγωγής
δεδομένων COLS=n
Καθορίζει τον αριθμό των στηλών στην περιοχή εισαγωγής δεδομένων
Όταν υπάρχουν πολλά αντικείμενα σε μια φόρμα, τα δεδομένα που
στέλνονται στο CGI script περιλαμβάνουν το κάθε αντικείμενο
ξεχωριστά συνδεδεμένα μεταξύ τους με ένα &. Για παράδειγμα, όταν
το κουμπί Send πιέζεται και καμιά αλλαγή δεν έχει γίνει στα δεδομένα
της φόρμας, τότε θα σταλεί στο CGI script η ακόλουθη πληροφορία:
feedback =
My+thoughts+so+far&button=Send
Radio Button
Μία φόρμα, η οποία απαιτεί από το χρήστη να διαλέξει ένα από μια
σειρά από radio buttons, χρησιμοποιεί το <INPUT> tag με το
attribute TYPE="radio". Ένα παράδειγμα φαίνετα παρακάτω:
Μία φόρμα η οποία επιτρέπει στο χρήστη να να επιλέξει ένα ή και
περισσότερα check boxes χρησιμοποιέι το <INPUT> tag με το
attribute TYPE="checkbox". Ένα παράδειγμα μιας τέτοιας φόρμας είναι
το παρακάτω:
Μία φόρμα για να επιτρέψει στο χρήστη να επιλέξει ένα αντικείμενο
από μια pop up list χρησιμοποιεί το tag <SELECT>. Ένα
παράδειγμα μιας pop up list δίνεται παρακάτω:
Browser
Κώδικας
HTML
<FORM
ACTION="URL">Media used is<BR> <SELECT
NAME="Media"> <OPTION
SELECTED> Disk <OPTION>
Floppy disk <OPTION> DAT
tape </SELECT> <BR> <INPUT
TYPE="submit"
NAME="button"
VALUE="Send"> </FORM>
Το tag <SELECT> περιλαμβάνει το tag:
<OPTION>
Ποια ονόματα περιλαμβάνει η τιμή στην pop up
list. To OPTION
tag μπορεί να περιέχει το tag SELECTED για να καθορίσει την αρχική
τιμή της pop up list.
Reset values
Το <INPUT> tag με το
attribute TYPE="reset"
χρησιμοποιείται για να επαναφέρει τις τιμές μέσα σε μια φόρμα στην
προκαθορισμένη τιμή. Για παράδειγμα, η ακόλουθη φόρμα μπορεί να
επανέλθει στις αρχικές της τιμές με το που πιέζουμε το "reset".
Browser
Κώδικας
HTML
<FORM
ACTION="URL"> I like to drink:<BR> <INPUT
TYPE="checkbox"
NAME="Like"
VALUE="Coffee" >Coffee<BR> <INPUT
TYPE="checkbox"
NAME="Like"
VALUE="Tea">Tea<BR> <INPUT TYPE="reset"
VALUE="Reset"><BR> <INPUT TYPE="submit"
NAME="button"
VALUE="Send"> </FORM>