TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Ιόνιο Πανεπιστήμιο» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 1

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

Φόρμες Ανάπτυξη Δικτυακών Τόπων 2011-2012 2

1. Η Σημασία και οι Χρήσεις των Φορμών σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 2011-2012 3

Ο βασικότερος σκοπός οποιασδήποτε φόρμας είναι η συλλογή πληροφοριών. Οι ηλεκτρονικές φόρμες δημιουργούνται είτε χρησιμοποιώντας αποκλειστικά HTML είτε σε συνδυασμό με άλλες τεχνολογίες. Ανάπτυξη Δικτυακών Τόπων 2011-2012 4

2. Δημιουργία μιας Απλής Φόρμας Ανάπτυξη Δικτυακών Τόπων 2011-2012 5

Όλες οι φόρμες έχουν την ίδια δομή η οποία περιλαμβάνει το ζεύγος αρχικού και τελικού tag form, μηχανισμούς για την είσοδο δεδομένων και μεθόδους επεξεργασίας. Το ζεύγος αρχικού/τελικού tag form περικλείει ολόκληρο το περιεχόμενο της φόρμας. Οι μηχανισμοί εισόδου μπορεί να είναι: Μηχανισμοί εισόδου κειμένου Πλαίσια ελέγχου Στρογγυλά κουμπιά Μενού επιλογών Μηχανισμοί επιλογής αρχείων Κουμπιά (υποβολής [submit], επαναφοράς [reset]) Κρυφοί μηχανισμοί Ανάπτυξη Δικτυακών Τόπων 2011-2012 6

συνέχεια Ανάπτυξη Δικτυακών Τόπων 2011-2012 7

2.1 Πεδία Κειμένου μιας Γραμμής Πεδίο κειμένου μιας γραμμής: είναι ο απλούστερος τύπος μηχανισμού εισόδου και είναι ένας χώρος που μοιάζει με πλαίσιο και μπορεί να περιέχει μια και μόνο γραμμή κειμένου. Συνήθως συνοδεύεται από μια ετικέτα περιγραφικού κειμένου που υποδεικνύει στο χρήστη τι πρέπει να γράψει μέσα στο πεδίο. Παράδειγμα: <form> Please enter your first name: <input type= text /><br /> Please enter your last name: <input type= text /> </form> Ανάπτυξη Δικτυακών Τόπων 2011-2012 8

συνέχεια Τα πεδία κειμένου έχουν μέγεθος (μήκος) 20 χαρακτήρες εκτός και αν καθορίσετε κάτι διαφορετικό με την ιδιότητα size. H σημαντικότερη ιδιότητα του tag input είναι η name. Ανάπτυξη Δικτυακών Τόπων 2011-2012 9

συνέχεια Ιδιότητες για τα Πεδία Κειμένου Κάθε μηχανισμός έχει μια αρχική και μια τρέχουσα τιμή. Την αρχική τιμή μπορείτε να την καθορίσετε προαιρετικά για ένα μηχανισμό στον κώδικα της φόρμας, ενώ τρέχουσα είναι αυτή που εισάγει ο χρήστης. Ανάπτυξη Δικτυακών Τόπων 2011-2012 10

2.2 Πεδία Κειμένου για Εισαγωγή Κωδικών Πρόσβασης Η HTML σας δίνει τη δυνατότητα να δημιουργείτε πεδίο κειμένου για την εισαγωγή κωδικών πρόσβασης (passwords). Η βασική διαφορά αυτού από το πεδίο εισαγωγής κειμένου είναι ότι δεν εμφανίζεται το κανονικό κείμενο που εισάγει ο χρήστης αλλά μια σειρά από κουκίδες. Για να δημιουργήσετε αυτό το είδος μηχανισμού θα πρέπει να χρησιμοποιήσετε τη λέξη password σαν τιμή στην ιδιότητα type του tag input. Παράδειγμα: <form> Please enter your username: <input type= text name= UserName ><br /> Please enter your password: <input type= password name= Password > </form> Ανάπτυξη Δικτυακών Τόπων 2011-2012 11

2.3 Πλαίσια Κειμένου Πολλαπλών Γραμμών Για να εισάγουν οι χρήστες περισσότερες από μια γραμμές κειμένου θα πρέπει να χρησιμοποιείτε ένα πλαίσιο κειμένου πολλαπλών γραμμών. Αυτό το πλαίσιο δημιουργείται με το tag textarea αντί του tag input. Για να καθορίσετε το μέγεθος του πλαισίου χρησιμοποιείτε τις ιδιότητες cols (καθορίζει το πλάτος) και rows (καθορίζει το ύψος). Στα πλαίσια δεν θα χρησιμοποιείτε την ιδιότητα value για να καθορίσετε την αρχική τιμή που θα εμφανίζεται μέσα σε αυτό, αλλά θα περιλαμβάνετε το κείμενο που θέλετε μεταξύ αρχικού και τελικού tag textarea. Ανάπτυξη Δικτυακών Τόπων 2011-2012 12

2.4 Στρογγυλά Κουμπιά Τα στρογγυλά κουμπιά (radio buttons) είναι μικρά κουμπιά κυκλικού σχήματος τα οποία επιτρέπουν στους χρήστες να επιλέγουν μια και μόνο επιλογή από τη λίστα επιλογών. Δημιουργούνται με το tag input και την τιμή radio στην ιδιότητα type. Οι ιδιότητες name και value είναι ιδιαίτερα σημαντικές για τα στρογγυλά κουμπιά. Η ιδιότητα name στο παράδειγμα που ακολουθεί περιέχει την ίδια τιμή για να διασφαλίζεται ότι οι 4 μηχανισμοί είναι διασυνδεδεμένοι μεταξύ τους και ο browser ξέρει ότι μόνο ένα μπορεί να είναι επιλεγμένο από μια ομάδα τέτοιων. Ανάπτυξη Δικτυακών Τόπων 2011-2012 14

2.5 Πλαίσια Ελέγχου Τα πλαίσια ελέγχου είναι παρόμοια με τα στρογγυλά κουμπιά στο ότι οι χρήστες δεν πληκτρολογούν δεδομένα. Διαφέρουν από τα στρογγυλά κουμπιά στο ότι επιτρέπουν στο χρήστη να ενεργοποιεί περισσότερες από μια επιλογές σε μια λίστα επιλογών. Δημιουργούνται με το tag input και την τιμή checbox στην ιδιότητα type. Οι τιμές στην ιδιότητα name πρέπει να είναι ίδιες και η ιδιότητα value θα προσδιορίζει το διαφορετικό στοιχείο σε κάθε επιλογή. Αν θέλετε ένα πλαίσιο να εμφανίζεται από την αρχή μαρκαρισμένο χρησιμοποιείτε την ιδιότητα checked. Ανάπτυξη Δικτυακών Τόπων 2011-2012 16

2.6 Μενού Επιλογών Όταν θέλετε οι χρήστες να έχουν δυνατότητα επιλογής από μια μεγάλη λίστα επιλογών τότε χρησιμοποιείτε τα μενού επιλογών που είναι λίστες που έχουν μόνο μια ή λίγες ορατές επιλογές. Η τιμή της ιδιότητας size καθορίζει πόσες επιλογές θα είναι στην αρχή ορατές. Το στοιχείο select χρησιμοποιείται για τη δημιουργία του μενού επιλογών, ενώ κάθε μεμονωμένη καταχώριση περικλείεται σε ένα ζεύγος αρχικού/τελικού tag option. Εξ ορισμού οι χρήστες μπορούν να επιλέγουν μια μόνο καταχώρηση, για να μπορούν να έχουν περισσότερες προσθέστε την ιδιότητα multiple στο αρχικό tag select. Ανάπτυξη Δικτυακών Τόπων 2011-2012 18

2.6.1 Υπομενού Το στοιχείο optgroup χρησιμοποιείται για το διαχωρισμό των πολυπληθών μενού επιλογών σε κατηγορίες με τη μορφή υπομενού. Η ιδιότητα label χρησιμοποιείται μαζί με το optgroup για να τιτλοφορεί κάθε υπομενού με ένα όνομα. Ανάπτυξη Δικτυακών Τόπων 2011-2012 20

2.7 Μηχανισμοί Αποστολής Αρχείων Για την αποστολή ενός αρχείου με τη συμπλήρωση μιας φόρμας πρέπει να χρησιμοποιήσετε την ιδιότητα type= file στο tag input. Για τις αποστολές αρχείων οι browsers εμφανίζουν ένα πεδίο κειμένου μαζί με ένα κουμπί το οποίο τιτλοφορείται συνήθως Browse και πατώντας το οι χρήστες βλέπουν τη δομή των φακέλων στον υπολογιστή τους. Ανάπτυξη Δικτυακών Τόπων 2011-2012 21

2.8 Κρυφά Πεδία Ένα κρυφό πεδίο είναι δεδομένα τα οποία προσαρτώνται σε μια φόρμα και υφίστανται επεξεργασία μέσω αυτής, αλλά ο χρήστης δε μπορεί να τα δει ή να τα αλλάξει. Μπορείτε να ενσωματώνετε όσα κρυφά πεδία θέλετε σε μια φόρμα χρησιμοποιώντας tags input με την ιδιότητα type ορισμένη σε hidden. Ανάπτυξη Δικτυακών Τόπων 2011-2012 22

2.9 Κουμπιά Τα κουμπιά δίνουν στους χρήστες τη δυνατότητα να αλληλεπιδρούν με μια φόρμα. Με την HTML μπορείτε να δημιουργείτε τρία είδη κουμπιών: Κουμπιά submit: χρησιμοποιούνται για την επεξεργασία της φόρμας. Κουμπιά reset: χρησιμοποιούνται για την επαναφορά της φόρμας στην αρχική. Άλλα κουμπιά: εξυπηρετούν οποιεσδήποτε άλλες λειτουργίες μπορούν. Μπορείτε να χρησιμοποιείτε το tag input ή το tag button για τη δημιουργία των κουμπιών. Σε κάθε περίπτωση προσθέστε την ιδιότητα type και την κατάλληλη τιμή. Ανάπτυξη Δικτυακών Τόπων 2011-2012 23

συνέχεια Είδη Κουμπιών Ανάπτυξη Δικτυακών Τόπων 2011-2012 24

2.10 Μορφοποίηση με το Tag button Αν και αμφότερα τα tags input και button δημιουργούν ένα απλό κουμπί με γκρι χρώμα και κείμενο στο εσωτερικό του, το tag button έχει επιπλέον δυνατότητες μορφοποίησης. Μεταξύ αρχικού και τελικού tag button μπορείτε να εισάγετε εικόνες και άλλα στοιχεία της HTML τα οποία τοποθετούνται πάνω στο κουμπί όταν εμφανίζεται σε μια εφαρμογή browser. Ανάπτυξη Δικτυακών Τόπων 2011-2012 25

2.1 Δημιουργία Γραφικών Κουμπιών με το Tag input Μπορείτε να δημιουργήσετε ένα κουμπί από μια εικόνα, χρησιμοποιώντας το tag input και αλλάζοντας την ιδιότητα type σε image. Τα γραφικά κουμπιά που δημιουργούνται με το tag input περιβάλλονται από ένα περίγραμμα το οποίο με τη χρήση φύλλων στυλ μπορείτε να το απενεργοποιείτε. Ανάπτυξη Δικτυακών Τόπων 2011-2012 26

3. Καθορισμός του Τρόπου Επεξεργασίας των Δεδομένων Μιας Φόρμας Ανάπτυξη Δικτυακών Τόπων 2011-2012 27

3.1 Η Ιδιότητα action Μέσα στο αρχικό tag form, πρέπει να πείτε στον browser πως θα επεξεργαστεί τη φόρμα. Αυτό γίνεται με την ιδιότητα action. Η ιδιότητα action δίνει τη θέση στην οποία πρέπει να αποσταλούν τα δεδομένα της φόρμας. Μπορεί να έχει τη μορφή μιας διεύθυνσης e-mail <form action= mailto:name@emailaddress.com > ή της διεύθυνσης URL ενός CGI script. <form action=../cgi-bin/form.cgi > Ανάπτυξη Δικτυακών Τόπων 2011-2012 28

3.2 Πως δείχνει ένα CGI Script; Η συγγραφή CGI scripts γίνεται είτε σε Perl είτε σε κάποια άλλη γλώσσα προγραμματισμού. Ανάπτυξη Δικτυακών Τόπων 2011-2012 29

3.3 Που Μπορώ να Βρω Ένα CGI Script; Για την ανεύρεση CGI scripts στο διαδίκτυο ψάξτε στους παρακάτω δικτυακούς τόπους: Matt s Script Archive www.sciptarchive.com HotScripts.com www.hotscripts.com The CGI Resource Index www.cgi-resources.com Πρέπει να δώσετε προσοχή στο υλικό τεκμηρίωσης που συνοδεύει κάθε script επειδή εκεί θα βρείτε οδηγίες για την προσαρμογή του script στις δικές σας ανάγκες και την εγκατάστασή του στο διακομιστή σας. Ανάπτυξη Δικτυακών Τόπων 2011-2012 30

3.4 Οι Ιδιότητες method και enctype Η ιδιότητα method λέει στην εφαρμογή browser πώς να στείλει τα δεδομένα στο διακομιστή (server). Οι τιμές που μπορεί να πάρει είναι δύο get & post Όταν παίρνει την τιμή get παίρνει όλα τα δεδομένα που υποβάλλονται με τη φόρμα και τα στέλνει στο διακομιστή, προσαρτημένα στο τέλος της διεύθυνσης URL. Όταν παίρνει την τιμή post οι πληροφορίες στέλνονται απευθείας στη θέση όπου είναι αποθηκευμένο το αρχείο του script. Η ιδιότητα enctype λέει στον browser πως πρέπει να μορφοποιεί τα δεδομένα όταν η ιδιότητα method ορίζεται σε post. Ανάπτυξη Δικτυακών Τόπων 2011-2012 31

4. Επιπλέον Τεχνικές Μορφοποίησης Φορμών Ανάπτυξη Δικτυακών Τόπων 2011-2012 32

4.1 Πίνακες Όταν χρησιμοποιείτε έναν πίνακα για να δημιουργήσετε τη διάταξη μιας φόρμας, πιθανότατα θα τοποθετείτε κάθε στοιχείο της φόρμας στην πρώτη στήλη και τους μηχανισμούς εισόδου δεδομένων στη δεύτερη στήλη. Έτσι μπορείτε να επιτύχετε ομοιομορφία και οργανωμένη εμφάνιση της φόρμας σας. Ανάπτυξη Δικτυακών Τόπων 2011-2012 33

4.2 Σειρά του Πλήκτρου Tab και Πλήκτρα Συντόμευσης Μπορείτε να χρησιμοποιείτε τις ιδιότητες tabindex και accesskey για να μορφοποιείτε τους μηχανισμούς εισόδου δεδομένων. Να θυμάστε ότι για τη σειρά του πλήκτρου tab η αρίθμηση ξεκινά από το 0 και όχι από το 1. Ανάπτυξη Δικτυακών Τόπων 2011-2012 35

4.3 Ετικέτες Το περιγραφικό κείμενο μπροστά από ένα μηχανισμό εισόδου δεδομένων βοηθάει τους χρήστες να κατανοήσουν τι είδους πληροφορίες πρέπει να εισάγουν. Για να διασυνδέσετε την ετικέτα με τον μηχανισμό που τιτλοφορεί χρησιμοποιείστε το tag label και την ιδιότητα id. Κάθε ετικέτα μπορεί να διασυνδέεται μόνο με ένα μηχανισμό. Ανάπτυξη Δικτυακών Τόπων 2011-2012 36

4.4 Ομάδες Το στοιχείο fieldset σας επιτρέπει να ομαδοποιείτε ετικέτες και μηχανισμούς. Χρησιμοποιώντας την ιδιότητα legend μπορείτε να αναθέσετε μια λεζάντα σε ολόκληρη την ομάδα. Ανάπτυξη Δικτυακών Τόπων 2011-2012 38

4.5 Απενεργοποίηση Στοιχείων Μιας Φόρμας Όταν θέλετε να απαγορεύσετε την είσοδο δεδομένων από το χρήστη σε ένα συγκεκριμένο στοιχείο της φόρμας μπορείτε να χρησιμοποιήσετε μια από τις ακόλουθες ιδιότητες. readonly disabled: οι μηχανισμοί εισόδου που απενεργοποιεί εμφανίζονται με γκρίζο ή αμυδρό κείμενο. Ανάπτυξη Δικτυακών Τόπων 2011-2012 40

5. Μορφοποίηση Φορμών με Φύλλα Στυλ Ανάπτυξη Δικτυακών Τόπων 2011-2012 42

Οι περισσότερες φόρμες μπορούν να μορφοποιούνται με φύλλα στυλ. Ανάπτυξη Δικτυακών Τόπων 2011-2012 43

συνέχεια Ο HTML κώδικας Ανάπτυξη Δικτυακών Τόπων 2011-2012 44

συνέχεια Χρησιμοποιώντας ένα φύλλο στυλ όπως το παρακάτω Ανάπτυξη Δικτυακών Τόπων 2011-2012 46

συνέχεια Η φόρμα παίρνει άλλη μορφή Ανάπτυξη Δικτυακών Τόπων 2011-2012 47

5.1 Χρήση Στυλ και Ομάδων Πεδίων Αντί των Πινάκων για τη Διάταξη Μιας Φόρμας Θα μπορούσατε να προάγετε τη χρήση ενός φύλλου στυλ σε ανώτερο επίπεδο χρησιμοποιώντας το για να ελέγξετε συνολικά τη διάταξη μιας φόρμας, έτσι ώστε να μην είναι αναγκαία η χρήση ενός πίνακα για αυτό το σκοπό. Στη συνέχεια παρουσιάζεται η ίδια φόρμα χωρίς tags table στον κώδικά της. Ανάπτυξη Δικτυακών Τόπων 2011-2012 48

συνέχεια Και η φόρμα παρουσιάζεται στην παρακάτω εικόνα ως έχει, χωρίς μορφοποίηση. Αν και υπάρχει μια υποψία δομής χάρη στα tags fieldset μεγάλο μέρος του περιεχομένου απλώς ρέει στην οθόνη. Ανάπτυξη Δικτυακών Τόπων 2011-2012 50

συνέχεια Χρησιμοποιώντας το παρακάτω φύλλο στυλ Ανάπτυξη Δικτυακών Τόπων 2011-2012 52

συνέχεια Έχετε αυτό το αποτέλεσμα: Ανάπτυξη Δικτυακών Τόπων 2011-2012 53