TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

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

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

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

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

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

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

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

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

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

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

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

συνέχεια Ιδιότητες για τα Πεδία Κειμένου Κάθε μηχανισμός έχει μια αρχική και μια τρέχουσα τιμή. Την αρχική τιμή μπορείτε να την καθορίσετε προαιρετικά για ένα μηχανισμό στον κώδικα της φόρμας, ενώ τρέχουσα είναι αυτή που εισάγει ο χρήστης. Ανάπτυξη Δικτυακών Τόπων 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> Ανάπτυξη Δικτυακών Τόπων 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 στις δικές σας ανάγκες και την εγκατάστασή του στο διακομιστή σας. Ανάπτυξη Δικτυακών Τόπων 31

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

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

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

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

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

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

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

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

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

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

συνέχεια Τι θα γίνεται όμως αν η λίστα σας έχει 20 καταχωρήσεις; Η προσθήκη αυτού του tag img θα ήταν κουραστική και χρονοβόρα. Ένας αποτελεσματικός τρόπος θα ήταν να αλλάξετε τη λίστα σε μη αριθμημένη και να χρησιμοποιήσετε ένα φύλλο στυλ στην κεφαλίδα της σελίδας. <style type= text/css > li {list-style-image: url( star.gif );} </style> Ανάπτυξη Δικτυακών Τόπων 47

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

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

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

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

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