ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 7) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc (El. & Comp. Eng) 1. Στόχοι Στόχος του εργαστηρίου είναι η δηµιουργία ιστοσελίδων µε δυνατότητα λήψης δεδοµένων από το χρήστη. Στο εργαστήριο θα παρουσιαστεί η έννοια της φόρµας στον κώδικα HTML και θα περιγραφεί η λειτουργία της και η αλληλεπίδρασή της µε εκτελέσιµα προγράµµατα που βρίσκονται στον webserver. Προκειµένου να επιτευχθούν οι στόχοι του εργαστηρίου, αρχικά θα πληκτρολογηθούν και θα παρουσιαστούν παραδείγµατα σελίδων και στη συνέχεια θα ζητηθεί η κατασκευή απλών σελίδων από τους φοιτητές. 2. ηµιουργία πλαισίων εισαγωγής κειµένου (input fields) Όνοµα: <INPUT type="text" name="firstname"><br> Επώνυµο: <INPUT type="text" name="lastname"> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7a.html µέσα στο http://infoman.teikav.edu.gr/~username/page7a.html (όπου username είναι το προσωπικό 1
3. ηµιουργία πλαισίων εισαγωγής κρυφών κωδικών (password fields) Όνοµα χρήστη: <INPUT type="text" name="user"><br> Κωδικός: <INPUT type="password" name="password"> Όταν πληκτρολογούµε σε πλαίσιο εισαγωγής κρυφών κωδικών, ο browser εµφανίζει αστεράκια ή τελείες αντί για τους χαρακτήρες. Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7b.html µέσα στο http://infoman.teikav.edu.gr/~username/page7b.html (όπου username είναι το προσωπικό 4. ηµιουργία πλαισίων επιλογής (check boxes) Με αυτόµατο κιβώτιο ταχυτήτων: <INPUT type="checkbox" name="auto"><br> Με δερµάτινα καθίσµατα: <INPUT type="checkbox" name="leather"> 2
Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7c.html µέσα στο http://infoman.teikav.edu.gr/~username/page7c.html (όπου username είναι το προσωπικό 5. ηµιουργία πλήκτρων επιλογής (radio buttons) Άνδρας: <INPUT type="radio" checked name="sex" value="male"><br> Γυναίκα: <INPUT type="radio" name="sex" value="female"> Όταν κάνουµε κλικ σε κάποιο από τα radio-buttons ενεργοποιείται και τα υπόλοιπα απενεργοποιούνται. Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7d.html µέσα στο http://infoman.teikav.edu.gr/~username/page7d.html (όπου username είναι το προσωπικό 3
6. ηµιουργία πλαισίου επιλογής µε λίστα (I) <SELECT name="f1cars"> <OPTION value="ferrari"> Ferrari <OPTION value="mclaren"> Mclaren <OPTION value="williams"> Williams <OPTION value="minardi"> Minardi </SELECT> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7e.html µέσα στο http://infoman.teikav.edu.gr/~username/page7e.html (όπου username είναι το προσωπικό 4
7. ηµιουργία πλαισίου επιλογής µε λίστα (II) <SELECT name="f1cars"> <OPTION value="ferrari"> Ferrari <OPTION value="mclaren"> Mclaren <OPTION value="williams"> Williams <OPTION value="minardi" selected> Minardi </SELECT> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7f.html µέσα στο http://infoman.teikav.edu.gr/~username/page7f.html (όπου username είναι το προσωπικό 8. ηµιουργία πλαισίου κειµένου πολλών γραµµών <TEXTAREA rows="10" cols="30"> Μέσα στο πλαίσιο κειµένου πολλών γραµµών µπορείτε να εισάγετε µεγάλο κείµενο. </TEXTAREA> 5
Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7g.html µέσα στο http://infoman.teikav.edu.gr/~username/page7g.html (όπου username είναι το προσωπικό 9. Σελίδα µε πλαίσια εισαγωγής κειµένου και πλήκτρο αποστολής Όνοµα: <INPUT type="text" name="firstname" value="mickey"><br> Επώνυµο: <INPUT type="text" name="lastname" value="mouse"><br> <INPUT type="submit" value="αποστολή"> Με κλίκ στο πλήκτρο Αποστολή στέλνουµε τα στοιχεία στο script program.tcl Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7h.html µέσα στο http://infoman.teikav.edu.gr/~username/page7h.html (όπου username είναι το προσωπικό 6
10. Σελίδα µε πλαίσια επιλογής (check boxes) και πλήκτρο αποστολής Με αυτόµατο κιβώτιο ταχυτήτων: <INPUT type="checkbox" name="auto"><br> Με δερµάτινα καθίσµατα: <INPUT type="checkbox" name="leather"><br> <INPUT type="submit" value="αποστολή"> Με κλικ στο πλήκτρο Αποστολή στέλνουµε τα στοιχεία στο script program.tcl Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7i.html µέσα στο http://infoman.teikav.edu.gr/~username/page7i.html (όπου username είναι το προσωπικό 7
11. Σελίδα µε πλήκτρα επιλογής (radio buttons) και πλήκτρο αποστολής Άνδρας: <INPUT type="radio" name="sex" value="male" checked><br> Γυναίκα: <INPUT type="radio" name="sex" value="female"><br> <INPUT type ="submit" value ="Αποστολή"> Με κλικ στο πλήκτρο Αποστολή στέλνουµε τα στοιχεία στο script program.tcl Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7j.html µέσα στο http://infoman.teikav.edu.gr/~username/page7j.html (όπου username είναι το προσωπικό 12. Αποστολή email µε τη χρήση φόρµας εισαγωγής κειµένου <FORM action="mailto:mardiris@teikav.edu.gr" method="post" enctype="text/plain"> 8
<H3>Αυτή η φόρµα στέλνει ένα e-mail.</η3> Όνοµα:<BR> <INPUT type="text" name="name" value="******" size="20"><br> Mail:<BR> <INPUT type="text" name="mail" value="*****@******" size="20"><br> Σχόλιο:<BR> <INPUT type="text" name="comment" value="yourcomment" size="40"><br><br> <INPUT type="submit" value="αποστολή"> <INPUT type="reset" value=" ιαγραφή Όλων"> Να αποθηκέψετε τον παραπάνω κώδικα HTML σε αρχείο µε όνοµα page7k.html µέσα στο http://infoman.teikav.edu.gr/~username/page7k.html (όπου username είναι το προσωπικό 9