Κατασκευή φόρμας σε ιστοσελίδα
Πολλοί από τους αναγνώστες του Web Resources.eu συνεχώς ρωτάνε διάφορες πληροφορίες σχετικά με της φόρμες σε μια ιστοσελίδα, πως λειτουργούν πως γράφουμε μια φόρμα και άλλα παρόμοια ερωτήματα. Σήμερα αποφάσισα να γράψω ένα κατανοητό οδηγό για να σας βοηθήσω να κατανοήσετε το σύνολο των φορμών με απλά και κατανοητά λόγια.
Πριν συνεχίσετε την ανάγνωση σε αυτό το άρθρο θα πρέπει να γνωρίζεται τα βασικά της HTML και λίγα πράγματα από PHP. Επίσης για να ολοκληρώσετε τα παραδείγματα θα πρέπει να έχετε ένα διακομιστή που να μπορεί να εκτελεί PHP σενάρια.
Για να δημιουργήσουμε μια φόρμα σε μία σελίδα HTML χρειαζόμαστε την ετικέτα <form>. Μια φόρμα μπορεί να περιέχει διάφορα στοιχεία, όπως για παράδειγμα λίστες πολλαπλών επιλογών, πεδία κειμένου, κουμπιά, radio buttons, check box, περιοχές κειμένου κ.α.
Ο λόγος ύπαρξης των φορμών είναι για να επιτρέπουν στον τελικό χρήστη μιας ιστοσελίδας να στέλνει δεδομένα στο διακομιστή διαδικτύου (web server).
Η ετικέτα φόρμας με τη σειρά της μπορεί να πάρει κάποιες παραμέτρους για να προσαρμοστεί στης εκάστοτε ανάγκες. Μερικές από αυτές τις παραμέτρους είναι απαραίτητες ενώ κάποιες άλλες είναι προαιρετικές.
Στις φόρμες υπάρχει μόνο μια υποχρεωτική παράμετρος. Αυτή η παράμετρος είναι η action και καθορίζει τον αποδέκτη των δεδομένων. Με άλλα λόγια λέει στη φόρμα, μετά την υποβολή της που να μεταφέρει τα δεδομένα από τα πεδία της.
Οι προαιρετικές παράμετροι είναι περισσότερες και θα της αναλύσουμε σε αυτό το τμήμα του άρθρου.
- accept
- Αυτή την παράμετρο θα πρέπει να την ορίσετε στην φόρμα σας όταν έχετε ένα πεδίο αρχείου, και καθορίζει τους τύπους αρχείων που μπορεί να ανεβάσει ο χρήστης. Η τιμή αυτής της παραμέτρου είναι μορφής MIME. Π.Χ. :text/html, image/png, audio/mpeg
- accept-charset
- Καθορίζει το σύνολο χαρακτήρων που μπορεί ο εξυπηρετητής ιστοσελίδων (web server) να διαχειριστεί. Η τιμή αυτού του πεδίου μπορεί να είναι ένα οποιοδήποτε γνωστό σύνολο χαρακτήρων. Πχ: utf-8, ISO-8859-7, ISO-2022-JP
accept-charset- Καθορίζει το σύνολο χαρακτήρων που μπορεί ο εξυπηρετητής ιστοσελίδων (web server) να διαχειριστεί. Η τιμή αυτού του πεδίου μπορεί να είναι ένα οποιοδήποτε γνωστό σύνολο χαρακτήρων. Πχ: utf-8, ISO-8859-7, ISO-2022-JP
enctype- Καθορίζει τον τρόπο με τον οποίο θα πρέπει τα δεδομένα να κωδικοποιηθούν πριν αυτά αποσταλούν στο server. Οι τιμές που αυτή η παράμετρος μπορεί να δεχτεί είναι οι ακόλουθες: application/x-www-form-urlencoded,multipart/form-data, text/plain
method- Καθορίζει τον τρόπο με τον οποίο θα γίνει η μεταφορά των δεμένων στο server. Οι τιμές που μπορεί να δεχτεί αυτή η παράμετρος είναι οι ακόλουθες : post, get
name- Καθορίζει το όνομα της φόρμας.
Μια φόρμα, πέρα από τις παραμέτρους που αφορούν αποκλειστικά την φόρμα μπορεί να δεχτεί και παραμέτρους που ισχύουν για τις περισσότερες ετικέτες της HTML. Παρακάτω θα δείτε μια λίστα με αυτές τις ετικέτες.
class- Καθορίζει ένα ή και περισσότερα ονόματα κλάσης για το εκάστοτε στοιχείο.
dir- Καθορίζει την κατεύθυνση του κειμένου για το εκάστοτε στοιχείο. Οι τιμές που μπορεί να δεχτεί αυτό το στοιχεία είναι οι ακόλουθες : RTL, LTR
id- Καθορίζει ένα μοναδικό κωδικό για το εκάστοτε στοιχείο.
lang- Καθορίζει ένα κωδικό γλώσσας για το περιεχόμενο στο εκάστοτε στοιχείο. Οι τιμές που μπορεί να δεχτεί είναι όλοι οι κωδικοί γλώσσας από το ISO 639-1
style- Ορίζει ένα CSS στυλ για το εκάστοτε στοιχείο.
title- Καθορίζει επιπλέον πληροφορίες για το εκάστοτε στοιχείο
xml:lang- Καθορίζει ένα κωδικό γλώσσας για το περιεχόμενο στο εκάστοτε στοιχείο. Οι τιμές που μπορεί να δεχτεί είναι όλοι οι κωδικοί γλώσσας από το ISO 639-1. Αυτή η παράμετρος μπορεί να χρησιμοποιηθεί μόνο σε XHTML σελίδες.
Τέλος, μια φόρμα μπορεί να έχει παραμέτρους για συγκεκριμένα συμβάντα που μπορούν να συμβούν σε αυτή. Ακολουθεί μια λίστα με όλα τα συμβάντα που μπορούν να συμβούν σε μια φόρμα.
onclick- Ένα σενάριο εντολών που θα εκτελεστεί μετά από το click του ποντικιού στη φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
ondblclick- Ένα σενάριο εντολών που θα εκτελεστεί μετά από διπλό click του ποντικιού στη φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onmousedown- Ένα σενάριο εντολών που θα εκτελεστεί μόλις το πλήκτρο του ποντικιού πατηθεί πάνω στη φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onmousemove- Ένα σενάριο εντολών που θα εκτελεστεί μόλις εντοπιστεί κίνηση του ποντικιού πάνω στη φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onmouseout- Ένα σενάριο εντολών που θα εκτελεστεί μόλις το ποντίκι βγει εκτός της φόρμας. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onmouseover- Ένα σενάριο εντολών που θα εκτελεστεί όταν το ποντίκι θα κινείτε πάνω από τη φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onmouseup- Ένα σενάριο εντολών που θα εκτελεστεί όταν ο χρήστης έχει κάνει click στη φόρμα και αφήνει το δάκτυλο του από το ποντίκι. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onkeydown- Ένα σενάριο εντολών που θα εκτελεστεί όταν ο χρήστης έχει πατημένο κάποιο πλήκτρο στο πληκτρολόγιο του. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onkeypress- Ένα σενάριο εντολών που θα εκτελεστεί όταν ο χρήστης έχει πατημένο κάποιο πλήκτρο στο πληκτρολόγιο του και το μετά το έχει αφήσει. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onkeyup- Ένα σενάριο εντολών που θα εκτελεστεί όταν το πλήκτρο επανέλθει στην αρχική του θέση. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onreset- Ένα σενάριο εντολών που θα εκτελεστεί όταν ο χρήστης κάνει click στο πλήκτρο reset στην φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
onsubmit- Ένα σενάριο εντολών που θα εκτελεστεί όταν ο χρήστης κάνει click στο πλήκτρο submit στην φόρμα. Αυτό το σενάριο μπορεί να είναι για παράδειγμα JavaScript.
Τώρα που γνωρίζεται ποιες είναι οι παράμετροι που μπορεί να δεχτεί μια φόρμα ας ξεκινήσουμε να δούμε πως μπορούμε να δημιουργήσουμε μια φόρμα για αποστολή δεδομένων στον web server μας.
Για να αρχίσουμε το παράδειγμα μας θα πρέπει αρχικά να κάνουμε κάποιες παραδοχές. Θα υποθέσουμε λοιπόν πως η σελίδα που περιέχει την φόρμα μας είναι η σελίδα form.html και η σελίδα που θα επεξεργαστεί τα δεδομένα της φόρμας είναι η form.php. Επίσης, για την δική μας ευκολία θα υποθέσουμε πως και τα δυο αρχεία βρίσκονται στον ίδιο φάκελο στον διακομιστή μας.
Αρχίζοντας από το αρχείο form.html ο κώδικας θα είναι ο εξής:
<form action="form.php">
<input type="submit" />
</form>
Το αποτέλεσμα της παραπάνω φόρμας θα είναι το ακόλουθο:
Η φόρμα μας προς το παρόν δεν είναι και τόσο ενδιαφέρουσα. Για αυτό θα προσθέσουμε μερικά πεδία μέσα σε αυτή για να αποκτήσει λίγο ενδιαφέρον και να δούμε και πως θα διαχειριστούμε τα δεδομένα μας στο web server.
<form action="form.php">
<label for="mynamefield">Πληκτρολογήστε το όνομα σας</label>
<br />
<input type="text" name="yourname" id="mynamefield" />
<input type="submit" name="subminButton" value="Υποβολή" />
</form>
Το αποτέλεσμα της παραπάνω φόρμας είναι το ακόλουθο:
Τώρα σιγά σιγά η φόρμα μας αρχίζει να έχει περισσότερο ενδιαφέρον. Ας δούμε λοιπόν τι έχουμε κάνει ως τώρα. Αρχικά δημιουργήσαμε μια φόρμα στην οποία ορίσαμε την ιδιότητα action να είναι form.php. Με αυτό τον τρόπο λέμε στη φόρμα μετά την υποβολή της να μεταδώσει τα δεδομένα της στο αρχείο form.php όπου αυτό με τη σειρά του θα τα επεξεργαστεί.
Επόμενο βήμα είναι η προσθήκη μιας ετικέτας για το πεδίο που ακολουθεί. Αν έχετε παρατηρήσει, στην ετικέτα label έχω βάλει την παράμετρο for και η τιμή της είναι ίδια με το id του πεδίου που ακολουθεί. Αυτό το κάνουμε για να διευκολύνουμε τον τελικό χρήστη, γιατί όταν κάνει ο χρήστης click πάνω στην ετικέτα τότε το πεδίο με το ίδιο id παίρνει αυτόματα το focus.
Στη συνέχεια έχω εισάγει ένα πεδίο, και έχω ορίσει την ιδιότητα name σε «yourname». Προσέξτε αυτή την ιδιότητα, γιατί με την τιμή αυτής της ιδιότητας θα ανακτήσετε μετά τα δεδομένα στο αρχείο form.php.
Τέλος στην φόρμα εισάγω και το πλήκτρο submit που επιτρέπει στον τελικό χρήστη να υποβάλει τα δεδομένα στο server. Κάτι ακόμα που πρέπει να παρατηρήσετε είναι πως στο πλήκτρο υποβολής έχω βάλει την ιδιότητα name και την έχω ορίσει σε «subminButton» και την ιδιότητα value που την έχω ορίσει σε «Υποβολή», αυτό θα με βοηθήσει αργότερα στο αρχείο form.php για να βεβαιωθώ πως κάποιος έχει κάνει click στο πλήκτρο υποβολής και πως δεν επισκέφτηκε το αρχείο form.php χωρίς να έχει κάνει αποστολή δεδομένων.
Αφού ολοκληρώσαμε τη φόρμα μας και είναι τώρα έτοιμη, μπορούμε να συνεχίσουμε με το αρχείο form.php. Το αρχείο αυτό είναι υπεύθυνο να περισυλλέξει τα δεδομένα της φόρμας και να τα επεξεργαστεί.
Ωστόσο η διαδικασία επεξεργασίας μπορεί να διαφέρει από εφαρμογή σε εφαρμογή. Άλλες εφαρμογές μπορεί να αποστέλλουν τα δεδομένα μέσω ηλεκτρονικού ταχυδρομείου, άλλες εφαρμογές μπορεί να αποθηκεύουν τα δεδομένα σε μια βάση δεδομένων, άλλες εφαρμογές μπορεί να ενεργοποιούν/απενεργοποιούν κάποιες διαδικασίες στο server κ.α. Ο τρόπος με τον οποίο θα επεξεργαστείτε τα δεδομένα εξαρτάτε από εσάς και την εφαρμογή που δημιουργείτε.
Στο παράδειγμα μας θα εισάγουμε τώρα τον παρακάτω κώδικα στο αρχείο form.php
<?php
if(isset($_GET['subminButton']) && $_GET['subminButton'] == "Υποβολή")
{
$theName = $_GET['yourname'];
}
?>
Αρχικά κάνουμε ένα έλεγχο για να δούμε αν στα δεδομένα που έρχονται από τη φόρμα μας υπάρχει και η τιμή από το πλήκτρο με όνομα «subminButton» με τη συνάρτηση της PHP isset(). Επίσης παρακολουθούμε αν η τιμή αυτού του πεδίου είναι η ίδια με αυτή στη φόρμα.
Στη συνέχεια αν ο έλεγχος είναι αληθής, συνεχίζουμε και μεταφέρουμε την τιμή του πεδίου της φόρμας με name=»yourname» από την καθολική μεταβλητή $_GET στην μεταβλητή $theName.
Στις φόρμες όπως είδαμε παραπάνω υπάρχει η παράμετρος method που μπορεί να πάρει τις τιμές post και get. Εξ ορισμού αυτή η παράμετρος, αν δεν την ορίσουμε εμείς είναι get.
Αυτό πρακτικά σημαίνει πως τα δεδομένα θα αποσταλούν από τον περιηγητή διαδικτύου (web browser) που χρησιμοποιείτε στον server πάνω από το πρωτόκολλο επικοινωνίας http/https με τη μέθοδο get, εκτός και ορίσετε στη φόρμα ως υποχρεωτική μέθοδο αποστολής των δεδομένων σας την post.
Φυσικά και τώρα θα απορείτε ποια είναι η διαφορά που υπάρχει ανάμεσα στις δύο μεθόδους. Ας ρίξουμε λοιπόν μια ματιά
- Μέθοδος get
- Όλα τα ζεύγη ονομάτων/τιμών μετατρέπονται σε ένα query string και προστίθενται στο τέλος του URL.
Πχ: http://www.domain.com/form.php?somename=somevalue&anothername=anothervalue - Δεν είναι ασφαλές, καθώς τα δεδομένα είναι φανερά στην γραμμή διευθύνσεων του web browser σε μορφή απλού κειμένου
- Κατά τη μεταφορά των δεδομένων μέσω του URL υπάρχουν περιορισμοί για κάποιους χαρακτήρες οι οποίοι δεν μπορούν να μεταφερθούν μέσω του URL. Για αυτό στην περίπτωση που θέλουμε να χρησιμοποιήσουμε ειδικούς χαρακτήρες στο URL θα πρέπει να τους κωδικοποιήσουμε κατάλληλα.
- Το συνολικό μήκος του URL είναι περιορισμένο.
- Αν σε μια φόρμα έχει χρησιμοποιηθεί η μέθοδος get, και στη συνέχεια ο χρήστης κάνει ανανέωση του περιεχομένου της σελίδας τότε τα δεδομένα θα μεταφερθούν ξανά χωρίς καμία προειδοποίηση.
- Αν μια διεύθυνση που περιέχει ζεύγη ονομάτων/τιμών αποθηκευτεί στα αγαπημένα τότε κάθε φορά που ο χρήστης θα επισκέπτεται τη σελίδα σας, θα αποστέλλει παράλληλα και τα δεδομένα της φόρμας.
- Τα δεδομένα πάντα υποβάλλονται σε μορφή απλού κειμένου.
- Μέθοδος post
- Όλα τα ζεύγη ονομάτων/τιμών υποβάλλονται στον κορμό του μηνύματος της αίτησης.
- Δεν υπάρχει περιορισμός στο μήκος των δεδομένων που στέλνετε στο server
- Η μέθοδος post είναι ποιο ασφαλής, καθώς τα ζεύγη ονομάτων/τιμών δεν εμφανίζονται στη γραμμή διευθύνσεων του browser
- Αν έχει χρησιμοποιηθεί η μέθοδος post και αμέσως μετά ο χρήστης ανανεώσει το περιεχόμενο της σελίδας του, τότε θα ερωτηθεί για την υποβολή των δεδομένων.
Από εδώ και πέρα είναι στο χέρι σας να αποφασίσετε ποια μέθοδος είναι η καλύτερη για τις δικές σας φόρμες.
Από τη μεριά της PHP τα δεδομένα είτε μεταφερθούν με τη μέθοδο post ή την μέθοδο get δεν έχει καμία σημασία. Η PHP μόλις παραλάβει ένα αίτημα με δεδομένα get τα μεταφέρει αυτόματα στην καθολική μεταβλητή $_GET, ενώ όταν παραλάβει ένα αίτημα με δεδομένα post τότε τα μεταφέρει αυτόματα στην καθολική μεταβλητή $_POST.
Έτσι αν στη φόρμα μας έχουμε το ακόλουθο πεδίο:
<input name="fieldName" />
και στείλουμε τα δεδομένα με get τότε για να ανακτήσουμε τα δεδομένα του πεδίου της φόρμας στην PHP θα κάνουμε το ακόλουθο :
<?php
$field_name = $_GET['fieldName'];
?>
ενώ αν χρησιμοποιήσουμε τη μέθοδο post τότε ο κώδικας μας θα γίνει έτσι :
<?php
$field_name = $_POST['fieldName'];
?>
Κάπου εδώ έχουμε φτάσει στο τέρμα αυτού του άρθρου. Αν το μελετήσατε, τώρα θα πρέπει να είστε σε θέση να δημιουργήσετε τις δικές σας φόρμες και να μεταφέρετε τα δεδομένα σας στο αρχείο που θα αναλάβει την επεξεργασία τους. Η επεξεργασία των δεδομένων ωστόσο είναι ένα διαφορετικό κομμάτι το οποίο δεν μπορεί να το καλύψει μόνο ένα άρθρο.
Κατηγορίες:
Σχόλια