SlideShare a Scribd company logo
1 of 8
Download to read offline
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 1/8
Χρησιμοποιώντας αυτόν τον ιστότοπο, συμφωνείτε με τη χρήση των cookies. Συμφωνώ
Aρχική How­to Αφιερώματα W­People Σειρές Μαθημάτων Νέα στο Διαδίκτυο Αρθρα Επικοινωνία
Φόρμες
Αν και ο κύριος σκοπός μιας ιστοσελίδας είναι η δημοσίευση πληροφοριών στο Internet, δεν είναι ο μοναδικός.
Όλο και περισσότερα sites χρησιμοποιούν την αμφίδρομη επικοινωνία, δηλαδή δεν παρέχουν απλά
πληροφορίες προς τους επισκέπτες, αλλά ζητούν από αυτούς να επιλέγουν ή να πληκτρολογούν στοιχεία. Για
παράδειγμα, πολλά sites περιέχουν polls τα οποία παρουσιάζουν μια ερώτηση και ζητούν από τον επισκέπτη
να επιλέξει μια από τις απαντήσεις. Στην περίπτωση αυτή έχουμε αμφίδρομη επικοινωνία, καθώς η ροή της
πληροφορίας δεν γίνετε μόνο από τον Server που φιλοξενεί την ιστοσελίδα προς τον επισκέπτη αλλά και το
αντίθετο.
Οι Φόρμες μας δίνουν την δυνατότητα να μετασχηματίσουμε την ιστοσελίδα μας από μια μάζα πληροφοριών
που ο επισκέπτης διαβάζει παθητικά σε μια αμφίδρομη επικοινωνία όπου έχει έναν πιο ενεργητικό ρόλο
πληκτρολογώντας στοιχεία ή κάνοντας κλικ με το ποντίκι του σε διάφορες επιλογές.
Εδώ παρουσιάζεται μια φόρμα στην οποία ο επισκέπτης πληκτρολογεί στοιχεία. Τέτοιες φόρμες συνήθως
χρησιμοποιούνται για την εγγραφή μελών σε κάποια ψηφιακή κοινότητα (όπως forums, email lists κτλ.)
Στην παραπάνω Φόρμα ο επισκέπτης, αφού συμπληρώσει τα πεδία πατάει το κουμπί 
Με το πάτημα του κουμπιού τα δεδομένα που συμπλήρωσε ο επισκέπτης στέλνονται στον Server μέσω του
πρωτοκόλλου HTTP. Έπειτα ο Server επεξεργάζεται με κάποιο πρόγραμμα script τις τιμές των πεδίων και
επιστρέφει στον browser του επισκέπτη μια HTML σελίδα. Τα περιεχόμενα της σελίδας αυτής μπορεί να είναι
οτιδήποτε, από μια απλή απάντηση μέχρι επιστροφή αποτελέσματος σε ερώτηση προς μια περίπλοκη Βάση
Δεδομένων.
Δοκιμάστε να συμπληρώσετε τα στοιχεία που ζητάει η Φόρμα και έπειτα να πατήσετε το κουμπί Αποστολή
Στοιχείων. Με το πάτημα του κουμπιού τα δεδομένα που πληκτρολογήσατε στέλνονται στον Server όπου
εισάγονται μέσα σε ένα αρχείο script. Το script αυτό (serverSideScript.php, το οποίο είναι γραμμένο σε
γλώσσα PHP) παίρνει αυτά τα δεδομένα και τα εμφανίζει μέσα σε έναν πίνακα. Στην περίπτωση αυτή δεν
γίνεται καμια επεξεργασία των δεδομένων. Το μόνο που κάνει το script εδώ είναι να παίρνει τα δεδομένα από
τον browser σας και τα εμφανίζει μέσα σε έναν πίνακα
Τα στοιχεία μιας Φόρμας
Παρακάτω παρουσιάζονται τα στοιχεία μιας Φόρμας
Λεζάντα των στοιχείων μιας Φόρμας
Όλα τα στοιχεία μιας Φόρμας, είτε αυτά είναι πεδία κειμένου, είτε είναι περιοχές κειμένου, είτε είναι κουμπιά
επιλογών κ.ο.κ., έχουν σχεδιαστεί να δέχονται με συγκεκριμένο τρόπο (είτε με πληκτρολόγηση, είτε με επιλογή
με το ποντίκι) συγκεκριμένες (σημασιολογικά) τιμές οι οποίες θα επεξεργαστούν από κάποιο script αρχείο. 
Για τον λόγο αυτόν κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο (δίπλα του ή σε οποιοδήποτε
άλλο σημείο ώστε να είναι εμφανή η αντιστοιχία του με το στοιχείο της Φόρμας) το οποίο κείμενο να προσδίδει
έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο κ.ο.κ.) ώστε ο επισκέπτης της
σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Για παράδειγμα στην Φόρμα που παρουσιάζεται
στην αρχή αυτής της σελίδας, το πεδίο κειμένου το οποίο δέχεται το επώνυμο χαρακτηρίζεται από το κείμενο
Επώνυμο. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου κειμένου που δέχεται το επώνυμο.
Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του
πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε βέβαια να το
μορφοποιήσουμε με HTML ετικέτες.
Η ετικέτα <form>
Μαθήματα HTML
HOME
Εισαγωγή
Η γλώσσα HTML
Η δομή της HTML
Βασικές ετικέτες
Ιδιότητες ετικετών
Διαμόρφωση κειμένου
Θέση και στοίχιση κειμένου
Χρώματα
Ειδικοί χαρακτήρες
Λίστες
Εικόνες
Σύνδεσμοι και δεσμοί
Πίνακες
HTML Φόρμες
HTML Advanced
URL
HTML Events
Λίστα HTML Ετικετών
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 2/8
Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες <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> εκτός απο τα στοιχεία της Φόρμας μπορούμε επίσης να
προσθέσουμε κείμενο (συνήθως Λεζάντες των στοιχείων) μαζί με ετικέτες μορφοποίησης
Παράδειγμα σύνταξης φόρμας
<form name="form1" method="post" action="example.php">
<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>
Πώς εισάγουμε ένα Πεδίο Κειμένου (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> ορίζοντας την τιμή text στην ιδιότητα
type. 
Η χρήση της ιδιότητας value σε αυτήν την περίπτωση εμφανίζει μέσα στο πλαίσιο κειμένου την τιμή της
ιδιότητας. Μια άλλη ιδιότητα που μπορεί να πάρει η ετικέτα <input> είναι η size η οποία καθορίζει τον αριθμό
των ορατών χαρακτήρων που μπορεί να χωρέσει το Πεδίο Κειμένου. Η ιδιότητα maxlength καθορίζει τον
αριθμό χαρακτήρων που μπορεί να πληκτρολογήσει ο επισκέπτης.
Την λεζάντα του πεδίου κειμένου (Όνομα) μπορούμε να την διαμορφώσουμε όπως εμείς θέλουμε
προσθέτοντας HTML ετικέτες. Για παράδειγμα :
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 3/8
Εισαγωγή πεδίου κειμένου σε μια φόρμα
<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>
Δοκίμασε το
Πώς εισάγουμε ένα Πεδίο 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>
Δοκίμασε το
Πολλές φορές κατά την πλοήγηση μας στο Internet χρειάζεται να πληκτρολογήσουμε ένα Username και
κάποιον κωδικό μέσα σε ένα πεδίο κειμένου για να εισέλθουμε σε κάποια ελεγχόμενη περιοχή, όπως Forums ,
Chats , Web emails κτλ. Όταν γράφουμε μέσα στην περιοχή κειμένου του Password εμφανίζονται ή αστεράκια
ή βουλίτσες, ανάλογα τον browser που χρησιμοποιούμε. 
Για να εισάγουμε στην δική μας Φόρμα ένα τέτοιο πεδίο στο οποίο όταν ο επισκέπτης της σελίδας μας
πληκτρολογεί μέσα σε αυτό, να εμφανίζονται βουλίτσες ή αστεράκια απλά βάζουμε την τιμή 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" > Ανδρας
&nbsp;&nbsp;
<input type="radio" name="sex" value="female" /> Γυναίκα
<input type="Submit" name="Submit" value="Αποστολή" /> 
</form>
Δοκίμασε το
Για να εισάγουμε κουμπιά επιλογής χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή radio στην ιδιότητα
type. 
Η ιδιότητα name εκτός από το να δίνει ένα όνομα στα κουμπιά επιλογής, εδώ παίζει και τον ρόλο της
ομαδοποίησης. Δηλαδή ομαδοποιεί τα κουμπιά επιλογής (ορίζοντας στην ιδιότητα name την ίδια τιμή) έτσι
ώστε μόνο ένα από αυτά να μπορεί να επιλέγεται από τον χρήστη. Στο παράδειγμα της φόρμας
συμπλήρωσης στοιχείων που βρίσκεται στην αρχή της ενότητας, αν στο Φύλο επιλέξουμε Γυναίκα τότε παύει
να είναι επιλεγμένο το κουμπί που αναφέρετε στην επιλογή Ανδρας. Αν τα δύο αυτά κουμπιά επιλογής είχαν
διαφορετική τιμή στην ιδιότητα name τότε η Φόρμα θα μας επέτρεπε να είχαμε και τις δύο επιλογές
επιλεγμένες (Ανδρας, Γυναίκα). 
Η διότητα value ορίζει την τιμή που θα στείλει η φόρμα στον Server αφού πατήσουμε το κουμπί αποστολής.
Σύμφωνα με τον κώδικα HTML που βρίσκεται πιο πάνω, εάν ο επισκέπτης επιλέξει την επιλογή Ανδρας τότε
στον Server θα σταλεί η τιμή "male" , ενώ αν επιλέξει Γυναίκα θα σταλεί η τιμή "female".
Η ιδιότητα checked της ετικέτας <input> χρησιμοποιείται για να ορίσουμε ποια από τα ομαδοποιημένα
κουμπιά θα είναι εξορισμού επιλεγμένο όταν φορτώνεται η σελίδα. Η ιδιότητα αυτή δεν παίρνει τιμή.
Πώς εισάγουμε Κουτιά Πολλαπλών Επιλογών (checkbox) στην Φόρμα μας ;
Εισαγωγή checkbox σε μια φόρμα
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 4/8
<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> ορίζοντας την τιμή
checkbox στην ιδιότητα type.
Όταν ένα κουτί επιλογής είναι τσεκαρισμένο τότε η τιμή του πεδίου που θα σταλεί στον 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>. 
Η ιδιότητα 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>. 
Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <SELECT> και </select> και αντιστοιχεί σε μια επιλογή της
λίστας. Όσες επιλογές επιθυμούμε να περιλαμβάνει η Λίστα Επιλογών τόσες ετικέτες <option> πρέπει να
προσθέσουμε. Μεταξύ των ετικετών <option> και </option> γράφουμε το κείμενο που θέλουμε να εμφανίζεται
στην λίστα (σύμφωνα με τον παραπάνω κώδικα το κείμενο της πρώτης επιλογής της Λίστας Επιλογών είναι
Ελλάδα, το κείμενο της δεύτερης επιλογής είναι Γαλλία κ.ο.κ.).
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 5/8
Με την ιδιότητα 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>
Δοκίμασε το
τότε θα είχαμε το παρακάτω αποτέλεσμα:
 
Όπως βλέπετε η άλλοτε Λίστα επιλογών εμφανίζεται τώρα σαν ένα πλαίσιο επιλογών στο οποίο φαίνονται οι
τρεις πρώτες επιλογές, ενώ τις υπόλοιπες μπορούμε να τις δούμε πατώντας το κάτω βελάκι της μπάρας
ολίσθησης. Αν θέλαμε να εμφανίσουμε όλες τις επιλογές χωρίς ο επισκέπτης να χρειάζεται να χρησιμοποιεί την
μπάρα ολίσθησης για να τις δει τότε θα ορίζαμε ως τιμή στην ιδιότητα 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>
Δοκίμασε το
Στην περίπτωση αυτή, πρέπει να προσέξουμε πως θα γράψουμε τον κώδικα του script ώστε να μπορεί να
δεχτεί πολλαπλές τιμές σε μια μεταβλητή. Δηλαδή όταν χρησιμοποιούμε πολλαπλές τιμές για ένα στοιχείο θα
πρέπει μέσα στο script να διαχωρίσουμε τις τιμές αυτές μεταξύ τους με τον κατάλληλο κάθε φορά κώδικα
ανάλογα την γλώσσα προγραμματισμού
Κρυφά πεδία της Φόρμας
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 6/8
Κρυφά πεδία της Φόρμας
Εισαγωγή κρυφών πεδίων σε μια φόρμα
<form name="form1" method="post" action="example1.php">
<input type="hidden" name="married" value="1">
<input type="Submit" name="Submit" value="Αποστολή" /> 
</form>
Για να εισάγουμε Κρυφά Πεδία στην φόρμα μας χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή
hidden στην ιδιότητα type.
Τα κρυφά πεδία δεν εμφανίζονται στον 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>
και παρακάτω παρουσιάζεται ο κώδικας της δεύτερης Φόρμας:
Εισαγωγή κρυφών πεδίων σε μια φόρμα
<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>
Οι τιμές που θα πληκτρολογήσει ο επισκέπτης, αφού πατήσει το κουμπί αποστολής οποιασδήποτε από τις
δύο Φόρμες, πηγαίνουν στο ίδιο script αφού και οι δύο φόρμες έχουν στην ιδιότητα action το ίδιο URL. Το
script με την σειρά του παίρνει αυτές τις τιμές και κάνει κάποια ενέργεια ανάλογα αν τα στοιχεία προήλθαν από
την πρώτη φόρμα οπότε έχουμε να κάνουμε με έναν παντρεμένο ή μια παντρεμένη, ή από την δεύτερη φόρμα
οπότε έχουμε να κάνουμε με έναν ανύπαντρο ή μια ανύπαντρη. Τα τρία πεδία κειμένου και στις δύο φόρμες
χρησιμοποιούν τα ίδια ονόματα στα πεδία τους (onoma, eponimo, ilikia). 
Πως το script καταλαβαίνει από ποια από τις δύο Φόρμες προέρχονται τα δεδομένα; Με την χρήση ενός
κρυφού πεδίου με όνομα married. Στην πρώτη Φόρμα το κρυφό πεδίο married έχει τιμή 0, οπότε αν ο
επισκέπτης πατήσει το κουμπί αποστολής της πρώτης Φόρμας τότε θα σταλούν στο script τα στοιχεία που
πληκτρολόγησε ο επισκέπτης μαζί με το κρυφό πεδίο married το οποίο θα έχει την τιμή 0. Ενώ αν ο
επισκέπτης πατήσει το κουμπί της δεύτερης Φόρμας τότε θα σταλούν στο script τα στοιχεία που
πληκτρολόγησε ο χρήστης μαζί με το κρυφό πεδίο married το οποίο έχει την τιμή 1. Με λίγα λόγια δηλαδή, το
πεδίο married της Φόρμας, ανάλογα αν είναι 0 ή ένα, "λέει" στο script αν ο επισκέπτης που πληκτρολόγησε τα
στοιχεία του είναι παντρεμένος ή όχι. Φυσικά αντί για 0 και 1 θα μπορούσαμε να είχαμε οποιαδήποτε τιμή αρκεί
βέβαια να συμφωνεί με τον κώδικα του script. 
Βέβαια είναι πλεονασμός και καθόλου λειτουργική λύση να χρησιμοποιούμε δύο Φόρμες για να στείλουμε στο
script την πληροφορία της οικογενειακής κατάστασης του επισκέπτη. Αντί αυτό θα μπορούσαμε κάλλιστα να
προσθέταμε στην πρώτη Φόρμα μια Λίστα Επιλογής με δύο επιλογές: Αγγαμος, Έγγαμος και με αυτό τον
τρόπο πολύ απλά θα περνούσαμε την πληροφορία που θέλαμε στο Script. Ή ακόμα θα μπορούσαμε αντί της
Λίστας Επιλογών να είχαμε Κουμπιά Επιλογών. Ο λόγος που γράφτηκε το παράδειγμα αυτό είναι μόνο για
διδακτικό σκοπό ώστε να κατανοηθεί η χρήση των κρυφών πεδίων σε μια Φόρμα.
Δοκιμάστε να συμπληρώσετε τις δύο παραπάνω Φόρμες και δείτε το αποτέλεσμα πατώντας το κουμπί
Αποστολή
Το κουμπί Υποβολής της Φόρμας
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 7/8
Το κουμπί Υποβολής της Φόρμας
Εισαγωγή submit button σε μια φόρμα
<form name="form1" method="post" action="example.php">
<input>
<input>
<input type="Submit" name="SubmitFrom" value="Αποστολή Στοιχείων" /> 
</form>
Το πάτημα του Κουμπιού Υποβολής της Φόρμας στέλνει στον Server τα δεδομένα που πληκτρολόγησε ο
χρήστης. Για να εισάγουμε στην Φόρμα μας Κουμπί Υποβολής χρησιμοποιούμε την ετικέτα <input> ορίζοντας
την τιμή Submit στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο στο Κουμπί Υποβολής. 
Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, το Κουμπί Υποβολής είναι το: 
 
Η τοποθέτηση του Κουμπιού Υποβολής στην Φόρμα μας είναι προαιρετική. Σχεδόν όλες οι φόρμες έχουν
Κουμπί Υποβολής. Αυτές που δεν έχουν η υποβολή της Φόρμας γίνετε με κώδικα script (συνήθως γραμμένο
σε Javascript) που ενεργοποιείται μετά από ένα HTML γεγονός
Αποστολή στοιχείων στον Server (Μέθοδος GET και POST)
Η αποστολή των τιμών από την φόρμα του browser προς το αρχείο script του Server που θα τα επεξεργαστεί,
γίνεται με βάση την ιδιότητα method (μέθοδος) της ετικέτας <form> η οποία μπορεί να πάρει τις τιμές get και
post.
Στην περίπτωση χρήσης της μεθόδου 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>
και ο επισκέπτης πληκτρολογήσει το όνομα 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).
Αποστολή δεδομένων στον 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>
Αν ο επισκέπτης πληκτρολογήσει όνομα και επίθετο και έπειτα πατήσει το 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 της
σελίδας που θα ανοίξει. Δοκίμασε το 
3/11/2016 HTML Φόρμες
http://wlearn.gr/index.php/html­html­57 8/8
Προηγούμενο Επόμενο
Η μέθοδο 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> ορίζοντας την τιμή Reset στην ιδιότητα type.
Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, συμπληρώστε την φόρμα και
έπειτα πατήστε το κουμπί καθαρισμού και δείτε το αποτέλεσμα.
Πώς εισάγουμε Κουμπί (Button) στην Φόρμα μας
Εισαγωγή απλού κουμπιού στις φόρμες
<form name="form1" method="post" action="example.php">
<input type="button" name="koumpi" value="Υπολογισμός Αθροίσματος"
onClick="function()" />
</form>
Εκτός από τα δύο ειδικά κουμπιά της Φόρμας (κουμπί Υποβολής και κουμπί Καθαρισμού Φόρμας), έχουμε
την δυνατότητα να εισάγουμε απλά κουμπιά χρησιμοποιώντας την ετικέτα <input> και ορίζοντας την τιμή
button στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο του κουμπιού.
Ο μόνος λόγος χρήσης απλών κουμπιών είναι η εκτέλεση ενός script (συνήθως σε Javascript). Στην ετικέτα
<input> προσθέτουμε ένα HTML γεγονός (onclick, ondblclick, onkeypress, onkeydown, onkeyup), για να
εκτελέσεί μια λειτουργία ενός script 
Στην HTML5 άλλαξαν αρκετά πράγρματα στις φόρμες. Μπορείτε να δείτε τα νέα
πεδία (input types) αλλά και τις νέες ιδιότητες των στοιχείων μιας φόρμας.
wlearn.gr, © 2005 ­ 2014 Powered by Ακης Καργιοφύλλης

More Related Content

Recently uploaded

ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΝίκος Θεοτοκάτος
 
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"margaritathymara1
 
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdfMaria Koufopoulou
 
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptxΈκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx7gymnasiokavalas
 
Ιπτάμενη σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝ
Ιπτάμενη                σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝΙπτάμενη                σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝ
Ιπτάμενη σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝDimitra Mylonaki
 
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗ
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗB2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗ
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗChrisa Kokorikou
 
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχεία
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά ΣτοιχείαΔιαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχεία
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχείαbasket20032020
 
Οι δικές μας αεροσκάφες
Οι δικές μας                    αεροσκάφεςΟι δικές μας                    αεροσκάφες
Οι δικές μας αεροσκάφεςDimitra Mylonaki
 
13η ENΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ: ΚΑΤΑΣΚΕΥΕΣ.pdf
13η ENΟΤΗΤΑ  ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ:  ΚΑΤΑΣΚΕΥΕΣ.pdf13η ENΟΤΗΤΑ  ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ:  ΚΑΤΑΣΚΕΥΕΣ.pdf
13η ENΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ: ΚΑΤΑΣΚΕΥΕΣ.pdfMaria Koufopoulou
 
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptxΟι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx36dimperist
 
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptxΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx41dimperisteriou
 
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdf
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdfΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdf
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdfChrisa Kokorikou
 
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptxΗμέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx36dimperist
 
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdf
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdfΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdf
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdfChrisa Kokorikou
 
Παρουσίαση καλλιτεχνικού θεάματος
Παρουσίαση                  καλλιτεχνικού θεάματοςΠαρουσίαση                  καλλιτεχνικού θεάματος
Παρουσίαση καλλιτεχνικού θεάματοςDimitra Mylonaki
 
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΝίκος Θεοτοκάτος
 
Παρουσίαση καλλιτεχνικού θεάματος
Παρουσίαση          καλλιτεχνικού θεάματοςΠαρουσίαση          καλλιτεχνικού θεάματος
Παρουσίαση καλλιτεχνικού θεάματοςDimitra Mylonaki
 
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptx
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptxΕξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptx
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptxntanavara
 
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένη
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένηΗ εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένη
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένηEvangelia Patera
 
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptxΕπίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx7gymnasiokavalas
 

Recently uploaded (20)

ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
 
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"
1ο ΓΥΜΝΑΣΙΟ ΠΕΙΡΑΙΑ-ECOMOBILITY "ΑΛΛΑΖΟΝΤΑΣ ΤΟΝ ΠΕΙΡΑΙΑ!"
 
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf
15η ΕΝΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε ΤΑΞΗ :ΤΗΛΕΟΡΑΣΗ.pdf
 
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptxΈκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx
Έκθεση μαθητικής Ζωγραφικής- Η μαγεία των μοτίβων.pptx
 
Ιπτάμενη σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝ
Ιπτάμενη                σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝΙπτάμενη                σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝ
Ιπτάμενη σκάφη ΚΟΜΙΚ ΠΑΙΔΙΩΝ
 
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗ
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗB2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗ
B2 TΑΞΗ -ΜΗΝΥΜΑΤΑ ΓΙΑ ΤΑ ΑΔΕΣΠΟΤΑ.pdf-ΜΑΡΚΕΛΛΑ ΤΣΑΤΣΑΡΩΝΗ
 
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχεία
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά ΣτοιχείαΔιαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχεία
Διαχείρηση Gmail - Βήμα προς Βήμα - Βασικά Στοιχεία
 
Οι δικές μας αεροσκάφες
Οι δικές μας                    αεροσκάφεςΟι δικές μας                    αεροσκάφες
Οι δικές μας αεροσκάφες
 
13η ENΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ: ΚΑΤΑΣΚΕΥΕΣ.pdf
13η ENΟΤΗΤΑ  ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ:  ΚΑΤΑΣΚΕΥΕΣ.pdf13η ENΟΤΗΤΑ  ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ:  ΚΑΤΑΣΚΕΥΕΣ.pdf
13η ENΟΤΗΤΑ ΓΛΩΣΣΑΣ Ε΄ΤΑΞΗΣ: ΚΑΤΑΣΚΕΥΕΣ.pdf
 
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptxΟι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx
Οι μικροί αρτοποιοί της Γ τάξης και το ψωμί τους.pptx
 
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptxΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx
ΝΕΕΣ ΚΟΥΡΤΙΝΕΣ ΜΕ ΔΩΡΕΑ ΤΟΥ ΣΥΛΛΟΓΟΥ ΓΟΝΕΩΝ.pptx
 
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdf
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdfΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdf
ΣΤ2 -ΕΓΩ ΚΑΙ ΣΥ ΜΑΖΙ-ΦΙΛΟΙ ΠΑΝΤΟΤΙΝΟΙ .pdf
 
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptxΗμέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx
Ημέρα Επιστημών – Επίδειξη πειραμάτων από τους μαθητές.pptx
 
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdf
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdfΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdf
ΣΠΑΣΕ ΤΗ ΣΙΩΠΗ ΑΠΟ ΤΟΥΣ ΜΑΘΗΤΕΣ/ΤΡΙΕΣ ΤΟΥ Β2.pdf
 
Παρουσίαση καλλιτεχνικού θεάματος
Παρουσίαση                  καλλιτεχνικού θεάματοςΠαρουσίαση                  καλλιτεχνικού θεάματος
Παρουσίαση καλλιτεχνικού θεάματος
 
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
ΚΠΑ Γ' ΓΥΜΝΑΣΙΟΥ 10.2.3 ΔΙΚΑΣΤΙΚΗ ΛΕΙΤΟΥΡΓΙΑ
 
Παρουσίαση καλλιτεχνικού θεάματος
Παρουσίαση          καλλιτεχνικού θεάματοςΠαρουσίαση          καλλιτεχνικού θεάματος
Παρουσίαση καλλιτεχνικού θεάματος
 
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptx
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptxΕξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptx
Εξερευνώντας τα μυστήρια του ουρανού-Παρουσίαση.pptx
 
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένη
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένηΗ εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένη
Η εποχή του Ιουστινιανού-Η ελληνοχριστιανική οικουμένη
 
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptxΕπίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx
Επίσκεψη μαθητών στην Έκθεση Η Μαγεία των Μοτίβων.pptx
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Lesson 14 html φόρμες