Φόρμες    

Εισαγωγή
Απλές Φόρμες
Κουμπιά σε Φόρμα
Πολλαπλές γραμμές κειμένου ως είσοδος
Radio Button
Check boxes
Pop-up List
Reset Values


Εισαγωγή

Μια ιστοσελίδα πολλές φορές απαιτεί από το χρήστη ,που εισέρχεται στη σελίδα, εισαγωγή δεδομένων. Αφού ο χρήστης τελειώσει τη συμπλήρωση της φόρμας, τα εισαγόμενα στοιχεία στέλνονται σε ένα 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 όπως παρουσιάζεται παρακάτω:

Browser

Κώδικας HTML

<FORM ACTION="URL">
<INPUT TYPE="text" NAME="name" SIZE=20 VALUE="Your name">
</FORM>

Για να ενεργοποιηθεί το CGI πρόγραμμα πρέπει να εισάγουμε πληροφορίες σε μορφή κειμένου μέσα στο text box και έπειτα να πέσουμε το "Enter" στο πληκτρολόγιο. Τα εισαγόμενα δεδομένα στέλνονται στο CGI script με τη μορφή:

 name = Your+name 

Κουμπιά σε φόρμα

Η φόρμα παρακάτω αποτελείται από πολλά κουμπιά.

Browser

Κώδικας HTML

<FORM ACTION="URL">
<INPUT TYPE="submit" NAME="button" VALUE="A">
<INPUT TYPE="submit" NAME="button" VALUE="B">
</FORM>

Όταν πατηθεί ένα κουμπί η φόρμα αυτή στέλνει ένα μήνυμα με τη μορφή:

 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". Ένα παράδειγμα φαίνετα παρακάτω:

Browser

Κώδικας HTML

Male

Female

<FORM ACTION="URL">
<INPUT TYPE="radio" NAME="sex" VALUE="M"> Male<BR>
<INPUT TYPE="radio" NAME="sex" VALUE="W"> Female<BR>
<INPUT TYPE="submit" NAME="button" VALUE="Send">
</FORM>

 Χρησιμοποιώντας το attribute CHECKED σε κάποιο <INPUT> tag θέτουμε μια προυπάρχουσα επιλογή. Δίνεται το παρακάτω παράδειγμα:

Browser

Κώδικας HTML

<18
18-65
65+

<FORM ACTION="URL">
<INPUT TYPE="radio" NAME="AGE" VALUE="a">&lt;18<BR>
<INPUT TYPE="radio" NAME="age" VALUE="b"         CHECKED>18-65<BR>
<INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR>
<INPUT TYPE="submit" NAME="button" VALUE="Send">
</FORM>

 Check boxes

Μία φόρμα η οποία επιτρέπει στο χρήστη να να επιλέξει ένα ή και περισσότερα check boxes χρησιμοποιέι το <INPUT> tag με το attribute TYPE="checkbox". Ένα παράδειγμα μιας τέτοιας φόρμας είναι το παρακάτω:

Browser

Κώδικας HTML

Use
Ada 95
C++
COBOL

<FORM ACTION="URL">
Use<BR>
<INPUT TYPE="checkbox" NAME="use"
               VALUE="Ada 95" CHECKED>Ada 95<BR>
<INPUT TYPE="checkbox" NAME="use"
               VALUE="C++" CHECKED>C++<BR>
<INPUT TYPE="checkbox" NAME="use"
               VALUE="COBOL"<COBOL>COBOL<BR>
<INPUT TYPE="submit" NAME="button"
               VALUE="Send">
</FORM>

 Pop up list

Μία φόρμα για να επιτρέψει στο χρήστη να επιλέξει ένα αντικείμενο από μια pop up list χρησιμοποιεί το tag <SELECT>. Ένα παράδειγμα μιας pop up list δίνεται παρακάτω:

Browser

Κώδικας HTML

Media used is

<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

I like to drink:
Coffee
Tea

<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>