Εισαγωγή στις Forms

1. Εισαγωγή στις Forms 2004, Δημήτριος Βογιατζής

2. Εισαγωγή στην Ενότητα • Tι είναι οι Forms; • Πως χρησιμοποιούνται στο web; • Mark-up εντολές για εισαγωγή forms • Δεν θα μιλήσουμε για μεθόδους συγγραφής CGI scripts που χρησιμοποιούνται με forms 2004, Δημήτριος Βογιατζής

3. Περί forms • Οι Forms  υποβολή πληροφοριών στον web administrator με • Πλαίσια κειμένου, πλήκτρα, checkboxes, menu και κυλιόμενες λίστες • Πχ. εταιρίες τις χρησιμοποιούν για παραγγελίες, δημοσκοπήσεις, ταυτοποίηση χρηστών, και για παροχή σχολίων από τους χρήστες • Η form συλλέγει στοιχεία από το χρήστη • Για την επεξεργασία χρειάζεται το Common Gateway Interface (CGI) • Δεν χρειάζεστε CGI για τις απλές forms που θα δούμε στο μάθημα 2004, Δημήτριος Βογιατζής

4. Form στον browser 2004, Δημήτριος Βογιατζής

5. Παράδειγμα, form με πλαίσια κειμένου • Mία απλή form με για πλαίσια κειμένου (text boxes) μπορεί να γίνει ως εξής: <form method="post" action="mailto:user@domain.com" enctype="text/plain"> Enter first name: <input type="text" name="first" size="15" /> <br /> Enter last name: <input type="text" name="last" size="20" /> <br /><br /> <input type="submit" value="Send" /> <input type="reset" value="clear" /> </form> 2004, Δημήτριος Βογιατζής

6. Επεξηγώντας τα tags: form, post, action • <form>…</form> • Το βασικό form tags λέει στον browser να επιδείξει μία form. • Ο τύπος των πεδίων μέσα στην form εξαρτάται από τα στοιχεία που περικλείονται μεταξύ των δύο παραπάνω tags • method="post" • Λέει στον browser πώς να στείλει την πληροφορία στον web server Post= επεξεργασία γραμμή προς γραμμή. • action="url ή mailto" • Ιδανικά το URL που βρίσκεται το CGI script (π.χ. www.domain.com/cgi-bin/orderform.pl • Εναλλακτικά ή διεύθυνση email στην οποία θα πάει η πληροφορία • Τα δεδομένα θα πάνε στο κείμενο του μηνύματος 2004, Δημήτριος Βογιατζής

7. Επεξηγώντας τα tags: enctype • enctype="text/plain" • Πως θα υποβληθούν τα δεδομένα • Υποβολή σε email  text/plain • Η form που φτιάξαμε ζητάει από ένα χρήστη να βάλει όνομα και επώνυμο και μετά να πατήσει το submit • Στο email θα ληφθεί • first=Rodia • last=Rascolnikov • Εάν το enctype παραληφθεί, τα δεδομένα θα σταλούν σε μία γραμμή ως • first=Ralph&last=Phillips. 2004, Δημήτριος Βογιατζής

8. Περισσότερα: Text boxes • <input type="text" name="fieldname" size="15" /> • size="number" • Μέγεθος πεδίου textbox=15 χαρακτήρες15 χαρακτήρες εμφανίζονταιδεν περιορίζει αυτούς που μπορούν να εισαχθούν • value="text" • εμφανίζεται κείμενο στο text box. • maxlength="number" • Μέγιστος αριθμός χαρακτήρων που μπορεί να εισαχθεί στο text box 2004, Δημήτριος Βογιατζής

9. Πλαίσια κειμένου για κωδικούς (passwords) • <input type="password" name="password" size="10" /> • Τα πλαίσια κωδικών (password boxes) επιτρέπουν την εισαγωγή κωδικού • Αυτός θα επεξεργαστεί από CGI script για να επιτρέψει ή όχι πρόσβαση χρήστη • Στο password box εμφανίζονται αστερίσκοι (*) για ασφάλεια • Ελάχιστη ασφάλεια γιατί το password υποβάλλεται στον sever ως απλό κείμενο • Όποιος έχει πρόσβαση στο δίκτυο μπορεί να δει τα passwords 2004, Δημήτριος Βογιατζής

10. Checkbox • Checkboxes, radio buttons, και μενού επιτρέπουν στο χρήστη να επιλέξει από ένα κατάλογο Τι κατοικίδια έχετε;<br /> <input type="checkbox" name="bird" />πουλιά <br /> <input type="checkbox" name="cat" />γάτες <br /> <input type="checkbox" name="dog" />σκυλιά <br /> <input type="checkbox" name="rept" />ερπετά <br /> <input type="checkbox" name="fish" />ψάρια <br /> • checked="checked“ • Η ιδιότητα checked σε ένα στοιχεία εισόδου(input element) σημαίνει ότι έχουμε εξ’ορισμού επιλογή • Μπορεί να χρησιμοποιηθεί σε πολλά text boxes αλλά μόνο σε ένα radio button 2004, Δημήτριος Βογιατζής

11. Checkbox 2004, Δημήτριος Βογιατζής

12. Radio Buttons • Τα Radios buttons είναι σχεδόν όπως τα check boxes • Όμως στα radio buttons ο χρήστης διαλέγει μόνο ένα από τις επιλογές που έχει • στα Checkboxes ο χρήστης μπορεί να επιλέξει περισσότερα στοιχεία • Τα radio buttons για το ίδιο θέμα πρέπει να έχουν το ίδιο όνομα αλλά διαφορετικές ιδιότητες • The different radio buttons for the same topic must all have the same name, but the value attributes are all different 2004, Δημήτριος Βογιατζής

13. Radio buttons 2004, Δημήτριος Βογιατζής

14. Radio buttons, κώδικας Σε ποιό παράρτημα του Παν.Κύπρου έχετε τα περισσότερα μαθήματα; <br /> <input type="radio" name="campus" value="central" /> Κεντρικά <br /> <input type="radio" name="campus" value="latsia" /> Λατσιά <br /> <input type="radio" name="campus" value="panep"/> Πανεπιστιμιούπολις<br /> 2004, Δημήτριος Βογιατζής

15. Συνημμένα αρχεία • H form για attachments θα επιτρέψει στον χρήστη να στείλει αρχείο • Αυτό χρειάζεται και CGI script • Υποβολή βιογραφικού: • <input type="file" name="resume" /> 2004, Δημήτριος Βογιατζής

16. Υποβολή και καθαρισμός (submit and reset) • Κάθε form πρέπει να παρέχει στο χρήστη τη δυνατότητα να υποβάλλει πληροφορίας • Επίσης χρήσιμο είναι και ο καθαρισμός • <input type="submit" value="Send Info" /> • <input type="reset" value="Clear Form" /> 2004, Δημήτριος Βογιατζής

17. Υποβολή με εικόνα • Χρήση εικόνας για το πλήκτρο υποβολήταιριάζει με το site • To εξ’ορισμού πλήκτρο είναι γκρί • Για παράδειγμα μπορείτε να έχετε το • <input type="image" name="feedback" src="image.gif" width=119 height=22 border="0" alt="send info" /> 2004, Δημήτριος Βογιατζής

18. Πλήκτρα • Μπορείτε να έχετε πλήκτρα • Συνήθως υπάρχει από κάτω ένα CGI script που επεξεργάζεται την πληροφορία • Εναλλακτικά χρησιμοποιούνται για πλοήγηση όταν συνδυάζονται με με το onClick της JavaScript • <input type="button" name="home" value="Go Home" onClick="parent.location='http://www.cs.ucy.ac.cy'" /> • Μπορείτε να φτιάξετε μία ολόκληρη toolbar από buttons, όπου το κάθε button θα έχει και δική του εικόνα • <button name=“ucyink" value="usyhome" type="button" onClick="parent.location='http://www.ucy.ac.cy'"> <img src=“ucy.gif" /></button> Τα πλήκτρα δεν είναι απαραίτητο να βρίσκονται μέσα σε form 2004, Δημήτριος Βογιατζής

19. Μενού (συνέχεια) • Τα drop-down menu επιτρέπουν επιλογή από ένα menu • Tα drop down καταλαμβάνουν λιγότερο χώρο από τα checkboxes ή τα radio buttons • Tα Drop-down δεν χρησιμοποιούν το input element • Αντίθεταχρησιμοποιούν το selectκαιτο option element <select name="schools" size="1"> <option value="usf" label=“Τμήμα Πληροφορικής"> Τμήμα Πληροφορικής </option> <option value="ucf" label=" Τμήμα Μαθηματικών "> Τμήμα Μαθηματικών</option> <option value="uf" label=«Τμήμα Βιολογίας"> Τμήμα Βιολογίας</option> </select> 2004, Δημήτριος Βογιατζής

20. Παράδειγμα Μενού (συνέχεια) 2004, Δημήτριος Βογιατζής

21. Μενού (συνέχεια) • name="text" • Όνομα μενού επιλογών • size="number" • Αριθμός επιλογών που θα εμφανίζονται προ της ενεργοποίησης του μενού • multiple="multiple” • Στο element select: Μετατρέπει το μενού από drop down σε scrolling • selected="selected" • Μέσα στο option element. • Η εξ’ορισμού επιλογή • Εάν το multiple attribute δεν χρησιμοποιηθεί τότε μόνο ένα element μπορεί να έχει την selected • Αν δεν χρησιμοποιηθεί ή selected τότε η πρώτη επιλογή είναι η εξ’ορισμού. • Eαν το multiple attribute είναι μέσα σε ένα select element, η selected attribute μπορεί να υπάρχει σε πολλές επιλογές • value="text" • Στο option element. Προσδιορίζει το option που επελέγη όταν υποβληθεί η form. • Κάθε option διαφορετική τιμή • label="text" • Στο option element. Προαιρετικό. Οι Browsers will θα το δείξουν ως option label. 2004, Δημήτριος Βογιατζής

22. Περιοχή κειμένου • Οι χρήστες μπορούν να υποβάλλουν κείμενο με το text type input • Για περισσότερο χώρο υπάρχει το text area • <textarea name="comment" rows="5" cols="50"> • Type your comment then click the submit button. • </textarea> 2004, Δημήτριος Βογιατζής

23. Tabs • Στις web form κίνηση από πεδίο σε πεδίο με το Tab • Τα πεδία του form θα ενεργοποιηθούν με τη σειρά που τα έχετε καταγράψει στο xhtml κείμενο • Αλλά, μπορείτε να αλλάξετε τη σειρά με το tabindexattribute • Αυτό μπορεί να εφαρμοστεί σε πίνακες αν ο χρήστης πρέπει να βάζει πληροφορίες ανά στήλη <input tabindex="1" type="text" name="last" size="20" /> <input tabindex="2" type="text" name="first" size="15" /> <input tabindex="3" type="submit" /> • Τα πεδία θα ενεργοποιηθούν ανάλογα με τη σειρά των τιμών tabindex • Από το 13 2004, Δημήτριος Βογιατζής

24. 2004, Δημήτριος Βογιατζής

25. <form method="post" action="mailto:userid@youremail.com" enctype="text/plain"> Last name, First name, Middle Initial<br /> <input type="text" name="last" size="20" /> <input type="text" name="first" size="15" /> <input type="text" name="mi" size="1" maxlength="1" /> <br /><br /> Web Address:<br /> <input type="text" name="web" size="40"value="http://" /> <br /><br /> What are your hobbies?<br /> <input type="checkbox" name="dancing" />Dancing <input type="checkbox" name="swimming" />Swimming <input type="checkbox" name="inline" />Inline Skating <input type="checkbox" name="reading" />Reading <br /><br /> What is your marital status?<br /> <input type="radio" name="status" value="decline" checked="checked" />Decline to answer <input type="radio" name="status" value="single" />Single <input type="radio" name="status" value="married" />Married <input type="radio" name="status" value="partner" />Living with Partner <br /><br /> Gender: <select name="gender" size="1"> <option value="decline">Decline</option> <option value="female">Female</option> <option value="male">Male</option> </select> <br /><br /> Please leave a comment:<br /> <textarea name="comment" rows="5" cols="35"> </textarea> <br /><br /><hr /> <input type="submit" Value="Submit Entry" /> </form> κώδικας,προηγούμενης form 2004, Δημήτριος Βογιατζής

26. <input tabindex="1" type="text" name="last" • size="20" /> • <input tabindex="2" type="text" name="first" • size="15" /> • <input tabindex="3" type="submit" /> 2004, Δημήτριος Βογιατζής