Forms

Οι φόρμες χρησιμοποιούνται για να σταλεί πληροφορία από τον web browser στο web server. Μερικά παραδείγματα χρήσης είναι η φόρμα επικοινωνίας όπου συμπληρώνει ο χρήστης ένα μήνυμα και αυτό αποστέλλεται στο διαχειριστή της ιστοσελίδας, η φόρμα δημιουργίας λογαριασμού σε μία ιστοσελίδα ή η φόρμα εισόδου σε κάποια ιστοσελίδα με καταχώρηση ονόματος χρήστη και κωδικού. Επίσης, οι ιστοσελίδες δυναμικού περιεχομένου έχουν κατάλληλο σύστημα διαχείρισης προσβάσιμο μόνο από το διαχειριστή της ιστοσελίδας και μέσα από το οποίο, με τη χρήση ανάλογων φορμών, ρυθμίζει το περιεχόμενο της ιστοσελίδας που θα είναι ορατό από τους υπόλοιπους χρήστες. Τη διαχείριση της πληροφορίας που αποστέλλεται, την επεξεργάζεται ο server με τη βοήθεια μίας server-side γλώσσας (στην περίπτωσή μας η PHP) και προβαίνει στις απαραίτητες ενέργειες. Για παράδειγμα, αν τα στοιχεία εισόδου σε μια ιστοσελίδα δεν είναι καταχωρημένα στη βάση δεδομένων, εμφανίζει το ανάλογο μήνυμα. Διαφορετικά, κάνει εισαγωγή του χρήστη στην ιστοσελίδα παρέχοντάς του πρόσβαση σε επιπρόσθετη πληροφορία.

Μία φόρμα δημιουργείται με την ετικέτα <form> και περιέχει στοιχεία καταχώρησης πληροφορίας.  Οι παράμετροι που δέχεται μία φόρμα είναι οι εξής:

  • action: ορίζει το url που θα χρησιμοποιηθεί από τον server για να επξεργαστεί τα στοιχεία της φόρμας
  • method (get ή post): ορίζει τη μέθοδο αποστολής των δεδομένων της φόρμας. Η μέθοδος get εμφανίζει τα δεδομένα στη διεύθυνση μπάρας του browser ενώ η post δεν τα στέλνει στο server χωρίς να τα εμφανίζει
  • enctype: ορίζει τη μέθοδο αποκωδικοποίησης των δεδομένων

Περισσότερες λεπτομέρειες θα δούμε σε επόμενα κεφάλαια, όπου θα δούμε πώς μπορούμε να διαχειριστούμε τα δεδομένα με τη βοήθεια της PHP.

Για να μπορέσει ο χρήστης να χρησιμοποιήσει μία φόρμα, θα πρέπει να έχει τη δυνατότητα να καταχωρεί περιεχόμενο. Αυτό επιτυγχάνεται με τα παρακάτω tags:

Html tag - <input>
Υπάρχουν διάφορα είδη στοιχείων input, κάθε ένα από τα οποία ορίζεται από την ιδιότητα type του tag <input>. Κάθε είδος, μπορεί να δεχθεί και ανάλογες παραμέτρους. Οι δυνατές τιμές της ιδιότητας type είναι οι εξής:

Τιμή της ιδιότητας type

Περιγραφή

Επιπλέον ιδιότητες

text

κείμενο μιας γραμμής

  • size: μέγεθος του box
  • maxlength: μέγιστος αριθμός χαρακτήρων

password

όμοιο με το text αλλά αντικαθιστά κάθε χαρακτήρα με * για εισαγωγή κωδικού

  • size: μέγεθος του box
  • maxlength: μέγιστος αριθμός χαρακτήρων

checkbox

χρησιμοποιείται για τη δυνατότητα επιλογής πολλαπλών τιμών από μία λίστα

  • checked: αν είναι προεπιλεγμένο

radio

χρησιμοποιείται για τη δυνατότητα επιλογής μία μόνο τιμής από μία λίστα

  • checked: αν είναι προεπιλεγμένο

hidden

το πεδίο είναι κρυφό, ωστόσο έχει τιμή που αποστέλλεται κανονικά στο server

 

file

  • χρησιμοποιείται για τη δυνατότητα ανεβάσματος (upload) αρχείου

  • πρέπει το enctype της φόρμας να είναι έχει την τιμή multipart/form-data

 

reset

επαναφέρει τα δεδομένα στην αρχική τους τιμή

 

button

δημιουργία button

 

submit

δημιουργία button αποστολής δεδομένων

 

 

Υπάρχουν και παράμετροι που ισχύουν για όλα τα παραπάνω, όπως:

  • name: η ονομασία του στοιχείου, η οποία χρησιμοποιείται από την PHP για να τραβήξει την τιμή του πεδίου
  • value: η τιμή ενός πεδίου

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

<form method="get" action="register.php">
<p>Όνομα: <input type="text" name="firstname" value="" /></p>
<p>Επώνυμο: <input type="text" name="lastname" value="" /></p>
<p>
Ηλικία: <br />
18 - 25: <input type="radio" name="age" value="18-25" checked="checked" /><br />
26 - 35: <input type="radio" name="age" value="36" /><br />
36+: <input type="radio" name="age" value="36_" /><br />
</p>
<p>Κωδικός: <input type="password" name="password" value="" /></p>
<p>Επιβεβαίωση κωδικού: <input type="password" name="confirm" value="" /></p>
<p>
Ενδιαφέροντα:<br />
Μουσική <input name="hobby" type="checkbox" value="Μουσική" /><br />
Αθλητισμός <input name="hobby" type="checkbox" value="Αθλητισμός" /><br />
Λογοτεχνία <input name="hobby" type="checkbox" value="Λογοτεχνία" /><br />
Άλλο <input name="hobby" type="checkbox" value="Άλλο" checked="checked" />
</p>
<p>
<input type="reset" value="Καθαρισμός" />
<input type="submit" value="Αποστολή" />
</p>
</form>

Χρήση του html tag
Δημιουργία φόρμας με χρήση των πεδίων input

Html tag - <textarea>
Το στοιχείο textarea δίνει τη δυνατότητα στο χρήστη να εισάγει κείμενο πολλαπλών γραμμών. Η τιμή του πεδίου δεν εισάγεται στην παράμετρο value αλλά περικλείεται ανάμεσα στο ζεύγος <textarea> και <textarea>. Επιπλέον ιδιότητες που υποστηρίζονται είναι οι:

  • rows: αριθμός γραμμών του πεδίου
  • cols: αριθμός στηλών του πεδίου

Html tag - <select>
Δημιουργεί μία λίστα επιλογών. Κάθε επιλογή της λίστας δημιουργείται με το tag <option>
Το στοιχείο select επιτρέπει μία υποχρεωτικά επιλογή αντικειμένου, εκτός αν χρησιμοποιηθεί η ιδιότητα multiple, οπότε μπορεί να επιλεχθούν από τη λίστα παραπάνω από ένα αντικείμενα ή και κανένα. Το στοιχείο option, εκτός από την ιδιότητα value, δέχεται και την παράμετρο selected (με τιμή “selected”) για να δηλώσουμε ότι είναι προεπιλεγμένη.

<h3>Φόρμα επικοινωνίας</h3>
<form method="get" action="contact.php">
<p>
Προς:<br />
<select name="destination">
<option value="Γραμματεία" selected="selected">Γραμματεία</option>
<option value="Μηχανογράφηση">Μηχανογράφηση</option>
<option value="Λογιστήριο">Μηχανογράφηση</option>
</select>
</p>
<p>
Προς: (δυνατότητα πολλαπλών επιλογών)<br />
<select name="destination_multiple" multiple="multiple">
<option value="Γραμματεία" selected="selected">Γραμματεία</option>
<option value="Μηχανογράφηση">Μηχανογράφηση</option>
<option value="Λογιστήριο">Μηχανογράφηση</option>
</select>
</p>
<p><textarea name="message" rows="5" cols="50">Εισάγετε το κείμενό σας</textarea></p>
<input type="submit" value="Αποστολή" />
</p>
</form>

Χρήση των στοιχείων select και textarea
Χρήση των στοιχείων select και textarea