Cascading Style Sheets Φόρμες (Forms) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος
Cascading Style Sheets Τα Cascading Style Sheets (CSS) είναι οδηγίες που περιγράφουν πώς θα εμφανίζεται μία σελίδα web στον browser Διαχωρισμός του Περιεχομένου (Content) από τον Τρόπο Παρουσίασης του (Content Presentation) <h3>cd Store</h3> Περιεχόμενο: το κείμενο «CD Store» είναι επικεφαλίδα Τρόπος Παρουσίασης: πως θα εμφανίζονται οι επικεφαλίδες h3 Οι αλλαγές στο περιεχόμενο και στην εμφάνιση γίνονται ανεξάρτητα μεταξύ τους Η HTML ασχολείται με την αλλαγή του περιεχομένου ή την αλλαγή της δομής του περιεχομένου Η CSS ασχολείται με τον τρόπο εμφάνισης του περιεχομένου Προγραμματισμός ιστοσελίδων 2
Cascading Style Sheets Mε τα CSS μπορεί να ελεγχθεί η εμφάνιση εκατοντάδων σελίδων από μία κεντρική πηγή π.χ. για να θέσω σε κάθε σελίδα το ίδιο χρώμα φόντου βάζω την ιδιότητα BGCOLOR σε κάθε σελίδα ή χρησιμοποιώ ένα style sheet που καθορίζει το χρώμα φόντου Πλεονέκτημα: Με το style sheet μπορώ να αλλάξω το χρώμα φόντου σε όλες τις σελίδες με μία απλή εντολή Χωρίς το style sheet θα έπρεπε να ανοίξω κάθε σελίδα και να αλλάξω την ιδιότητα BGCOLOR Προγραμματισμός ιστοσελίδων 3
Σύνταξη της CSS Οι εντολές CSS γράφονται σε ξεχωριστές γραμμές που καλούνται κανόνες Κάθε κανόνας έχει τρία μέρη: SELECTOR {property:value} selector: η ετικέτα που θέλουμε να ελέγξουμε property: η ιδιότητα της ετικέτα που θέλουμε να ελέγξουμε value: η τιμή της ιδιότητας (πως θα συμπεριφέρεται η ιδιότητα) O συνδυασμός property/value καλείται δήλωση. Παράδειγμα: Ένας κανόνας CSS που θέτει εξ ορισμού το χρώμα του κειμένου σε κόκκινο σε όλες τις σελίδες BODΥ {color:red} Προγραμματισμός ιστοσελίδων 4
Σύνταξη της CSS Σε κάθε επιλογέα (selector) μπορούμε να έχουμε πολλές δηλώσεις (συνδυασμούς property/value) Τις διαχωρίζουμε με (;) Όλες οι δηλώσεις περιστοιχίζονται με { } BODY {color:red; background-color:blue; margin-left: 30px; margin-right: 30px} Σωστός προγραμματισμός: κάθε δήλωση χρησιμοποιεί μια ξεχωριστή γραμμή Προγραμματισμός ιστοσελίδων 5
Ομαδοποίηση επιλογέων Μπορούμε να ομαδοποιήσουμε επιλογείς (selectors) σε έναν κανόνα Παράδειγμα: Ένας κανόνας CSS που καθορίζει τις ετικέτες H1,H2 και Η3 Καθορίζουμε διάφορα χαρακτηριστικά εκτός από το μέγεθος h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} Προγραμματισμός ιστοσελίδων 6
Ένθετοι επιλογείς Μπορούμε να ορίσουμε επιλογείς που εφαρμόζονται μόνο μέσα σε άλλους επιλογής SELECTOR1 SELECTOR2 {property:value} Παράδειγμα: Ορισμός CSS: p b {color:red; background-color:blue} Εφαρμογή: <b>rock, pop and jazz music</b> <p><b>rock, pop and jazz music</b></p> Προγραμματισμός ιστοσελίδων 7
Χρήση της CSS Τρόποι χρήσης της CSS Ενσωματωμένος ορισμός του κώδικα CSS Inline Styles Εσωτερικός ορισμός του κώδικα CSS Embedded Styles Εξωτερικός ορισμός του κώδικα CSS Linked Styles Καθορίζουν το σημείο δήλωσης του κώδικα CSS Μπορούν να χρησιμοποιηθούν ένα από τα τρία ή συνδυασμούς τους «Cascading» style sheets Προγραμματισμός ιστοσελίδων 8
Ενσωματωμένος ορισμός του κώδικα CSS Εφαρμογή του στυλ (style sheet) απευθείας στην ετικέτα Η εφαρμογή αναφέρεται μόνο στην συγκεκριμένη ετικέτα Για την εφαρμογή του στυλ στην ίδια ή σε άλλες σελίδες απαιτείται αντιγραφή του style sheet Δεν είναι αποδοτικός τρόπος γιατί καταργεί το πλεονέκτημα του CSS για ανεξαρτητοποίηση εμφάνισης και περιεχομένου <p style="color:red;text-align:center;">the most popular albums</p> Προγραμματισμός ιστοσελίδων 9
Εσωτερικός ορισμός του κώδικα CSS Τα στυλ (style sheets) δηλώνονται στην ετικέτα <head> της σελίδας Για εφαρμογή σε πολλές σελίδες πρέπει να αντιγραφεί το κομμάτι δηλώσεων του στυλ στα αντίστοιχα <head> των άλλων σελίδων Στην ετικέτα <head> δηλώνεται ο τρόπος παρουσίασης του περιεχομένου που βρίσκεται μέσα στην ετικέτα <body> Για την αποφυγή της εμφάνισης του κειμένου των style sheets σε παλιούς browsers (που δεν υποστηρίζουν CSS) το κείμενο αυτό τοποθετείται υπό τη μορφή σχολίων της HTML <head> <style type="text/css"> <!-- h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} --> </style> </head> <body> <h1>cd Store</h1> <h2>cd Store</h2> <h3>cd Store</h3> </body> Προγραμματισμός ιστοσελίδων 10
Εξωτερικός ορισμός του κώδικα CSS Τα στυλ (style sheets) αποθηκεύονται σε εξωτερικό ή εξωτερικά αρχεία με επέκταση.css Στη ετικέτα <head> δηλώνεται το όνομα του αρχείου που τα περιέχει Πλεονέκτημα: Κάθε αλλαγή στο εξωτερικό αρχείο.css εφαρμόζεται απευθείας σε όλες τις σελίδες που συνδέονται με αυτό Εύκολη διαχείριση όλων των σελίδων που ανήκουν στο ίδιο site <head> <link rel="stylesheet" type="text/css" href= "template.css" /> </head> Προγραμματισμός ιστοσελίδων 11
Προτεραιότητα εφαρμογής style sheets Όταν δηλώνονται πολλαπλά στυλ (cascading style sheets) σε μία σελίδα, ισχύει η παρακάτω σειρά προτεραιότητας: Ενσωματωμένο style sheet Εσωτερικό style sheet Εξωτερικό style sheet Εξ ορισμού (default) μορφοποίηση του browser Προγραμματισμός ιστοσελίδων 12
Αναγνωριστικά και κλάσεις στα CSS Τα CSS επιτρέπουν εκτός από τον καθορισμό στυλ για ετικέτες HTML, την δημιουργία των δικών μας επιλογέων Αναγνωριστικό (id) Κλάση (class) Προγραμματισμός ιστοσελίδων 13
Επιλογέας αναγνωριστικού Ο επιλογέας αναγνωριστικού (id selector) χρησιμοποιείται για να καθορίσει ένα στυλ για ένα μοναδικό, συγκεκριμένο στοιχείο της σελίδας Κάθε επιλογέας id δηλώνεται με #στοιχείο_σελίδας Εξωτερικό αρχείο CSS: #myid {color:green} Σελίδα HTML: <h3>cd Store</h3> <h3 id="myid">cd Store</h3> <p>the most popular albums</p> <p id="myid">the most popular albums</p> Προγραμματισμός ιστοσελίδων 14
Επιλογέας κλάσης Ο επιλογέας κλάσης (class selector) χρησιμοποιείται για τον καθορισμό ενός στυλ για μια ομάδα από στοιχεία. Σε αντίθεση με τον επιλογέα αναγνωριστικού συχνά χρησιμοποιείται για περισσότερα στοιχεία Κάθε επιλογέας κλάσης δηλώνεται με (.) Εξωτερικό αρχείο CSS: p.myclass {color:green} Σελίδα HTML: <h3>cd Store</h3> <h3 class="myclass">cd Store</h3> <p>the most popular albums</p> <p class="myclass">the most popular albums</p> Προγραμματισμός ιστοσελίδων 15
Σύνδεσμοι Στα CSS μπορούμε να καθορίσουμε πως θα φαίνονται οι σύνδεσμοι (links) ανάλογα με την κατάστασή τους a:link σύνδεσμος a:visited σύνδεσμος που τον έχουμε επισκεφθεί a:hover όταν το ποντίκι βρίσκεται πάνω από τον σύνδεσμο a:active όταν έχουμε κάνει κλικ πάνω στον σύνδεσμο A:link {color:red} A:active {color:blue} A:visited {color:green} A:hover {color:purple} Προγραμματισμός ιστοσελίδων 16
Παραδείγματα Εξωτερικό αρχείο CSS: h1,h2,h3 {color:red; background-color:blue; text-align:center; font-style:italic} h4,h5 {color:blue} Σελίδα HTML: <h1>cd Store</h1> <h2>cd Store</h2> <h4>cd Store</h4> Προγραμματισμός ιστοσελίδων 17
Παραδείγματα Εξωτερικό αρχείο CSS: ul li {color:blue} ul li li {color:green} ol li {color:red} ol li li {color:black} Σελίδα HTML: <ul> <li>ρέμος</li> <li>χατζηγιάννης <ul><li>cd1</li><li>cd2</li></ul> </li> </ul> <ol> <li>ρέμος</li> <li>χατζηγιάννης <ul><li>cd1</li><li>cd2</li></ul> </li> </ol> Προγραμματισμός ιστοσελίδων 18
Φόρμες (Forms) Οι Φόρμες χρησιμοποιούνται για τη δημιουργία (σχετικά απλών) GUIs (Graphical User Interfaces) σε διαδικτυακές σελίδες Συνήθως ο σκοπός τους είναι η συλλογή στοιχείων από το χρήστη Τα στοιχεία που συλλέγονται αποστέλλονται στον Server π.χ. εταιρίες τις χρησιμοποιούν για παραγγελίες, δημοσκοπήσεις, ταυτοποίηση χρηστών και για παροχή σχολίων από τους χρήστες Για την επεξεργασία χρειάζεται κάποια δυναμική σελίδα/στοιχείο (php, asp, jsp, cgi) Προγραμματισμός ιστοσελίδων 19
Φόρμες (Forms) Μια φόρμα δηλώνεται στην HMTL με μια ετικέτα <form></form> Μια φόρμα αποτελείται από χαρακτηριστικά και στοιχεία φόρμας (form elements) Δήλωση φόρμας: <form χαρακτηριστικά>...στοιχεία φόρμας... </form> Παράδειγμα <form method="post" action="process.php"> <input type="text" name="last" size="20" /> </form> Προγραμματισμός ιστοσελίδων 20
Φόρμες (Forms) Τα στοιχεία μιας φόρμας περιλαμβάνουν: κουμπιά (buttons), πεδία κειμένου (text fields), μενού επιλογών (checkboxes), radio buttons, drop-down menus κ.α. Μια φόρμα μπορεί να περιέχει και άλλες ετικέτες εκτός από τα στοιχεία φόρμας Κάθε φόρμα συνήθως περιέχει ένα κουμπί υποβολής στοιχείων (submit) αποστολή στον Server των πληροφοριών που έχουν συμπληρωθεί από το χρήστη Τα χαρακτηριστικά μιας φόρμας καθορίζουν με πιο τρόπο τα στοιχεία θα αποσταλούν στον Server Προγραμματισμός ιστοσελίδων 21
Χαρακτηριστικά ετικέτας form Χαρακτηριστικά της ετικέτας form name="όνομα_φόρμας" Το όνομα της φόρμας action="url" (απαιτείται) Καθορίζει που θα σταλούν τα συμπληρωμένα δεδομένα όταν πατηθεί το κουμπί αποστολής (submit) method="get" (default) Τα δεδομένα στέλνονται μέσω URL της μορφής όνομα_σελίδας_παραλήπτη?δεδομένα_φόρμας Χρησιμοποιείται μόνο όταν τα δεδομένα είναι μορφής ASCII και δεν ξεπερνούν τους 100 χαρακτήρες Προγραμματισμός ιστοσελίδων 22
Χαρακτηριστικά ετικέτας form method="post" Τα δεδομένα της φόρμας στέλνονται στο σώμα της αίτησης URL Το πλήρες URL δεν μπορεί να αποθηκευτεί από τους περισσότερους browsers target="target" Δηλώνει σε πιο παράθυρο θα εμφανιστεί η σελίδα που θα αποσταλούν τα δεδομένα target= _blank θα εμφανιστεί σε νέο παράθυρο target= _top θα εμφανιστεί στο ίδιο παράθυρο Προγραμματισμός ιστοσελίδων 23
Ετικέτα input Tα πιο συνήθη στοιχεία φόρμας (form elements) χρησιμοποιούν την ετικέτα <input> και το χαρακτηριστικό της type για να καθορίσουν τον τύπο του στοιχείου μπορεί να πάρει τις τιμές:,,,,,,,,, Άλλα χαρακτηριστικά της ετικέτας <input> είναι : το όνομα του στοιχείου : το αναγνωριστικό (μοναδικό) του στοιχείου : η τιμή του στοιχείου (οι τιμές που μπορεί να πάρει καθορίζονται από τον τύπο του στοιχείου) : η τιμή δεν μπορεί να μεταβληθεί : απενεργοποίηση του στοιχείου δεν μπορεί να χρησιμοποιηθεί από το χρήστη ανάλογα με τον τύπο του στοιχείου υπάρχουν και άλλα συγκεκριμένα χαρακτηριστικά Προγραμματισμός ιστοσελίδων 24
Πλαίσια κειμένου Απλά πλαίσια κειμένου Ετικέτα <input/> και χαρακτηριστικό type="text" Άλλα χαρακτηριστικά size value το μέγεθος του πλαισίου το κείμενο που θα εμφανίζεται μέσα στο πλαίσιο maxlength ο μέγιστος αριθμός χαρακτήρων που μπορούν να εισαχθούν στο πλαίσιο Πλαίσιο κειμένου για κωδικούς (passwords) Ετικέτα <input/> και χαρακτηριστικό type= password Ίδια χαρακτηριστικά με το απλό πλαίσιο κειμένου Στο πλαίσιο που θα εισαχθεί ο κωδικός εμφανίζονται αστερίσκοι (*) για ασφάλεια Προγραμματισμός ιστοσελίδων 25
Πλαίσια κειμένου Πλαίσια κειμένου πολλαπλών γραμμών Ετικέτα <textarea></textarea> Ίδια χαρακτηριστικά με το απλό πλαίσιο κειμένου και επιπλέον cols μέγεθος του πλαισίου σε στήλες rows μέγεθος του πλαισίου σε γραμμές Προγραμματισμός ιστοσελίδων 26
Πλαίσια κειμένου <form method="post" action="process.php" enctype="text/plain"> Username: <input type="text" name="username" size="15" maxlength="50" /> <br /><br /> Password: <input type="password" name="pass" size="20" /> <br /><br /> <textarea cols="30" rows="5">συμπληρώστε τα σχόλιά σας</textarea> <br /><br /> <input type="submit" value="αποστολή" /> <input type="reset" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 27
Κουμπιά (buttons) Κουμπί υποβολής στοιχείων Ετικέτα <input/> και χαρακτηριστικό type="submit Κουμπί καθαρισμού της φόρμας Ετικέτα <input/> και χαρακτηριστικό type="reset" Κοινό κουμπί Ετικέτα <input/> και χαρακτηριστικό type="button" Άλλα χαρακτηριστικά των κουμπιών name το όνομα του κουμπιού value το κείμενο που θα εμφανίζεται πάνω στο κουμπί Προγραμματισμός ιστοσελίδων 28
Κουμπιά (buttons) <form name="myform" method="post" action="process.php" enctype="text/plain">. <br /><br /> <input type="button" name="commonbutton" value="έλεγχος ορθότητας στοιχείων" onclick="checkvalues();" /> <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 29
Radio buttons Ετικέτα <input/> και χαρακτηριστικό type="radio Άλλα χαρακτηριστικά name το όνομα του radio button value η τιμή του radio button checked αν είναι επιλεγμένο Όταν δύο ή περισσότερα radio buttons έχουν το ίδιο όνομα name, ο χρήστης μπορεί να επιλέξει μόνο το ένα από αυτά Δημιουργία ομάδας από radio buttons Η τιμή της ομάδας είναι η τιμή του επιλεγμένου κάθε στιγμή radio button Προγραμματισμός ιστοσελίδων 30
Checkboxes Ετικέτα <input/> και χαρακτηριστικό type= checkbox Άλλα χαρακτηριστικά name το όνομα του radio button value η τιμή του radio button checked αν είναι επιλεγμένο Κάθε checkbox δεν ανήκει σε ομάδα όπως τα radio buttons Μπορεί να είναι επιλεγμένο ή μη επιλεγμένο Προγραμματισμός ιστοσελίδων 31
Radio buttons Checkboxes <form name="myform" method="post" action="process.php" enctype="text/plain"> Φύλο: <input type="radio" name="gender" value="m" checked="checked"/>άνδρας <input type="radio" name="gender" value="f"/>γυναίκα <br /><br /> <input type="checkbox" value="stu"/> Φοιτητής <br /><br /> <input type="checkbox" value="empl"/> Εργαζόμενος <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 32
Ετικέτες (Labels) Σε πολλές περιπτώσεις οι ετικέτες δεν σχετίζονται με τα στοιχεία ελέγχου Πατώντας πάνω στη λέξη «άνδρας» δεν γίνεται τίποτε Η ετικέτα <label> σχετίζει τo κείμενο με το στοιχείο ελέγχου <label><input type="radio" name="gender" value="m" /> άνδρας </label> Πατώντας πάνω στη λέξη «άνδρας» επιλέγεται το radio button Προγραμματισμός ιστοσελίδων 33
Μενού drop-down Ετικέτα <select></select> Κάθε στοιχείο του μενού δηλώνεται με την ετικέτα <option>τιμή_στοιχείου</option> Χαρακτηριστικά name size όνομα του μενού αριθμός ορατών στοιχείων μη χρήση: μπορεί να επιλεγεί μόνο ένα στοιχείο true: μπορούν να επιλεγούν περισσότερα από ένα στοιχεία false: η συμπεριφορά εξαρτάται από τον browser Προγραμματισμός ιστοσελίδων 34
Κρυφά στοιχεία Ετικέτα <input/> και χαρακτηριστικό type= hidden Άλλα χαρακτηριστικά name το όνομα του κρυφού στοιχείου value η τιμή του κρυφού στοιχείου Πλεονεκτήματα Όλα τα δεδομένα συμπεριλαμβανομένων και των κρυφών στοιχείων στέλνονται στον Server Αποτελεί ένα τρόπο να συμπεριληφθεί πληροφορία που δεν χρειάζεται (ή δεν πρέπει) να δει ο χρήστης Η τιμή του κρυφού στοιχείο μπορεί να τεθεί δυναμικά χωρίς την παρέμβαση του χρήστη (με javascript) Προγραμματισμός ιστοσελίδων 35
Κρυφά στοιχεία Drop-down box <form name="myform" method="post" action="process.php" enctype="text/plain"> Εκπαιδευτικό Ίδρυμα: <select name="selectuni"> <option value="teiath">τει Αθήνας</option> <option value="teipir" selected="true">τει Πειραιά</option> <option value="uop">πανεπ. Πελοποννήσου</option> </select> <br /><br /> <input type="hidden" name="pagenum" value="2"/> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> Προγραμματισμός ιστοσελίδων 36
Ολοκληρωμένο παράδειγμα <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>cd Store</title> </head> <body bgcolor="#99ffcc"> <h2>αποστολή σχολίων</h2> <form name="myform" method="post" action="process.php" enctype="text/plain"> Όνομα χρήστη: <input type="text" name="username" size="20" maxlength="50" /> <br /><br /> Κωδικός χρήστη: <input type="password" name="pass" size="20" /> <br /><br /> Φύλο: <input type="radio" name="gender" value="m" checked="checked"/>άνδρας <input type="radio" name="gender" value="f"/>γυναίκα <br /><br /> <input type="checkbox" value="stu"/> Φοιτητής <br /><br /> <input type="checkbox" value="empl"/> Εργαζόμενος <br /><br /> Προγραμματισμός ιστοσελίδων 37
Ολοκληρωμένο παράδειγμα Εκπαιδευτικό Ίδρυμα: <select name="selectuni"> <option value="teiath">τει Αθήνας</option> <option value="teipir" selected="true">τει Πειραιά</option> <option value="uop">πανεπ. Πελοποννήσου</option> </select> <input type="hidden" name="pagenum" value="2"/> <br /><br /> <textarea name="textarea" cols="30" rows="5">συμπληρώστε τα σχόλιά σας</textarea> <br /><br /> <input type="button" name="commonbutton" value="έλεγχος ορθότητας στοιχείων" onclick="checkvalues();" /> <br /><br /> <input type="submit" name="sendbutton" value="αποστολή" /> <input type="reset" name="resetbutton" value="καθαρισμός" /> </form> </body> </html> Προγραμματισμός ιστοσελίδων 38
Ολοκληρωμένο παράδειγμα Προγραμματισμός ιστοσελίδων 39