Φόρμα (ιστοσελίδα)

Μια Φόρμα σε μια ιστοσελίδα είναι το τμήμα της ιστοσελίδας που επιτρέπει στον χρήστη να εισάγει δεδομένα τα οποία στην συνέχεια στέλνονται στον εξυπηρετητή για επεξεργασία. Οι διαδικτυακές φόρμες συνήθως προσομοιάζουν τις τυπωμένες φόρμες ερωτημάτων ή τις φόρμες βάσεων δεδομένων όπου οι χρήστες καλούνται να συμπληρώσουν κείμενο, να απαντήσουν σε ερωτήσεις πολλαπλών επιλογών κλπ. Συχνή είναι η χρήση απλής φόρμας αναζήτησης όπου ο χρήστης βάζοντας ένα κείμενο σε ένα κελί αναζητά πληροφορίες σε μια ιστοσελίδα. Οι φόρμες υπάρχουν παντού στο διαδίκτυο, για παράδειγμα σε ένα διαδικτυακό κατάστημα ο χρήστης μπορεί με φόρμες να αναζητήσει ένα προϊόν ή να ακόμη και να εισάγει την πιστωτική κάρτα για την τελική χρέωση. Η φόρμα διαφέρει από τη χρήση κελιών και άλλων στοιχείων τα οποία χρησιμοποιούν javascript (ή παρόμοιες γλώσσες) για να αλλάζουν δυναμικά το τοπικό περιεχόμενο του εγγράφου π.χ. για να δώσουν το αποτέλεσμα μιας αριθμητικής πράξης χωρίς επικοινωνία με τον εξυπηρετητή.

Από τεχνικής πλευράς, η γλώσσα HTML υποστηρίζει την δυνατότητα δημιουργίας φορμών μαζί με την κλήση προγραμμάτων σε γλώσσες όπως την Perl, PHP, Java, Javascript ή .NET (συμπεριλαμβάνεται η ASP.NET) για επεξεργασία των δεδομένων.

XHTML/HTML φόρμες

Απλή φόρμα όπως παρουσιάζεται από τον φυλλομετρητή Mozilla Firefox.

Μια φόρμα σε XHTML ή HTML είναι η πιο διάσημη μορφή φόρμας που υπάρχει στο διαδίκτυο.

Τα παρακάτω στοιχεία αποτελούν την είσοδο χρήστη σε μια φόρμα:

• Πεδίο εισόδου (input field).
  • Είσοδος κειμένου (text input) — ένα απλό κουτί κειμένου όπου επιτρέπει είσοδο κειμένου μιας γραμμής (μια παραλλαγή του κουτιού κειμένου είναι το κουτί όπου ζητείται ο κωδικός πρόσβασης όπου το κείμενο που εισάγεται παρουσιάζεται καμουφλαρισμένο είτε με κενά είτε με σύμβολα όπως ο χαρακτήρας αστερίσκος *).
  • Κουτί επιλογής (checkbox)
  • Κουτί με πολλαπλές επιλογές (radio box)
  • Αρχείο - επιλογή αρχείου για ανέβασμα
  • Επιλογή καθαρισμού επιλογών (reset button) - όταν επιλέγεται επιστρέφουν όλες οι τιμές στις αρχικές προκαθορισμένες.
  • Αποστολή (submit) — ένα κουμπί όπου λέει στον φυλλομετρητή να τρέξει μια ενέργεια στην φόρμα (συνήθως γίνεται αποστολή των εισαχθέντων στοιχείων στον απομακρυσμένο εξυπηρετητή ιστοσελίδων)
• Περιοχή κειμένου (textarea) — μοιάζει με το πεδίο εισόδου αλλά επιτρέπει περισσότερες γραμμές κειμένου να εισαχθούν ή να παρουσιαστούν στον φυλλομετρητή.
• Επιλογή λίστας - κατεβατό επιλογών (drop-down list) - παρουσιάζει μια λίστα με αντικείμενα από τα ο χρήστης μπορεί να επιλέξει στην φόρμα.

Στο παρακάτω παράδειγμα έχουμε μια απλή φόρμα (η φόρμα φαίνεται δίπλα) που παρουσιάζει τα διάφορα στοιχεία της HTML που μπορούν να χρησιμοποιηθούν σε μια δικτυακή φόρμα. Στην φόρμα γίνεται κλήση της bar.php (σενάριο στην γλώσσα PHP) μόλις πατηθεί το κουμπί "Εισαγωγή στοιχείων" (στέλνονται στο εξυπηρετητή μέσω της μεθόδου POST της http).

<FORM method="post" action="bar.php">
  <TABLE border="1">
   <TR bgcolor="#CCCCFF">
    <TH>Όνομα</TH>
    <TH>Τιμή</TH>
   </TR>
   <TR>
    <TD>Ονοματεπώνυμο</TD>
    <TD>
     <input type="text" name="name" size="25">
    </TD>
   </TR>
   <TR>
    <TD>Φύλο</TD>
    <TD>
     <input type="radio" name="sex" value="male"> 'Ανδρας
     <br />
     <input type="radio" name="sex" value="female" checked> Γυναίκα
    </TD>
   </TR>
   <TR>
    <TD>Χρώμα Ματιών</TD>
    <TD>
     <select name="eye color">
      <option>Μπλε</option>
      <option>Καφέ</option>
      <option selected>Πράσινα</option>
      <option>'Αλλο</option>
     </select>
    </TD>
   </TR>
   <TR>
    <TD>Επέλεξε όλα όσα ισχύουν</TD>
    <TD>
     <input type="checkbox" name="height" value="1"> Πάνω από 1,80μ ύψος</input>
     <br />
     <input type="checkbox" name="weight" value="1"> Πάνω από 90 κιλά</input>
    </TD>
   </TR>
   <TR>
    <TD colspan="2">Περιγράψτε τις αθλητικές ικανότητες:<br />
     <textarea name="athletic" cols="50" rows="4"></textarea>
    </TD>
   </TR>
   <TR>
    <TD colspan="2" align="center">
     <input type="submit" value="Εισαγωγή στοιχείων">
    </TD>
   </TR>
  </TABLE>
 </FORM>

Στο παραπάνω παράδειγμα έχουμε τα παρακάτω στοιχεία:

• έχουμε ένα πεδίο εισόδου κειμένου όπου ζητείται το όνομα
• ένα ζευγάρι επιλογών (radio buttons) όπου μπορεί ο χρήστης να επιλέξει το φύλο
• μια λίστα - κατεβατό επιλογών όπου επιλέγεται το χρώμα των ματιών
• ένα ζευγάρι επιλογών (check boxes) όπου επιλέγεται το επιθυμητό
• μια περιοχή κειμένου (text area) όπου περιγράφεται η αθλητική δυνατότητα (athletic ability)
• ένα κουμπί αποστολής (submit button) όπου στέλνονται όλα τα εισαχθέντα δεδομένα της φόρμας στον απομακρυσμένο εξυπηρετητή

Αυτά τα βασικά στοιχεία παρέχουν τις περισσότερες δυνατές επιλογές γραφικής διεπαφής GUI αλλά όχι όλες. Για παράδειγμα δεν υπάρχει υποστήριξη combo box (μίξη λίστας με κατεβατό επιλογών), balloon help (βοήθεια με την μορφή διαλόγου τύπου καρτούν), tree view (δενδρική δομή μορφή ιεραρχίας - αναπαράστασης δεδομένων), ή grid view (αναπαράσταση σε μορφή πλέγματος). Μίμηση της δομής πλέγματος μπορεί να γίνει με ενθυλακωμένους πίνακες ή ενθυλακωμένες λίστες στοιχείων. Αρκετές από αυτές τις επιλογές υπάρχουν στις βιβλιοθήκες της γλώσσας σεναρίων JavaScript.

Όταν τα δεδομένα εισέρχονται στις φόρμες HTML και τα δεδομένα στέλνονται στον απομακρυσμένο εξυπηρετητή διαμορφώνεται ένα HTTP μήνυμα με κατάλληλες μεθόδους GET (για λήψη URI) και POST (για λήψη δεδομένων από τον χρήστη - π.χ. από μια φόρμα - παλαιότερα είχε προταθεί και η χρήση αποστολής email για την δουλειά αυτή. Η GET και η POST είναι μέθοδοι του Πρωτοκόλλου Μεταφοράς Υπερκειμένου (http).

XForms

Παράδειγμα φόρμας XForm.

Οι φόρμες XForms είναι το εναλλακτικό πρότυπο σε XML των δικτυακών φορμών HTML/XHTML. Μια φόρμα XForm μπορεί να είναι απλή όπως μια φόρμα HTML / XHTML αλλά παρέχει και πολλές νέες δυνατότητες. Για παράδειγμα η φόρμα μπορεί σε πραγματικό χρόνο να λάβει και στείλει πληροφορία στον εξυπηρετητή την ώρα που αυτή εμφανίζεται στο χρήστη χωρίς να χρειάζεται η κλήση μια γλώσσας σεναρίων όπως γίνεται στην περίπτωση των HTML/XHTML φορμών. Η φόρμα μπορεί επίσης να καθορίσει το πως τα δεδομένα πρέπει να εισαχθούν κάνοντας έλεγχο των δεδομένων αλλά μπορεί η φόρμα να αλλάξει δυναμικά όταν κάποια δεδομένα εισέρχονται στη φόρμα. Σε αυτές τις φόρμες τα δεδομένα συλλέγονται σε μορφή XML. Ακολουθεί παράδειγμα με το κώδικα της φόρμας XForm η οποία φαίνεται στην εικόνα δίπλα:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Hello World in XForms</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Type your first name in the input box. <br />
        If you are running XForms, the output should be displayed in the output area.</p>   
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Please enter your first name: </xf:label>
         </xf:input>
         <br />
         <xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')">
            <xf:label>Output: </xf:label>
         </xf:output>
   </body>
</html>

Σε αντίθεση με τις φόρμες HTML/XHTML, οι φόρμες XForms αυτή τη στιγμή υπάρχει κατευθείαν υποστήριξη από τους διαθέσιμους φυλλομετρητές.

Έχουν σχεδιαστεί υλοποιήσεις και πρόσθετα για φυλλομετρητές οι οποίες επιτρέπουν την χρήση των φόρμων XForms.

Συνδυασμός με γλώσσες προγραμματισμού σεναρίων

Οι φόρμες μπορούν να συνδυαστούν με διάφορες γλώσσες προγραμματισμού σεναρίων ώστε ο προγραμματιστής να μπορεί να δημιουργεί δυναμικές ιστοσελίδες. Οι φόρμες υποστηρίζονται και από γλώσσες που τρέχουν από την πλευρά του εξυπηρετητή αλλά και από την πλευρά του χρήστη.

Χρήστης-πελάτης

Μια γλώσσα προγραμματισμού σεναρίων σε ιστοσελίδες η οποία τρέχει από την πλευρά του χρήστη είναι η JavaScript. Χρησιμοποιώντας JavaScript και το Document Object Model (DOM) επιτρέπει την δυναμική λειτουργία ιστοσελίδων από τον φυλλομετρητή στο υπολογιστή του χρήστη.

Συνήθως είναι περιορισμένη η χρήση γλωσσών προγραμματισμού σεναρίων από την πλευρά του χρήστη-πελάτη. Συνήθως οι γλώσσες προγραμματισμού σεναρίων χρησιμοποιούνται στις φόρμες στον υπολογιστή του χρήστη-πελάτη για να ελέγξουν την ορθότητα των δεδομένων (data validation) τα οποία θα σταλθούν αργότερα στον εξυπηρετητή ιστοσελίδων για περαιτέρω επεξεργασία.

Εξυπηρετητής ιστοσελίδων

Ο προγραμματισμός σεναρίων από την πλευρά του εξυπηρετητή ιστοσελίδων μπορεί να εξυπηρετήσει την δυναμική λειτουργία ιστοσελίδων όπως για παράδειγμα να γίνει πιστοποίηση χρηστών μέσω της διαδικασίας σύνδεσης χρήστη, η ανάκτηση και η αποθήκευση δεδομένων σε μια βάση δεδομένων στον εξυπηρετητή, γραμματικός έλεγχος γραμματικών λαθών πριν την αποστολή ενός μηνύματος ηλεκτρονικού ταχυδρομείου (email) κλπ. Τέτοιες δυνατότητες δεν υπάρχουν στα σενάρια που χρησιμοποιούνται στην πλευρά του χρήστη-πελάτη.

Μερικά σενάρια από την πλευρά του εξυπηρετητή καλούνε μέσω της διεπαφής Common Gateway Interface (CGI) εκτέλεση προγραμμάτων στον υπολογιστή του εξυπηρετητή.

Τα πλεονεκτήματα των σεναρίων στην πλευρά του εξυπηρετητή είναι ότι βασίζονται στη λειτουργικότητα ενός υπολογιστή( του εξυπηρετητή) και όχι στον χρήστη πελάτη ο οποίος μπορεί να χρησιμοποιεί διάφορους φυλλομετρητές οι οποίοι θα πρέπει να υλοποιούν τις συναρτήσεις των σεναρίων με τον ίδιο τρόπο. Για παράδειγμα είναι λίγο προβληματικό να προβλέπει ο προγραμματιστής την συμπεριφορά ενός κώδικα JavaScript το οποίο τρέχει στον υπολογιστή του χρήστη-πελάτη για κάθε διαφορετικό φυλλομετρητή.

Οι γλώσσες προγραμματισμού σεναρίων είναι δημοφιλείς στους εξυπηρετητές ιστοσελίδων αλλά υπάρχει και η δυνατότητα να τρέχουν και μεταγλωττισμένα προγράμματα.

Παράδειγμα εγγραφής σε ηλεκτρονική εμπορική ιστοσελίδα μου χρησιμοποιεί το ανοικτό λογισμικό ZenCart το οποίο είναι σε γλώσσα σεναρίων PHP.

Μερικές από τις γλώσσες προγραμματισμού σεναρίων οι οποίες χρησιμοποιούνται ευρέως είναι:

• PHP
• Perl
• ASP
• ASP.NET
• Adobe ColdFusion
• JSP
• Ruby on Rails
• Python

Μερικοί μεταγλωττιστές για εκτελέσιμα προγράμματα στον εξυπηρετητή οι οποίες χρησιμοποιούνται ευρέως είναι:

• C
• C++
• C#
• Java
• VB

PHP

Η γλώσσα σεναρίων PHP είμαι μια συνηθισμένη γλώσσα που χρησιμοποιείται στους εξυπηρετητές ιστοσελίδων για κατασκευή δυναμικών σελίδων.

Ένα σενάριο PHP μπορεί συχνά να κάνει:

• Να εμφανίσει πληροφορίες σε μια ξεχωριστή ιστοσελίδα (για παράδειγμα ζητείται το όνομα χρήστη και αυτό εμφανίζεσαι σε μια άλλη ιστοσελίδα).
• Να χρησιμοποιηθεί ως διεπαφή σύνδεσης χρήστη με την ιστοσελίδα.
• Να αποθηκεύει δεδομένα σε μια βάση δεδομένων στον εξυπηρετητή (π.χ.: mySQL, ένα αρχείο κειμένου τύπου ASCII κλπ.)
• Να αποθηκεύσει τις πληροφορίες του χρήστη πελάστη σε ένα HTTP cookie
• Να δημιουργεί μηνύματα ηλεκτρονικού ταχυδρομείου (e-mail).

Μια φόρμα HTML μπορεί να αποστέλλει δεδομένα (χρησιμοποιώντας την ετικέτα action στη φόρμα HTML) σε ένα σενάριο PHP. Το σενάριο PHP μπορεί να δέχεται τα δεδομένα μέσω της λειτουργίας/μεθόδου POST ή GET του πρωτοκόλλου http. Ακολουθεί ένα απλό σενάριο σε PHP με το οποίο χειρίζεται ένα μήνυμα από μια φόρμα μέσω του GET.

Η form.html δημιουργεί μια φόρμα όπου ζητείται ένα όνομα χρήστη:

<html>
<body>
 <form action="form_handler.php" method="get">
   Όνομα Χρήστη: <input name="user" type="text" />
   <input type="submit" />
 </form>
</body>
</html>

Μόλις πατηθεί το κουμπί αποστολής τότε καλείται το σενάριο php form_handler.php το οποίο διαβάζει το όνομα χρήστη που εισάχθηκε μέσω της μεθόδου GET της http και εμφανίζει το όνομα με ένα χαιρετιστήριο μήνυμα "Γειά σου,..":

<html>
<body>
<?php
 /*
  * Τυπώνει ένα μήνυμα "Γεια σου, ..." 
  * με το όνομα χρήση που ζητήθηκε από την φόρμα
  */

 $name = $_GET['user'];
 echo "Γεια σου, ". $name ."!";
?>
</body>
</html>

Στο παραπάνω σενάριο η $_GET[''] αναφέρεται στη μέθοδος GET της φόρμας (στο input name="" της html φόρμας). Θα μπορούσε να χρησιμοποιηθεί η $_POST[''] εάν είχε χρησιμοποιηθεί η μέθοδος POST (στο input name="" της html φόρμας). Επίσης μπορεί να χρησιμοποιηθεί στην PHP και η $_REQUEST[''] η οποία περιέχει και την $_GET[''] αλλά $_POST[''] (έχει επίσης και την αλλά και την $_COOKIE[''] - η οποία παρέχει πληροφορίες του χρήστη πελάστη). Αν και η $_REQUEST[''] περιέχει και την GET αλλά και την POST πληροφορία της φόρμας, όταν η φόρμα έχει την μέθοδο GET ή POST θεωρείται καλή πρακτική να χρησιμοποιείται αντίστοιχα η $_GET['']/$_POST[''] Η μέθοδος GEΤ χρησιμοποιείται όταν θέλουμε να δημοσιοποιήσουμε στο πελάτη-χρήστη δεδομένα από την δυναμική σελίδα που βρίσκεται στο εξυπηρετητή. Τα δεδομένα αυτά είναι διαθέσιμα σε όλους του χρήστες και την μέθοδο αυτή δεν την χρησιμοποιούμε για ευαίσθητα δεδομένα όπως κωδικούς πρόσβασης. Η μέθοδος POST χρησιμοποιείται όταν θέλουμε να λάβουμε δεδομένα από τον χρήστη πελάτη και να τα στείλουμε στον εξυπηρετητή ιστοσελίδων. Τα δεδομένα αυτά είναι μπορούν να μεταφερθούν με ασφαλή τρόπο και είναι η καλύτερη μέθοδος για να στέλνονται ευαίσθητα δεδομένα όπως κωδικοί πρόσβασης κλπ.

Perl

Η γλώσσα σεναρίων Perl είναι μια άλλη γλώσσα η οποία μπορεί να χρησιμοποιηθεί για ανάπτυξη δυναμικών ιστοσελίδων. Παραδοσιακά τα σενάρια Perl καλούνται μέσω της διεπαφής Common Gateway Interface (CGI). Να σημειώσουμε ότι στην πράξη η Perl είναι συνηθισμένο να χρησιμοποιείται για προγραμματισμό σεναρίων CGI.

Ένα παράδειγμα σεναρίου στην Perl η οποία χρησιμοποιεί το CGI πακέτο/διεπαφή παρουσιάζεται παρακάτω (εμφανίζει το μήνυμα "Γεια σου,..." με παράμετρο το όνομα χρήστη):

form_handler.pl

#!/usr/bin/perl
use CGI qw(:standard);

$user = param('user');
print header;
print html(
  body(
    p("Γεια σου, $user!"),
  ),
);