Αν και ο κύριος σκοπός μιας ιστοσελίδας είναι η δημοσίευση πληροφοριών στο Internet, δεν είναι ο μοναδικός. Όλο και περισσότερα sites χρησιμοποιούν την αμφίδρομη επικοινωνία, δηλαδή δεν παρέχουν απλά πληροφορίες προς τους επισκέπτες, αλλά ζητούν από αυτούς να επιλέγουν ή να πληκτρολογούν στοιχεία. Για παράδειγμα, πολλά sites περιέχουν polls τα οποία παρουσιάζουν μια ερώτηση και ζητούν από τον επισκέπτη να επιλέξει μια από τις απαντήσεις. Στην περίπτωση αυτή έχουμε αμφίδρομη επικοινωνία, καθώς η ροή της πληροφορίας δεν γίνετε μόνο από τον Server που φιλοξενεί την ιστοσελίδα προς τον επισκέπτη αλλά και το αντίθετο.
Οι Φόρμες μας δίνουν την δυνατότητα να μετασχηματίσουμε την ιστοσελίδα μας από μια μάζα πληροφοριών που ο επισκέπτης διαβάζει παθητικά σε μια αμφίδρομη επικοινωνία όπου έχει έναν πιο ενεργητικό ρόλο πληκτρολογώντας στοιχεία ή κάνοντας κλικ με το ποντίκι του σε διάφορες επιλογές.
Εδώ παρουσιάζεται μια φόρμα στην οποία ο επισκέπτης πληκτρολογεί στοιχεία. Τέτοιες φόρμες συνήθως χρησιμοποιούνται για την εγγραφή μελών σε κάποια ψηφιακή κοινότητα (όπως forums, email lists κτλ.)
Στην παραπάνω Φόρμα ο επισκέπτης, αφού συμπληρώσει τα πεδία πατάει το κουμπί
Με το πάτημα του κουμπιού τα δεδομένα που συμπλήρωσε ο επισκέπτης στέλνονται στον Server μέσω του πρωτοκόλλου HTTP. Έπειτα ο Server επεξεργάζεται με κάποιο πρόγραμμα script τις τιμές των πεδίων και επιστρέφει στον browser του επισκέπτη μια HTML σελίδα. Τα περιεχόμενα της σελίδας αυτής μπορεί να είναι οτιδήποτε, από μια απλή απάντηση μέχρι επιστροφή αποτελέσματος σε ερώτηση προς μια περίπλοκη Βάση Δεδομένων.
Δοκιμάστε να συμπληρώσετε τα στοιχεία που ζητάει η Φόρμα και έπειτα να πατήσετε το κουμπί Αποστολή Στοιχείων. Με το πάτημα του κουμπιού τα δεδομένα που πληκτρολογήσατε στέλνονται στον Server όπου εισάγονται μέσα σε ένα αρχείο script. Το script αυτό (serverSideScript.php, το οποίο είναι γραμμένο σε γλώσσα PHP) παίρνει αυτά τα δεδομένα και τα εμφανίζει μέσα σε έναν πίνακα. Στην περίπτωση αυτή δεν γίνεται καμια επεξεργασία των δεδομένων. Το μόνο που κάνει το script εδώ είναι να παίρνει τα δεδομένα από τον browser σας και τα εμφανίζει μέσα σε έναν πίνακα
Οι Φόρμες μας δίνουν την δυνατότητα να μετασχηματίσουμε την ιστοσελίδα μας από μια μάζα πληροφοριών που ο επισκέπτης διαβάζει παθητικά σε μια αμφίδρομη επικοινωνία όπου έχει έναν πιο ενεργητικό ρόλο πληκτρολογώντας στοιχεία ή κάνοντας κλικ με το ποντίκι του σε διάφορες επιλογές.
Εδώ παρουσιάζεται μια φόρμα στην οποία ο επισκέπτης πληκτρολογεί στοιχεία. Τέτοιες φόρμες συνήθως χρησιμοποιούνται για την εγγραφή μελών σε κάποια ψηφιακή κοινότητα (όπως forums, email lists κτλ.)
Στην παραπάνω Φόρμα ο επισκέπτης, αφού συμπληρώσει τα πεδία πατάει το κουμπί
Με το πάτημα του κουμπιού τα δεδομένα που συμπλήρωσε ο επισκέπτης στέλνονται στον Server μέσω του πρωτοκόλλου HTTP. Έπειτα ο Server επεξεργάζεται με κάποιο πρόγραμμα script τις τιμές των πεδίων και επιστρέφει στον browser του επισκέπτη μια HTML σελίδα. Τα περιεχόμενα της σελίδας αυτής μπορεί να είναι οτιδήποτε, από μια απλή απάντηση μέχρι επιστροφή αποτελέσματος σε ερώτηση προς μια περίπλοκη Βάση Δεδομένων.
Δοκιμάστε να συμπληρώσετε τα στοιχεία που ζητάει η Φόρμα και έπειτα να πατήσετε το κουμπί Αποστολή Στοιχείων. Με το πάτημα του κουμπιού τα δεδομένα που πληκτρολογήσατε στέλνονται στον Server όπου εισάγονται μέσα σε ένα αρχείο script. Το script αυτό (serverSideScript.php, το οποίο είναι γραμμένο σε γλώσσα PHP) παίρνει αυτά τα δεδομένα και τα εμφανίζει μέσα σε έναν πίνακα. Στην περίπτωση αυτή δεν γίνεται καμια επεξεργασία των δεδομένων. Το μόνο που κάνει το script εδώ είναι να παίρνει τα δεδομένα από τον browser σας και τα εμφανίζει μέσα σε έναν πίνακα
Τα στοιχεία μιας Φόρμας
Παρακάτω παρουσιάζονται τα στοιχεία μιας Φόρμας
Λεζάντα των στοιχείων μιας Φόρμας
Όλα τα στοιχεία μιας Φόρμας, είτε αυτά είναι πεδία κειμένου, είτε είναι περιοχές κειμένου, είτε είναι κουμπιά επιλογών κ.ο.κ., έχουν σχεδιαστεί να δέχονται με συγκεκριμένο τρόπο (είτε με πληκτρολόγηση, είτε με επιλογή με το ποντίκι) συγκεκριμένες (σημασιολογικά) τιμές οι οποίες θα επεξεργαστούν από κάποιο script αρχείο.
Για τον λόγο αυτόν κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο (δίπλα του ή σε οποιοδήποτε άλλο σημείο ώστε να είναι εμφανή η αντιστοιχία του με το στοιχείο της Φόρμας) το οποίο κείμενο να προσδίδει έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο κ.ο.κ.) ώστε ο επισκέπτης της σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Για παράδειγμα στην Φόρμα που παρουσιάζεται στην αρχή αυτής της σελίδας, το πεδίο κειμένου το οποίο δέχεται το επώνυμο χαρακτηρίζεται από το κείμενο Επώνυμο. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου κειμένου που δέχεται το επώνυμο.
Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε βέβαια να το μορφοποιήσουμε με HTML ετικέτες.
Για τον λόγο αυτόν κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο (δίπλα του ή σε οποιοδήποτε άλλο σημείο ώστε να είναι εμφανή η αντιστοιχία του με το στοιχείο της Φόρμας) το οποίο κείμενο να προσδίδει έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο κ.ο.κ.) ώστε ο επισκέπτης της σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Για παράδειγμα στην Φόρμα που παρουσιάζεται στην αρχή αυτής της σελίδας, το πεδίο κειμένου το οποίο δέχεται το επώνυμο χαρακτηρίζεται από το κείμενο Επώνυμο. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου κειμένου που δέχεται το επώνυμο.
Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε βέβαια να το μορφοποιήσουμε με HTML ετικέτες.
Η ετικέτα <form>
Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες <form> και </form>. Οι κυριότερες ιδιότητες της ετικέτας είναι οι name, method και action.
Με την ιδιότητα name δίνουμε ένα όνομα στην φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα ενός script. Καλό είναι πάντα να δίνουμε όνομα στις Φόρμες που κατασκευάζουμε, ιδιαίτερα στις περιπτώσεις που έχουμε περισσότερες από μια Φόρμες στην ίδια σελίδα.
Η ιδιότητα action περιέχει το URL του αρχείου script στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα το οποίο τρέχει στον Server και το οποίο μεταξύ των άλλων μπορεί να δέχεται σαν είσοδο δεδομένα τα οποία λαμβάνει ο Server από τον browser του επισκέπτη (συνήθως από μια Φόρμα). Το script , χρησιμοποιώντας μια script γλώσσα προγραμματισμού (π.χ. asp , php κτλ.) , επεξεργάζεται τα δεδομένα αυτά και έπειτα επιστρέφει στον browser μια HTML σελίδα. Η επεξεργασία αυτή μπορεί να είναι από απλές πράξεις μεταξύ των δεδομένων έως και αναζήτηση σε μια περίπλοκη Βάση Δεδομένων με βάση τα δεδομένα αυτά (ένα τέτοιο script περιέχει κατάλληλες εντολές ώστε να συνδεθεί σε μια Βάση Δεδομένων και να προσπελάσει αλλα και να προσθέσει και να διαγράψει εγγραφές)
Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στον Server που βρίσκεται το πρόγραμμα script που θα τα επεξεργαστεί και μπορεί να πάρει τις τιμές get ή post. Με την μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που "δείχνει" η ιδιότητα action και χωρίζονται από το σύμβολο &. Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL . Στην περίπτωση post το αρχείο script παίρνει τα δεδομένα της Φόρμας μέσω της στάνταρ εισόδου. Παρακάτω η ιδιότητα method αναφέρεται πιο αναλυτικά.
Μέσα στα όρια των ετικετών <form> και </form> εκτός απο τα στοιχεία της Φόρμας μπορούμε επίσης να προσθέσουμε κείμενο (συνήθως Λεζάντες των στοιχείων) μαζί με ετικέτες μορφοποίησης
Με την ιδιότητα name δίνουμε ένα όνομα στην φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα ενός script. Καλό είναι πάντα να δίνουμε όνομα στις Φόρμες που κατασκευάζουμε, ιδιαίτερα στις περιπτώσεις που έχουμε περισσότερες από μια Φόρμες στην ίδια σελίδα.
Η ιδιότητα action περιέχει το URL του αρχείου script στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα το οποίο τρέχει στον Server και το οποίο μεταξύ των άλλων μπορεί να δέχεται σαν είσοδο δεδομένα τα οποία λαμβάνει ο Server από τον browser του επισκέπτη (συνήθως από μια Φόρμα). Το script , χρησιμοποιώντας μια script γλώσσα προγραμματισμού (π.χ. asp , php κτλ.) , επεξεργάζεται τα δεδομένα αυτά και έπειτα επιστρέφει στον browser μια HTML σελίδα. Η επεξεργασία αυτή μπορεί να είναι από απλές πράξεις μεταξύ των δεδομένων έως και αναζήτηση σε μια περίπλοκη Βάση Δεδομένων με βάση τα δεδομένα αυτά (ένα τέτοιο script περιέχει κατάλληλες εντολές ώστε να συνδεθεί σε μια Βάση Δεδομένων και να προσπελάσει αλλα και να προσθέσει και να διαγράψει εγγραφές)
Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στον Server που βρίσκεται το πρόγραμμα script που θα τα επεξεργαστεί και μπορεί να πάρει τις τιμές get ή post. Με την μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που "δείχνει" η ιδιότητα action και χωρίζονται από το σύμβολο &. Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL . Στην περίπτωση post το αρχείο script παίρνει τα δεδομένα της Φόρμας μέσω της στάνταρ εισόδου. Παρακάτω η ιδιότητα method αναφέρεται πιο αναλυτικά.
Μέσα στα όρια των ετικετών <form> και </form> εκτός απο τα στοιχεία της Φόρμας μπορούμε επίσης να προσθέσουμε κείμενο (συνήθως Λεζάντες των στοιχείων) μαζί με ετικέτες μορφοποίησης
Παράδειγμα σύνταξης φόρμας
<form name="form1" method="post" action="example.php">
<input>
<input>
</form>
<input>
<input>
</form>
Η ετικέτα <input>
Με την ετικέτα <input> εισάγουμε τα περισσότερα στοιχεία της φόρμας. Οι κυριότερες ιδιότητες της ετικέτας είναι η type η οποία καθορίζει τον τύπο του στοιχείου της Φόρμας (Πεδίο Κειμένου ή Περιοχή Κειμένου ή Κουμπί Επιλογών ή Κουτί Πολλαπλών Επιλογών ή Κουμπί), η name με την οποία δίνουμε ένα μοναδικό όνομα στο στοιχείο της φόρμας (δεν πρέπει να υπάρχουν στοιχεία φόρμας με τα ίδια ονόματα) και η value με την οποία δίνουμε μια αρχική τιμή στο στοιχείο της φόρμας. Η ετικέτα <input> δεν έχει ετικέτα τέλους
Παράδειγμα σύνταξης της ετικέτας <input>
<form name="form1" method="post" action="http://www.wlearn.gr/script.php">
Ηλικία: <input type="text" name="age" value="0" />
</form>
Ηλικία: <input type="text" name="age" value="0" />
</form>
Πώς εισάγουμε ένα Πεδίο Κειμένου (text field) στην Φόρμα μας ;
Εισαγωγή πεδίου κειμένου σε μια φόρμα
<form name="form1" method="post" action="example1.php">
Όνομα: <input type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="33" />
<input type="Submit" name="Submit" value="Αποστολή">
</form>
Όνομα: <input type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="33" />
<input type="Submit" name="Submit" value="Αποστολή">
</form>
Εισαγωγή πεδίου κειμένου σε μια φόρμα
Δοκίμασε τοΗ χρήση της ιδιότητας value σε αυτήν την περίπτωση εμφανίζει μέσα στο πλαίσιο κειμένου την τιμή της ιδιότητας. Μια άλλη ιδιότητα που μπορεί να πάρει η ετικέτα <input> είναι η size η οποία καθορίζει τον αριθμό των ορατών χαρακτήρων που μπορεί να χωρέσει το Πεδίο Κειμένου. Η ιδιότητα maxlength καθορίζει τον αριθμό χαρακτήρων που μπορεί να πληκτρολογήσει ο επισκέπτης.
Την λεζάντα του πεδίου κειμένου (Όνομα) μπορούμε να την διαμορφώσουμε όπως εμείς θέλουμε προσθέτοντας HTML ετικέτες. Για παράδειγμα :
Εισαγωγή πεδίου κειμένου σε μια φόρμα
<form name="form1" method="post" action="example1.php">
<em>Όνομα:</em>
<input type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="30" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<em>Όνομα:</em>
<input type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="30" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Πώς εισάγουμε ένα Πεδίο Password στην Φόρμα μας ;
Εισαγωγή πεδίου password σε μια φόρμα
<form name="form1" method="post" action="example1.php">
Password: <input type="password" name="kodikos" size="20" maxlength="20" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Password: <input type="password" name="kodikos" size="20" maxlength="20" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Για να εισάγουμε στην δική μας Φόρμα ένα τέτοιο πεδίο στο οποίο όταν ο επισκέπτης της σελίδας μας πληκτρολογεί μέσα σε αυτό, να εμφανίζονται βουλίτσες ή αστεράκια απλά βάζουμε την τιμή password στην ιδιότητα type της ετικέτας <input>. Η ιδιότητες size και maxlength μπορούν να χρησιμοποιηθούν όπως και στην περίπτωση του απλού Πεδίου Κειμένου
Πώς εισάγουμε Κουμπιά Επιλογών (radio buttons) στην Φόρμα μας ;
Εισαγωγή radio buttons σε μια φόρμα
<form name="form1" method="post" action="example2.php">
Φύλο: <input type="radio" name="sex" value="male" checked="checked" > Ανδρας
<input type="radio" name="sex" value="female" /> Γυναίκα
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Φύλο: <input type="radio" name="sex" value="male" checked="checked" > Ανδρας
<input type="radio" name="sex" value="female" /> Γυναίκα
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Η ιδιότητα name εκτός από το να δίνει ένα όνομα στα κουμπιά επιλογής, εδώ παίζει και τον ρόλο της ομαδοποίησης. Δηλαδή ομαδοποιεί τα κουμπιά επιλογής (ορίζοντας στην ιδιότητα name την ίδια τιμή) έτσι ώστε μόνο ένα από αυτά να μπορεί να επιλέγεται από τον χρήστη. Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων που βρίσκεται στην αρχή της ενότητας, αν στο Φύλο επιλέξουμε Γυναίκα τότε παύει να είναι επιλεγμένο το κουμπί που αναφέρετε στην επιλογή Ανδρας. Αν τα δύο αυτά κουμπιά επιλογής είχαν διαφορετική τιμή στην ιδιότητα name τότε η Φόρμα θα μας επέτρεπε να είχαμε και τις δύο επιλογές επιλεγμένες (Ανδρας, Γυναίκα).
Η διότητα value ορίζει την τιμή που θα στείλει η φόρμα στον Server αφού πατήσουμε το κουμπί αποστολής. Σύμφωνα με τον κώδικα HTML που βρίσκεται πιο πάνω, εάν ο επισκέπτης επιλέξει την επιλογή Ανδρας τότε στον Server θα σταλεί η τιμή "male" , ενώ αν επιλέξει Γυναίκα θα σταλεί η τιμή "female".
Η ιδιότητα checked της ετικέτας <input> χρησιμοποιείται για να ορίσουμε ποια από τα ομαδοποιημένα κουμπιά θα είναι εξορισμού επιλεγμένο όταν φορτώνεται η σελίδα. Η ιδιότητα αυτή δεν παίρνει τιμή.
Πώς εισάγουμε Κουτιά Πολλαπλών Επιλογών (checkbox) στην Φόρμα μας ;
Εισαγωγή checkbox σε μια φόρμα
<form name="form1" method="post" action="example3.php">
<input type="checkbox" name="sports" value="1" /> Αθλητισμός<br />
<input type="checkbox" name="tv" value="1" /> Τηλεόραση<br />
<input type="checkbox" name="travel" value="1" /> Ταξίδια<br />
<input type="checkbox" name="movies" value="1" /> Κινηματογράφος
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<input type="checkbox" name="sports" value="1" /> Αθλητισμός<br />
<input type="checkbox" name="tv" value="1" /> Τηλεόραση<br />
<input type="checkbox" name="travel" value="1" /> Ταξίδια<br />
<input type="checkbox" name="movies" value="1" /> Κινηματογράφος
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Όταν ένα κουτί επιλογής είναι τσεκαρισμένο τότε η τιμή του πεδίου που θα σταλεί στον Server ορίζεται από την ιδιότητα value. Σύμφωνα με τον πιο πάνω κώδικα, αν επιλέξουμε το κουτί επιλογών Ταξίδια τότε η τιμή του πεδίου με όνομα travel θα πάρει την τιμή 1. Όταν κάποιο από τα κουτιά δεν είναι τσεκαρισμένο τότε η τιμή του πεδίου θα είναι κενή, δηλαδή δεν θα περιέχει τίποτα.
Η ιδιότητα checked της ετικέτας <input> χρησιμοποιείται για να ορίσουμε ποια από τα κουμπιά πολλαπλών επιλογών θα είναι εξορισμού επιλεγμένο όταν φορτώνεται η σελίδα. Η ιδιότητα αυτή δεν παίρνει τιμή
Πώς εισάγουμε Περιοχή Κειμένου στην Φόρμα μας ;
Εισαγωγή textarea σε μια φόρμα
<form name="form1" method="post" action="example4.php">
<textarea name="textarea2" cols="30" rows="3"></textarea>
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<textarea name="textarea2" cols="30" rows="3"></textarea>
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Η ιδιότητα cols ορίζει τον αριθμό των ορατών χαρακτήρων (αυτοί δηλαδή που φαίνονται χωρίς οριζόντιο scrolling) που θα χωράει κάθε γραμμή στην Περιοχή Κειμένου, ενώ η ιδιότητα rows ορίζει τον αριθμό των ορατών γραμμών (αυτές δηλαδή που φαίνονται χωρίς κάθετο scrolling) που θα έχει η Περιοχή Κειμένου. Η χρήση και των δύο αυτών ιδιοτήτων είναι απαραίτητη. Όταν ο επισκέπτης πατάει το Κουμπί Υποβολής της Φόρμας αυτό που θα σταλεί στον Server είναι ολόκληρο το κείμενο που πληκτρολόγησε στη Περιοχή κειμένου
Πώς εισάγουμε Λίστα Επιλογών στην Φόρμα μας ;
Εισαγωγή λίστας σε μια φόρμα
<form name="form1" method="post" action="example5.php">
<select name="countries">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</form>
<select name="countries">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</form>
Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <SELECT> και </select> και αντιστοιχεί σε μια επιλογή της λίστας. Όσες επιλογές επιθυμούμε να περιλαμβάνει η Λίστα Επιλογών τόσες ετικέτες <option> πρέπει να προσθέσουμε. Μεταξύ των ετικετών <option> και </option> γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην λίστα (σύμφωνα με τον παραπάνω κώδικα το κείμενο της πρώτης επιλογής της Λίστας Επιλογών είναι Ελλάδα, το κείμενο της δεύτερης επιλογής είναι Γαλλία κ.ο.κ.).
Με την ιδιότητα value της <option> ορίζουμε την τιμή που θα σταλεί στον Server (σύμφωνα με τον παραπάνω κώδικα αν ο επισκέπτης επιλέξει την επιλογή Ελλάδα και πατήσει το κουμπί αποστολής της φόρμας, τότε θα σταλεί στον Server η τιμή GR, ενώ αν επιλέξει την επιλογή Γαλλία θα σταλεί στον Server η τιμή FR κ.ο.κ.).
Η χρήση της ιδιότητας size της ετικέτας <select> εμφανίζει την Λίστα Επιλογών σαν ένα πλαίσιο επιλογών με οριζόντια μπάρα ολίσθησης. Η ιδιότητα size παίρνει σαν τιμή της έναν αριθμό ο οποίος ορίζει τον αριθμό γραμμών που θα εμφανίζονται στο πλαίσιο επιλογών. Για παράδειγμα αν γράφαμε τον παραπάνω κώδικα με τον παρακάτω τρόπο:
Εισαγωγή λίστας σε μια φόρμα
<form name="form1" method="post" action="example5.php">
<select name="countries" size="3">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</form>
<select name="countries" size="3">
<option value="GR" selected="selected" >Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="UK">Αγγλία</option>
</select>
</form>
Όπως βλέπετε η άλλοτε Λίστα επιλογών εμφανίζεται τώρα σαν ένα πλαίσιο επιλογών στο οποίο φαίνονται οι τρεις πρώτες επιλογές, ενώ τις υπόλοιπες μπορούμε να τις δούμε πατώντας το κάτω βελάκι της μπάρας ολίσθησης. Αν θέλαμε να εμφανίσουμε όλες τις επιλογές χωρίς ο επισκέπτης να χρειάζεται να χρησιμοποιεί την μπάρα ολίσθησης για να τις δει τότε θα ορίζαμε ως τιμή στην ιδιότητα size τον αριθμό επιλογών που στην περίπτωση μας είναι 8
Σε ορισμένες περιπτώσεις επιθυμούμε ο επισκέπτης να έχει την δυνατότητα να επιλέξει παραπάνω από μια επιλογή. Για παράδειγμα στην παρακάτω λίστα έχοντας πατημένο το κουμπί Ctrl (Control) του πληκτρολογίου μας μπορούμε να επιλέξουμε με τον δείκτη του ποντικιού μας περισσότερες από μια επιλογές.
Για να έχουμε το παραπάνω πλαίσιο πολλαπλών επιλογών απλά προσθέτουμε την ιδιότητα multiple στην ετικέτα <select>. Η ιδιότητα multiple δεν παίρνει τιμές.
Εισαγωγή λίστας σε μια φόρμα
<form name="form1" method="post" action="example5.php">
<select name="countries" size="8" multiple>
<option value="GR">Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="EN">Αγγλία</option>
</select>
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<select name="countries" size="8" multiple>
<option value="GR">Ελλάδα</option>
<option value="FR">Γαλλία</option>
<option value="ES">Ισπανία</option>
<option value="GE">Γερμανία</option>
<option value="IT">Ιταλία</option>
<option value="NE">Ολλανδία</option>
<option value="PO">Πορτογαλλία</option>
<option value="EN">Αγγλία</option>
</select>
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Κρυφά πεδία της Φόρμας
Εισαγωγή κρυφών πεδίων σε μια φόρμα
<form name="form1" method="post" action="example1.php">
<input type="hidden" name="married" value="1">
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<input type="hidden" name="married" value="1">
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Τα κρυφά πεδία δεν εμφανίζονται στον browser. Χρησιμοποιούμε κρυφά πεδία όταν θέλουμε να περάσουμε στο αρχείο script μια τιμή μαζί με τις υπόλοιπες τιμές που πληκτρολογεί ή επιλέγει ο επισκέπτης.
Για παράδειγμα ας φανταστούμε ότι έχουμε μια σελίδα η οποία περιέχει δύο Φόρμες η κάθε μια από τις οποίες ζητάει από τον επισκέπτη όνομα, επώνυμο και ηλικία. Την πρώτη Φόρμα την συμπληρώνουν όσοι είναι παντρεμένοι, ενώ την δεύτερη όσοι δεν είναι. Δείτε την σελίδα με τις δύο φόρμες
Παρακάτω παρουσιάζεται ο κώδικας της πρώτης Φόρμας:
Εισαγωγή κρυφών πεδίων σε μια φόρμα
<form name="married1" method="post" action="married.php">
<input type="text" name="onoma" />
<input type="text" name="eponimo" />
<input type="text" name="ilikia" />
<input type="hidden" name="married" value="1" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<input type="text" name="onoma" />
<input type="text" name="eponimo" />
<input type="text" name="ilikia" />
<input type="hidden" name="married" value="1" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Εισαγωγή κρυφών πεδίων σε μια φόρμα
<form name="married2" method="post" action="example1.php">
<input type="text" name="onoma" />
<input type="text" name="eponimo" />
<input type="text" name="ilikia" />
<input type="hidden" name="married" value="0" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
<input type="text" name="onoma" />
<input type="text" name="eponimo" />
<input type="text" name="ilikia" />
<input type="hidden" name="married" value="0" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Πως το script καταλαβαίνει από ποια από τις δύο Φόρμες προέρχονται τα δεδομένα; Με την χρήση ενός κρυφού πεδίου με όνομα married. Στην πρώτη Φόρμα το κρυφό πεδίο married έχει τιμή 0, οπότε αν ο επισκέπτης πατήσει το κουμπί αποστολής της πρώτης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο επισκέπτης μαζί με το κρυφό πεδίο married το οποίο θα έχει την τιμή 0. Ενώ αν ο επισκέπτης πατήσει το κουμπί της δεύτερης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο χρήστης μαζί με το κρυφό πεδίο married το οποίο έχει την τιμή 1. Με λίγα λόγια δηλαδή, το πεδίο married της Φόρμας, ανάλογα αν είναι 0 ή ένα, "λέει" στο script αν ο επισκέπτης που πληκτρολόγησε τα στοιχεία του είναι παντρεμένος ή όχι. Φυσικά αντί για 0 και 1 θα μπορούσαμε να είχαμε οποιαδήποτε τιμή αρκεί βέβαια να συμφωνεί με τον κώδικα του script.
Βέβαια είναι πλεονασμός και καθόλου λειτουργική λύση να χρησιμοποιούμε δύο Φόρμες για να στείλουμε στο script την πληροφορία της οικογενειακής κατάστασης του επισκέπτη. Αντί αυτό θα μπορούσαμε κάλλιστα να προσθέταμε στην πρώτη Φόρμα μια Λίστα Επιλογής με δύο επιλογές: Αγγαμος, Έγγαμος και με αυτό τον τρόπο πολύ απλά θα περνούσαμε την πληροφορία που θέλαμε στο Script. Ή ακόμα θα μπορούσαμε αντί της Λίστας Επιλογών να είχαμε Κουμπιά Επιλογών. Ο λόγος που γράφτηκε το παράδειγμα αυτό είναι μόνο για διδακτικό σκοπό ώστε να κατανοηθεί η χρήση των κρυφών πεδίων σε μια Φόρμα.
Δοκιμάστε να συμπληρώσετε τις δύο παραπάνω Φόρμες και δείτε το αποτέλεσμα πατώντας το κουμπί Αποστολή
Το κουμπί Υποβολής της Φόρμας
Εισαγωγή submit button σε μια φόρμα
<form name="form1" method="post" action="example.php">
<input>
<input>
<input type="Submit" name="SubmitFrom" value="Αποστολή Στοιχείων" />
</form>
<input>
<input>
<input type="Submit" name="SubmitFrom" value="Αποστολή Στοιχείων" />
</form>
Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, το Κουμπί Υποβολής είναι το:
Η τοποθέτηση του Κουμπιού Υποβολής στην Φόρμα μας είναι προαιρετική. Σχεδόν όλες οι φόρμες έχουν Κουμπί Υποβολής. Αυτές που δεν έχουν η υποβολή της Φόρμας γίνετε με κώδικα script (συνήθως γραμμένο σε Javascript) που ενεργοποιείται μετά από ένα HTML γεγονός
Αποστολή στοιχείων στον Server (Μέθοδος GET και POST)
Η αποστολή των τιμών από την φόρμα του browser προς το αρχείο script του Server που θα τα επεξεργαστεί, γίνεται με βάση την ιδιότητα method (μέθοδος) της ετικέτας <form> η οποία μπορεί να πάρει τις τιμές get και post.
Στην περίπτωση χρήσης της μεθόδου GET κάθε όνομα ενός στοιχείου συνοδεύεται με την τιμή που πληκτρολόγησε ή επέλεξε ο επισκέπτης και αυτό το "πακέτο" (όνομα στοιχείου-τιμή στοιχείου) προστίθεται στο τέλος του URL που δείχνει η ιδιότητα action της ετικέτας <form>. Για παράδειγμα αν έχουμε τον παρακάτω κώδικα:
και ο επισκέπτης πληκτρολογήσει το όνομα Akis στο πεδίο κειμένου με όνομα onoma και έπειτα πατήσει το κουμπί Submit, τότε το URL που θα ανοίξει ο browser θα είναι το:
http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&Submit=Submit
Στο τέλος του URL μπαίνει ένα λατινικό ερωτηματικό και στην συνέχεια ακολουθεί το όνομα του στοιχείου την φόρμας, που στην προκειμένη περίπτωση είναι onoma , ακολουθεί το σύμβολο = (ίσον) και αμέσως μετά η τιμή που πληκτρολόγησε ο επισκέπτης. Στην περίπτωση αυτή η Φόρμα στέλνει δύο ονόματα στοιχείων ( onoma και Submit ) μαζί με τις τιμές τους (value) στον Server. Όταν υπάρχουν περισσότερα από ένα πεδία στην Φόρμα, όπως στην περίπτωση αυτή, τότε τα "πακέτα" τιμών στο URL χωρίζονται με το σύμβολο &.
Στο παρακάτω παράδειγμα η Φόρμα θα στείλει 3 "πακέτα" τιμών (onoma, eponimo και Submit).
Αν ο επισκέπτης πληκτρολογήσει όνομα και επίθετο και έπειτα πατήσει το Submit Button , τότε το URL που θα ανοίξει ο browser θα είναι το:
http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&eponimo=Kargiofyllis&Submit=Submit
Ο Server αποθηκεύει όλη την συμβολοσειρά του URL μετά το λατινικό ερωτηματικό ( ? ) στην μεταβλητή περιβάλλοντος QUERY_STRING . Έπειτα η συμβολοσειρά αυτή περνάει μέσα στο script το οποίο με προγραμματιστικό κώδικα διαχωρίζει τα πακέτα τιμών (όνομα_στοιχείο=τιμή) μεταξύ τους.
Στην Φόρμα αυτή συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Προσέξτε το URL της σελίδας που θα ανοίξει. Δοκίμασε το
Η μέθοδο post κάνει το ίδιο πράγμα με την μέθοδο get , με την διαφορά ότι στέλνει τα δεδομένα της φόρμας σε ξεχωριστή ροή δεδομένων (data stream) και όχι μαζί με το URL όπως με την μέθοδο GET. Ο Server δέχεται τα δεδομένα αυτά και τα αποθηκεύει σε ένα προσωρινό αρχείο και έπειτα τα περνάει μέσα στο script για να τα επεξεργαστεί. Ορισμένοι Server αντί να αποθηκεύουν τα δεδομένα σε κάποιο αρχείο χρησιμοποιούν για την είσοδο των δεδομένων την standard είσοδο (standard input).
Η Φόρμα αυτή χρησιμοποιεί την μέθοδο post. Συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Έπειτα παρατηρήστε το URL της σελίδας που ανοίγει ο browser μετά το πάτημα του κουμπιού. Στην περίπτωση αυτή δεν υπάρχει το λατινικό ερωτηματικό ακολουθούμενο από τα δεδομένα της Φόρμας όπως γίνεται με την μέθοδο get. Δοκίμασε το
Αν έχουμε στην Φόρμα μας πολλά στοιχεία τότε η καταλληλότερη μέθοδος για να χρησιμοποιήσουμε είναι η post , καθώς με την μέθοδο get όλα τα δεδομένα αποθηκεύονται στην μεταβλητή περιβάλλοντος QUERY_STRING η οποία μπορεί σε μερικούς Servers να έχει όριο όσον αφορά στον όγκο αποθήκευσης (συνήθως οι πληροφορίες που μας δίνουν οι εταιρίες οι οποίες φιλοξενούν το site μας στον Server τους, δεν φτάνουν σε τέτοιο βάθος, έτσι σπάνια γνωρίζουμε τον όγκο της πληροφορίας που μπορούν να αποθηκευτούν στις μεταβλητές περιβάλλοντος του Server ) . Αντίθετα με την μέθοδο post μπορούμε να έχουμε οσαδήποτε στοιχεία στην Φόρμα μας χωρίς να ανησυχούμε για το όριο της χωρητικότητας αποθήκευσης της μεταβλητής περιβάλλοντος QUERY_STRING.
Ένας άλλος λόγος (και πολύ πιο σημαντικός) για να χρησιμοποιούμε την μέθοδο post αντί της get είναι το γεγονός ότι η μέθοδος get δεν συνιστάται από το τελευταίο επίσημο πρότυπο της HTML
Στην περίπτωση χρήσης της μεθόδου GET κάθε όνομα ενός στοιχείου συνοδεύεται με την τιμή που πληκτρολόγησε ή επέλεξε ο επισκέπτης και αυτό το "πακέτο" (όνομα στοιχείου-τιμή στοιχείου) προστίθεται στο τέλος του URL που δείχνει η ιδιότητα action της ετικέτας <form>. Για παράδειγμα αν έχουμε τον παρακάτω κώδικα:
Αποστολή δεδομένων στον server με την μέθοδο get
<form name="form1" method="get" action="http://www.wlearn.gr/doityourself/get_example.php">
Όνομα: <input type="text" name="onoma">
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Όνομα: <input type="text" name="onoma">
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&Submit=Submit
Στο τέλος του URL μπαίνει ένα λατινικό ερωτηματικό και στην συνέχεια ακολουθεί το όνομα του στοιχείου την φόρμας, που στην προκειμένη περίπτωση είναι onoma , ακολουθεί το σύμβολο = (ίσον) και αμέσως μετά η τιμή που πληκτρολόγησε ο επισκέπτης. Στην περίπτωση αυτή η Φόρμα στέλνει δύο ονόματα στοιχείων ( onoma και Submit ) μαζί με τις τιμές τους (value) στον Server. Όταν υπάρχουν περισσότερα από ένα πεδία στην Φόρμα, όπως στην περίπτωση αυτή, τότε τα "πακέτα" τιμών στο URL χωρίζονται με το σύμβολο &.
Στο παρακάτω παράδειγμα η Φόρμα θα στείλει 3 "πακέτα" τιμών (onoma, eponimo και Submit).
Αποστολή δεδομένων στον server με την μέθοδο get
<form name="form1" method="get" action="http://www.wlearn.gr/doityourself/get_example.php">
Όνομα: <input type="text" name="onoma" />
Επώνυμο:<input type="text" name="eponimo" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
Όνομα: <input type="text" name="onoma" />
Επώνυμο:<input type="text" name="eponimo" />
<input type="Submit" name="Submit" value="Αποστολή" />
</form>
http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&eponimo=Kargiofyllis&Submit=Submit
Ο Server αποθηκεύει όλη την συμβολοσειρά του URL μετά το λατινικό ερωτηματικό ( ? ) στην μεταβλητή περιβάλλοντος QUERY_STRING . Έπειτα η συμβολοσειρά αυτή περνάει μέσα στο script το οποίο με προγραμματιστικό κώδικα διαχωρίζει τα πακέτα τιμών (όνομα_στοιχείο=τιμή) μεταξύ τους.
Στην Φόρμα αυτή συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Προσέξτε το URL της σελίδας που θα ανοίξει. Δοκίμασε το
Η μέθοδο post κάνει το ίδιο πράγμα με την μέθοδο get , με την διαφορά ότι στέλνει τα δεδομένα της φόρμας σε ξεχωριστή ροή δεδομένων (data stream) και όχι μαζί με το URL όπως με την μέθοδο GET. Ο Server δέχεται τα δεδομένα αυτά και τα αποθηκεύει σε ένα προσωρινό αρχείο και έπειτα τα περνάει μέσα στο script για να τα επεξεργαστεί. Ορισμένοι Server αντί να αποθηκεύουν τα δεδομένα σε κάποιο αρχείο χρησιμοποιούν για την είσοδο των δεδομένων την standard είσοδο (standard input).
Η Φόρμα αυτή χρησιμοποιεί την μέθοδο post. Συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Έπειτα παρατηρήστε το URL της σελίδας που ανοίγει ο browser μετά το πάτημα του κουμπιού. Στην περίπτωση αυτή δεν υπάρχει το λατινικό ερωτηματικό ακολουθούμενο από τα δεδομένα της Φόρμας όπως γίνεται με την μέθοδο get. Δοκίμασε το
Αν έχουμε στην Φόρμα μας πολλά στοιχεία τότε η καταλληλότερη μέθοδος για να χρησιμοποιήσουμε είναι η post , καθώς με την μέθοδο get όλα τα δεδομένα αποθηκεύονται στην μεταβλητή περιβάλλοντος QUERY_STRING η οποία μπορεί σε μερικούς Servers να έχει όριο όσον αφορά στον όγκο αποθήκευσης (συνήθως οι πληροφορίες που μας δίνουν οι εταιρίες οι οποίες φιλοξενούν το site μας στον Server τους, δεν φτάνουν σε τέτοιο βάθος, έτσι σπάνια γνωρίζουμε τον όγκο της πληροφορίας που μπορούν να αποθηκευτούν στις μεταβλητές περιβάλλοντος του Server ) . Αντίθετα με την μέθοδο post μπορούμε να έχουμε οσαδήποτε στοιχεία στην Φόρμα μας χωρίς να ανησυχούμε για το όριο της χωρητικότητας αποθήκευσης της μεταβλητής περιβάλλοντος QUERY_STRING.
Ένας άλλος λόγος (και πολύ πιο σημαντικός) για να χρησιμοποιούμε την μέθοδο post αντί της get είναι το γεγονός ότι η μέθοδος get δεν συνιστάται από το τελευταίο επίσημο πρότυπο της HTML
Το κουμπί Καθαρισμού της Φόρμας
Εισαγωγή reset button στις φόρμες
<form name="form1" method="post" action="example.php">
<input >
<input >
<input type="Reset" name="Reset" value="Καθαρισμός Φόρμας" />
</form>
<input >
<input >
<input type="Reset" name="Reset" value="Καθαρισμός Φόρμας" />
</form>
Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, συμπληρώστε την φόρμα και έπειτα πατήστε το κουμπί καθαρισμού και δείτε το αποτέλεσμα.
Πώς εισάγουμε Κουμπί (Button) στην Φόρμα μας
Εισαγωγή απλού κουμπιού στις φόρμες
<form name="form1" method="post" action="example.php">
<input type="button" name="koumpi" value="Υπολογισμός Αθροίσματος" onClick="function()" />
</form>
<input type="button" name="koumpi" value="Υπολογισμός Αθροίσματος" onClick="function()" />
</form>
Ο μόνος λόγος χρήσης απλών κουμπιών είναι η εκτέλεση ενός script (συνήθως σε Javascript). Στην ετικέτα <input> προσθέτουμε ένα HTML γεγονός (onclick, ondblclick, onkeypress, onkeydown, onkeyup), για να εκτελέσεί μια λειτουργία ενός script
Στην HTML5 άλλαξαν αρκετά πράγρματα στις φόρμες. Μπορείτε να δείτε τα νέα πεδία (input types) αλλά και τις νέες ιδιότητες των στοιχείων μιας φόρμας.