Φόρμες

ΕΣΔ 232: Οργάνωση δεδομένων στην Κοινωνία της Πληροφορίας

© 2013 Nicolas Tsapatsoulis

Φόρμες

Δημιουργία Περιεχομένου Ι



Βιβλιογραφία: [Duckett 2011]: Chapter 7

[Jenkins 2009]: Chapter 7

[MacDonald 2011]: Chapter 11

[Bruce 2011]: Hour 21

Βιβλιογραφία



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

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

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

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

Παράδειγμα

Περιεχόμενα



Η HTML “δανείστηκε” τον όρο φόρμα από το αντίστοιχο έντυπο στο οποίο συμπληρώνουμε στοιχεία σε καθορισμένα πεδία όταν πρέπει να δώσουμε πληροφορίες σε σχέση με κάποιο θέμα.

Οι φόρμες στο web είναι ειδικά σχεδιασμένες ιστοσελίδες οι οποίες παρέχουν τη δυνατότητα στον χρήστη να εισάγει πληροφορίες σε κάποια σαφώς καθορισμένα πεδία

Πολλές φορές οι φόρμες συνδυάζονται με προγράμματα επεξεργασίας των πληροφοριών που εισάγουν οι χρήστες. Τα προγράμματα αυτά είναι συνήθως υλοποιημένα σε Java (ή Javascript) ή/και PHP.

Φόρμες



Γιατί και πότε χρησιμοποιούμε φόρμες;

Κάθε φορά που χρειάζεται να συλλέξουμε πληροφορίες από τους επισκέπτες του ιστοτόπου μας μέσω του Web χρησιμοποιούμε φόρμες

Οι φόρμες ορίζονται μέσα σε ένα αρχείο HTML με τη βοήθεια του tag <form> ... </form>

Οι πληροφορίες από μια φόρμα στέλνονται για επεξεργασία (στο κατάλληλο πρόγραμμα) ως ζευγάρια name/value (όνομα πεδίου / τιμή πεδίου).

Οι διάφορες περιοχές της φόρμας στις οποίες ο χρήστης εισάγει πληροφορίες ονομάζονται πεδία.

Η HTML5 έχει εισάξει επιπλέον στοιχεία τα οποία βοηθούν τη ορθή συμπλήρωση (πραγματοποιούν έλεγχο στο τι είδους πληροφορία έχει εισάξει ο χρήστης) φορμών.

Ι



1. Ο χρήστης συμπληρώνει τα κατάλληλα πεδία της φόρμας και πατάει το κουμπί «submit» ή κάποιο αντίστοιχο

2. Τα στοιχεία που εισήγαγε ο χρήστης ως ζεύγη τιμών name /value μεταφέρονται στο πρόγραμμα επεξεργασίας (που μπορεί να είναι στην ίδια ιστοσελίδα)

3. Το πρόγραμμα επεξεργάζεται τις πληροφορίες αυτές

4. Το αποτέλεσμα εμφανίζεται είτε στην ίδια ιστοσελίδα είτε σε μια άλλη ιστοσελίδα

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



Δείτε τη σελίδα: http://cis.cut.ac.cy/~nicolas.tsapatsoulis/cis100/examples/lec09.html

Παράδειγμα



Τα στοιχεία της φόρμας περικλείονται σε ένα form element (γραμμές 10 και 16 στο παράδειγμα)

Οι βασικές πληροφορίες όσον αφορά τη δομή της φόρμας υπάρχουν στo opening tag (γραμμή 10 παράδειγμα)

action Η τιμή στο action έχει το URL της ιστοσελίδας η οποία θα επεξεργαστεί τις

πληροφορίες που έχουν υποβληθεί μέσω της φόρμας. Αν το πεδίο αυτό παραμείνει κενό (συνήθως στην Javascript) η επεξεργασία γίνεται εντός της ιστοσελίδας που περιέχει τη φόρμα

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



method Η μέθοδος αποστολής των πληροφοριών. Μπορεί να είναι είτε get είτε post

get: τα στοιχεία της φόρμας μεταδίδονται στο τέλος του URL που περιέχεται στο πεδίο action της φόρμας. Είναι κατάλληλο για απλές φόρμες (π.χ. απλή αναζήτηση) και όταν δεν υπάρχουν στοιχεία τα οποία απαιτούν κρυπτογράφηση

post: τα στοιχεία της φόρμας μεταδίδονται ως μέρος του HTTP header. Είναι η συνηθέστερη επιλογή όταν τα δεδομένα είναι πολλά, θα πρέπει να καταχωρηθούν σε βάση δεδομένων και υπάρχουν ευαίσθητα δεδομένα (εμπιστευτικές πληροφορίες)

Η δομή μιας φόρμας(2)



Τρεις κατηγορίες:

Προσθήκη κειμένου από τον χρήστη

• Text input

• Password input

• Text area

Επιλογή από μια σειρά στοιχείων

• Radio buttons

• Checkboxes

• Drop down menus

Υποβολή φόρμας

Submit buttons

Image buttons

File upload

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



Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου (π.χ. ονόματα, επίθετα, επάγγελμα) που δεν ξεπερνούν σε έκταση την μια γραμμή:

Κώδικας

• <input type="text" name="username" size="40" cmaxlength="50" value="Type your username here"/>

• name => όνομα που δίνουμε στο συγκεκριμένο πεδίο

• size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί)

• cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες περισσότεροι από cmaxlength αποκόπτονται)

• value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο

Αποτέλεσμα

Text Input



Χρησιμοποιείται για εισαγωγή μικρών κομματιών κειμένου με τη διαφορά ότι αυτό που πληκτρολογεί ο χρήστης εμφανίζεται με κουκκίδες (δεν μπορεί κάποιος να το διαβάσει) :

Κώδικας

• <input type="password" name="password" size="15” maxlength="15" value="typeyourpass"/>


• size => ορατό μέγεθος πεδίου σε χαρακτήρες (πόσο μεγάλο είναι το κουτί)

• cmaxlength => μέγιστο μέγεθος πεδίου σε χαρακτήρες (χαρακτήρες περισσότεροι από cmaxlength αποκόπτονται)

• value => τι θα εμφανίζεται (αρχικά) μέσα στο συγκεκριμένο πεδίο


Password Input



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

Κώδικας

• <textarea name="comments" cols="40" rows="3">Θα ήθελα να ...</textarea>


• cols => αριθμός στηλών για το ορατό μέγεθος του πεδίου

• rows => αριθμός γραμμών για το ορατό μέγεθος του πεδίου


Text Area



Χρησιμοποιείται για την επιλογή ακριβώς ενός από μια (μικρή) ομάδα στοιχείων (π.χ. επιλογή φύλου):

Κώδικας

• <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 θα εμφανίζεται ως προεπιλεγμένο


Radio button



Χρησιμοποιείται για πολλαπλές επιλογές από μια ομάδα στοιχείων:

Κώδικας

• <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 στην ίδια ομάδα θα πρέπει να έχουν το ίδιο όνομα


• checked => δείχνει αν το συγκεκριμένο πεδίο εμφανίζεται ως προεπιλεγμένο


Checkboxes



Χρησιμοποιείται για την επιλογή ακριβώς ενός από μια (μεγάλη) ομάδα στοιχείων (π.χ. επιλογή χώρας):

Κώδικας

• <select name="devices">

<option value="ipod" >iPod</option>

<option value="radio" selected>Ραδιόφωνο</option>

<option value="computer">Υπολογιστής</option>

</select>

• option => δημιουργεί μια νέα επιλογή


• selected => δείχνει αν το συγκεκριμένο πεδίο θα εμφανίζεται ως η αρχική επιλογή

Drop down menu




Χρησιμοποιείται για υποβολή προς επεξεργασία των στοιχείων της φόρμας:

Κώδικας

• <input type="button" name="calc" value="Υπολόγισε" onclick="CalculateBMI(this.form.meters.value, this.form.kilos.value, 'result')" />


• value => Τι θα εμφανίζεται ως ετικέτα στο κουμπί υποβολής

• onclick => Τι θα γίνει όταν πατηθεί το συγκεκριμένο κουμπί. Στο παράδειγμα καλείται η συνάρτηση Javascript με όνομα CalculateBMI και ορίσματα (1) την τιμή (value) του πεδίου με όνομα (name) meters, (2) την τιμή (value) του πεδίου με όνομα (name) kilos, (3) το <div> με id =‘result’ στο οποίο θα εμφανιστεί το αποτέλεσμα


Submit / button

Φόρμες

Documents

Transcript of Φόρμες