Λίγα λόγια για τις

Φόρμες
 Περιεχόμενα

❑ Σε τι χρησιμεύουν οι φόρμες

❑ Πως λειτουργούν οι φόρμες

❑ Η δομή μιας φόρμας

❑ Συστατικά στοιχεία

❑ Παράδειγμα
 Φόρμες

Η HTML “δανείστηκε” τον όρο φόρμα από το αντίστοιχο

έντυπο στο οποίο συμπληρώνουμε στοιχεία σε καθορισμένα
πεδία όταν πρέπει να δώσουμε πληροφορίες σε σχέση με
κάποιο θέμα.
❑ Οι φόρμες στο web είναι ειδικά σχεδιασμένες
ιστοσελίδες οι οποίες παρέχουν τη δυνατότητα στον
χρήστη να εισάγει πληροφορίες σε κάποια σαφώς
καθορισμένα πεδία
❑ Πολλές φορές οι φόρμες συνδυάζονται με προγράμματα
επεξεργασίας των πληροφοριών που εισάγουν οι
χρήστες. Τα προγράμματα αυτά είναι συνήθως
υλοποιημένα σε Java (ή Javascript) ή/και PHP.
 Γιατί και πότε χρησιμοποιούμε
φόρμες;
❑ Κάθε φορά που χρειάζεται να συλλέξουμε πληροφορίες από
τους επισκέπτες του ιστοτόπου μας μέσω του Web
χρησιμοποιούμε φόρμες
❑ Οι φόρμες ορίζονται μέσα σε ένα αρχείο HTML με τη βοήθεια
του tag <form> ... </form>
❑ Οι πληροφορίες από μια φόρμα στέλνονται για επεξεργασία
(στο κατάλληλο πρόγραμμα) ως ζευγάρια name/value (όνομα
πεδίου / τιμή πεδίου).
❑ Οι διάφορες περιοχές της φόρμας στις οποίες ο χρήστης
εισάγει πληροφορίες ονομάζονται πεδία.
❑ Η HTML5 έχει εισάγει επιπλέον στοιχεία τα οποία βοηθούν τη
ορθή συμπλήρωση (πραγματοποιούν έλεγχο στο τι είδους
πληροφορία έχει εισάξει ο χρήστης) φορμών.
Ι
Πως λειτουργούν οι φόρμες
1. Ο χρήστης συμπληρώνει τα
κατάλληλα πεδία της φόρμας
και πατάει το κουμπί «submit» ή
κάποιο αντίστοιχο
2. Τα στοιχεία που εισήγαγε ο
χρήστης ως ζεύγη τιμών name
/value μεταφέρονται στο
πρόγραμμα επεξεργασίας (που
μπορεί να είναι στην ίδια
ιστοσελίδα)
3. Το πρόγραμμα επεξεργάζεται τις
πληροφορίες αυτές
4. Το αποτέλεσμα εμφανίζεται είτε
στην ίδια ιστοσελίδα είτε σε μια
άλλη ιστοσελίδα
 Η δομή μιας φόρμας
❑ Τα στοιχεία της φόρμας περικλείονται σε ένα form element (γραμμές 10
και 16 στο παράδειγμα)

❑ Οι βασικές πληροφορίες όσον αφορά τη δομή της φόρμας υπάρχουν στo

opening tag (γραμμή 10 παράδειγμα)
❑ action
❑ Η τιμή στο action έχει το URL της ιστοσελίδας η οποία θα επεξεργαστεί τις
πληροφορίες που έχουν υποβληθεί μέσω της φόρμας. Αν το πεδίο αυτό
παραμείνει κενό (συνήθως στην Javascript) η επεξεργασία γίνεται εντός της
ιστοσελίδας που περιέχει τη φόρμα
 Η δομή μιας φόρμας(2)

❑method
❑ Η μέθοδος αποστολής των πληροφοριών. Μπορεί να είναι είτε get είτε post
❑ get: τα στοιχεία της φόρμας μεταδίδονται στο τέλος του URL που περιέχεται
στο πεδίο action της φόρμας. Είναι κατάλληλο για απλές φόρμες (π.χ. απλή
αναζήτηση) και όταν δεν υπάρχουν στοιχεία τα οποία απαιτούν
κρυπτογράφηση
❑ post: τα στοιχεία της φόρμας μεταδίδονται ως μέρος του HTTP header. Είναι η
συνηθέστερη επιλογή όταν τα δεδομένα είναι πολλά, θα πρέπει να
καταχωρηθούν σε βάση δεδομένων και υπάρχουν ευαίσθητα δεδομένα
(εμπιστευτικές πληροφορίες)
 Συστατικά στοιχεία
Τρεις κατηγορίες:
❑ Προσθήκη κειμένου από τον χρήστη
• Text input
• Password input
• Text area
❑ Επιλογή από μια σειρά στοιχείων
• Radio buttons
• Checkboxes
• Drop down menus
❑ Υποβολή φόρμας
❑ Submit buttons
❑ Image buttons
❑ File upload
 Text Input
Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου (π.χ. ονόματα,
επίθετα, επάγγελμα) που δεν ξεπερνούν σε έκταση την μια γραμμή:
❑ Κώδικας
• <input type="text" name="username" size="40" cmaxlength="50" value="Type
your username here"/>
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο
• size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί)
• cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες
περισσότεροι από cmaxlength αποκόπτονται)
• value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο
❑ Αποτέλεσμα
 Password Input
Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου με τη διαφορά ότι
αυτό που πληκτρολογεί ο χρήστης εμφανίζεται με κουκκίδες (δεν μπορεί κάποιος
να το διαβάσει) :
❑ Κώδικας
• <input type="password" name="password" size="15” maxlength="15"
value="typeyourpass"/>
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο
• size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί)
• cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες
περισσότεροι από cmaxlength αποκόπτονται)
• value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο
❑ Αποτέλεσμα
 Text Area

Χρησιμοποιείται για εισαγωγή μεγαλύτερων κομματιών κειμένου (περιγραφή,

σχόλια, κλπ), δηλαδή κείμενο που εκτείνεται σε περισσότερες από μία γραμμές:
❑ Κώδικας
• <textarea name="comments" cols="40" rows="3">Θα ήθελα να ...</textarea>
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο
• cols => αριθμός στηλών για το ορατό μέγεθος του πεδίου
• rows => αριθμός γραμμών για το ορατό μέγεθος του πεδίου

❑ Αποτέλεσμα
 Radio button
Χρησιμοποιείται για την επιλογή ακριβώς ενός από μια (μικρή) ομάδα στοιχείων
(π.χ. επιλογή φύλου):
❑ Κώδικας
• <input type="radio" name="genre" value="rock" /> Rock
<input type="radio" name="genre" value="pop" /> Pop
<input type="radio" name="genre" value="jazz" checked="checked" /> Jazz
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο. Για να ανήκουν τα radio
buttons στην ίδια ομάδα θα πρέπει να έχουν το ίδιο όνομα
• value => η τιμή που θα μεταδοθεί στην σελίδα επεξεργασίας της φόρμας μετά
την επιλογή του χρήστη.
• checked => δείχνει πιο από τα radio buttons θα εμφανίζεται ως
προεπιλεγμένο
❑ Αποτέλεσμα
 Checkboxes
Χρησιμοποιείται για πολλαπλές επιλογές από μια ομάδα στοιχείων:
❑ Κώδικας
• <input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο. Για να ανήκουν τα
checkboxes στην ίδια ομάδα θα πρέπει να έχουν το ίδιο όνομα
• value => η τιμή που θα μεταδοθεί στην σελίδα επεξεργασίας της φόρμας μετά
την επιλογή του χρήστη.
• checked => δείχνει αν το συγκεκριμένο πεδίο εμφανίζεται ως προεπιλεγμένο

❑ Αποτέλεσμα
 Drop down menu
Χρησιμοποιείται για την επιλογή ακριβώς ενός από ❑ Αποτέλεσμα
μια (μεγάλη) ομάδα στοιχείων (π.χ. επιλογή χώρας):
❑ Κώδικας
• <select name="devices">
<option value="ipod" >iPod</option>
<option value="radio" selected>Ραδιόφωνο</option>
<option value="computer">Υπολογιστής</option>
</select>
• option => δημιουργεί μια νέα επιλογή
• value => η τιμή που θα μεταδοθεί στην σελίδα
επεξεργασίας της φόρμας μετά την επιλογή του
χρήστη.
• selected => δείχνει αν το συγκεκριμένο πεδίο θα
εμφανίζεται ως η αρχική επιλογή
 Submit / button
Χρησιμοποιείται για υποβολή προς επεξεργασία των στοιχείων της φόρμας:
❑ Κώδικας
• <input type="button" name="calc" value="Υπολόγισε"
onclick="CalculateBMI(this.form.meters.value, this.form.kilos.value, 'result')" />
• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο
• value => Τι θα εμφανίζεται ως ετικέτα στο κουμπί υποβολής
• onclick => Τι θα γίνει όταν πατηθεί το συγκεκριμένο κουμπί. Στο παράδειγμα
καλείται η συνάρτηση Javascript με όνομα CalculateBMI και ορίσματα (1) την
τιμή (value) του πεδίου με όνομα (name) meters, (2) την τιμή (value) του
πεδίου με όνομα (name) kilos, (3) το <div> με id =‘result’ στο οποίο θα
εμφανιστεί το αποτέλεσμα

<input type=“submit” value=“Create My Account” />

<input type=“reset” value=“Επαναφορά” />