Κατασκευή φόρμας σε ιστοσελίδα

12 Φεβ 2011 | HTML

Δεν επιτρέπονται τα σχόλια.


Web Form

Πολλοί από τους αναγνώστες του 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

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

Επεξεργασία δεδομένων από το server

Αφού ολοκληρώσαμε τη φόρμα μας και είναι τώρα έτοιμη, μπορούμε να συνεχίσουμε με το αρχείο 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'];
?>

Επίλογος

Κάπου εδώ έχουμε φτάσει στο τέρμα αυτού του άρθρου. Αν το μελετήσατε, τώρα θα πρέπει να είστε σε θέση να δημιουργήσετε τις δικές σας φόρμες και να μεταφέρετε τα δεδομένα σας στο αρχείο που θα αναλάβει την επεξεργασία τους. Η επεξεργασία των δεδομένων ωστόσο είναι ένα διαφορετικό κομμάτι το οποίο δεν μπορεί να το καλύψει μόνο ένα άρθρο.

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



12 Φεβρουαρίου 2011

[…] This post was mentioned on Twitter by Web Resoures.eu, Web Resoures.eu. Web Resoures.eu said: Κατασκευή φόρμας σε ιστοσελίδα: Πολλοί από τους αναγνώστες του Web Resources.eu συνεχώς… http://goo.gl/fb/y7Z0H […]




12 Φεβρουαρίου 2011

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




23 Φεβρουαρίου 2011

Πολύ χρήσιμο και περιεκτικό άρθρο. Thanks 🙂


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php