ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Φόρμες Δημιουργία Περιεχομένου Ι.

Παρουσίαση με θέμα: "ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Φόρμες Δημιουργία Περιεχομένου Ι."— Μεταγράφημα παρουσίασης:

1 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Φόρμες Δημιουργία Περιεχομένου Ι

2 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Βιβλιογραφία:  [Duckett 2011]: Chapter 7  [Jenkins 2009]: Chapter 7  [MacDonald 2011]: Chapter 11  [Bruce 2011]: Hour 21 Βιβλιογραφία

3 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis  Σε τι χρησιμεύουν οι φόρμες  Πως λειτουργούν οι φόρμες  Η δομή μιας φόρμας  Συστατικά στοιχεία  Παράδειγμα Περιεχόμενα

4 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Η HTML “δανείστηκε” τον όρο φόρμα από το αντίστοιχο έντυπο στο οποίο συμπληρώνουμε στοιχεία σε καθορισμένα πεδία όταν πρέπει να δώσουμε πληροφορίες σε σχέση με κάποιο θέμα.  Οι φόρμες στο web είναι ειδικά σχεδιασμένες ιστοσελίδες οι οποίες παρέχουν τη δυνατότητα στον χρήστη να εισάγει πληροφορίες σε κάποια σαφώς καθορισμένα πεδία  Πολλές φορές οι φόρμες συνδυάζονται με προγράμματα επεξεργασίας των πληροφοριών που εισάγουν οι χρήστες. Τα προγράμματα αυτά είναι συνήθως υλοποιημένα σε Java (ή Javascript) ή/και PHP. Φόρμες

5 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Γιατί και πότε χρησιμοποιούμε φόρμες;  Κάθε φορά που χρειάζεται να συλλέξουμε πληροφορίες από τους επισκέπτες του ιστοτόπου μας μέσω του Web χρησιμοποιούμε φόρμες  Οι φόρμες ορίζονται μέσα σε ένα αρχείο HTML με τη βοήθεια του tag...  Οι πληροφορίες από μια φόρμα στέλνονται για επεξεργασία (στο κατάλληλο πρόγραμμα) ως ζευγάρια name/value (όνομα πεδίου / τιμή πεδίου).  Οι διάφορες περιοχές της φόρμας στις οποίες ο χρήστης εισάγει πληροφορίες ονομάζονται πεδία.  Η HTML5 έχει εισάξει επιπλέον στοιχεία τα οποία βοηθούν τη ορθή συμπλήρωση (πραγματοποιούν έλεγχο στο τι είδους πληροφορία έχει εισάξει ο χρήστης) φορμών. Ι

6 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis 1.Ο χρήστης συμπληρώνει τα κατάλληλα πεδία της φόρμας και πατάει το κουμπί «submit» ή κάποιο αντίστοιχο 2.Τα στοιχεία που εισήγαγε ο χρήστης ως ζεύγη τιμών name /value μεταφέρονται στο πρόγραμμα επεξεργασίας (που μπορεί να είναι στην ίδια ιστοσελίδα) 3.Το πρόγραμμα επεξεργάζεται τις πληροφορίες αυτές 4.Το αποτέλεσμα εμφανίζεται είτε στην ίδια ιστοσελίδα είτε σε μια άλλη ιστοσελίδα Πως λειτουργούν οι φόρμες

7 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis  Δείτε τη σελίδα:  http://cis.cut.ac.cy/~nicolas.tsapatsoulis/cis100/examples/lec09.html http://cis.cut.ac.cy/~nicolas.tsapatsoulis/cis100/examples/lec09.html Παράδειγμα

8 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis  Τα στοιχεία της φόρμας περικλείονται σε ένα form element (γραμμές 10 και 16 στο παράδειγμα)  Οι βασικές πληροφορίες όσον αφορά τη δομή της φόρμας υπάρχουν στo opening tag (γραμμή 10 παράδειγμα)  action  Η τιμή στο action έχει το URL της ιστοσελίδας η οποία θα επεξεργαστεί τις πληροφορίες που έχουν υποβληθεί μέσω της φόρμας. Αν το πεδίο αυτό παραμείνει κενό (συνήθως στην Javascript) η επεξεργασία γίνεται εντός της ιστοσελίδας που περιέχει τη φόρμα Η δομή μιας φόρμας

9 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis  method  Η μέθοδος αποστολής των πληροφοριών. Μπορεί να είναι είτε get είτε post  get: τα στοιχεία της φόρμας μεταδίδονται στο τέλος του URL που περιέχεται στο πεδίο action της φόρμας. Είναι κατάλληλο για απλές φόρμες (π.χ. απλή αναζήτηση) και όταν δεν υπάρχουν στοιχεία τα οποία απαιτούν κρυπτογράφηση  post: τα στοιχεία της φόρμας μεταδίδονται ως μέρος του HTTP header. Είναι η συνηθέστερη επιλογή όταν τα δεδομένα είναι πολλά, θα πρέπει να καταχωρηθούν σε βάση δεδομένων και υπάρχουν ευαίσθητα δεδομένα (εμπιστευτικές πληροφορίες) Η δομή μιας φόρμας (2)

10 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Τρεις κατηγορίες:  Προσθήκη κειμένου από τον χρήστη Text input Password input Text area  Επιλογή από μια σειρά στοιχείων Radio buttons Checkboxes Drop down menus  Υποβολή φόρμας  Submit buttons  Image buttons  File upload Συστατικά στοιχεία

11 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου (π.χ. ονόματα, επίθετα, επάγγελμα) που δεν ξεπερνούν σε έκταση την μια γραμμή:  Κώδικας name => όνομα που δίνουμε στο συγκεκριμένο πεδίο size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί) cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες περισσότεροι από cmaxlength αποκόπτονται) value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο  Αποτέλεσμα Text Input

12 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου με τη διαφορά ότι αυτό που πληκτρολογεί ο χρήστης εμφανίζεται με κουκκίδες (δεν μπορεί κάποιος να το διαβάσει) :  Κώδικας name => όνομα που δίνουμε στο συγκεκριμένο πεδίο size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί) cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες περισσότεροι από cmaxlength αποκόπτονται) value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο  Αποτέλεσμα Password Input

13 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για εισαγωγή μεγαλύτερων κομματιών κειμένου (περιγραφή, σχόλια, κλπ), δηλαδή κείμενο που εκτείνεται σε περισσότερες από μία γραμμές:  Κώδικας Θα ήθελα να... name => όνομα που δίνουμε στο συγκεκριμένο πεδίο cols => αριθμός στηλών για το ορατό μέγεθος του πεδίου rows => αριθμός γραμμών για το ορατό μέγεθος του πεδίου  Αποτέλεσμα Text Area

14 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για την επιλογή ακριβώς ενός από μια (μικρή) ομάδα στοιχείων (π.χ. επιλογή φύλου):  Κώδικας Rock Pop Jazz name => όνομα που δίνουμε στο συγκεκριμένο πεδίο. Για να ανήκουν τα radio buttons στην ίδια ομάδα θα πρέπει να έχουν το ίδιο όνομα value => η τιμή που θα μεταδοθεί στην σελίδα επεξεργασίας της φόρμας μετά την επιλογή του χρήστη. checked => δείχνει πιο από τα radio buttons θα εμφανίζεται ως προεπιλεγμένο  Αποτέλεσμα Radio button

15 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για πολλαπλές επιλογές από μια ομάδα στοιχείων:  Κώδικας iTunes Last.fm Spotify name => όνομα που δίνουμε στο συγκεκριμένο πεδίο. Για να ανήκουν τα checkboxes στην ίδια ομάδα θα πρέπει να έχουν το ίδιο όνομα value => η τιμή που θα μεταδοθεί στην σελίδα επεξεργασίας της φόρμας μετά την επιλογή του χρήστη. checked => δείχνει αν το συγκεκριμένο πεδίο εμφανίζεται ως προεπιλεγμένο  Αποτέλεσμα Checkboxes

16 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για την επιλογή ακριβώς ενός από μια (μεγάλη) ομάδα στοιχείων (π.χ. επιλογή χώρας):  Κώδικας iPod Ραδιόφωνο Υπολογιστής option => δημιουργεί μια νέα επιλογή value => η τιμή που θα μεταδοθεί στην σελίδα επεξεργασίας της φόρμας μετά την επιλογή του χρήστη. selected => δείχνει αν το συγκεκριμένο πεδίο θα εμφανίζεται ως η αρχική επιλογή Drop down menu  Αποτέλεσμα

17 ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας © 2013 Nicolas Tsapatsoulis Χρησιμοποιείται για υποβολή προς επεξεργασία των στοιχείων της φόρμας:  Κώδικας name => όνομα που δίνουμε στο συγκεκριμένο πεδίο value => Τι θα εμφανίζεται ως ετικέτα στο κουμπί υποβολής onclick => Τι θα γίνει όταν πατηθεί το συγκεκριμένο κουμπί. Στο παράδειγμα καλείται η συνάρτηση Javascript με όνομα CalculateBMI και ορίσματα (1) την τιμή (value) του πεδίου με όνομα (name) meters, (2) την τιμή (value) του πεδίου με όνομα (name) kilos, (3) το με id =‘result’ στο οποίο θα εμφανιστεί το αποτέλεσμα  Αποτέλεσμα Submit / button