Σχεδιασμός και Ανάπτυξη Ιστότοπων

Transcript

1 Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML: Φόρμες Παρουσίαση 18 η 1 Βελώνης Γεώργιος Καθηγητής

2 Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome Mozilla FireFox Yandex Internet Explorer Safari Opera

3 Εισαγωγή Τα περισσότερα sites που επισκεπτόμαστε κατά την περιήγησή μας στο Διαδίκτυο, επιτρέπουν την αμφίδρομη επικοινωνία. Δεν παρέχουν απλά πληροφορίες προς τους επισκέπτες, αλλά τους δίνουν τη δυνατότητα να πληκτρολογούν στοιχεία, όπως για παράδειγμα να κάνουν μια παραγγελία, να ανεβάσουν τις απόψεις στους σε ένα blog, να εγγραφούν σε ένα φόρουμ και πολλά άλλα. Αυτή η αμφίδρομη επικοινωνία επιτυγχάνεται μέσω των φορμών. Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του Παγκοσμίου Ιστού, επιτρέποντας στους χρήστες να επικοινωνούν με τη βοήθεια του κειμένου και των γραφικών της οθόνης αλληλεπιδραστικά. 3

4 Εισαγωγή Οι φόρμες επιτρέπουν τη δημιουργία πεδίων στα οποία ο χρήστης εισάγει πληροφορίες ή επιλέγει μεταξύ κάποιων προεπιλογών. Αυτό επιτυγχάνεται με στοιχεία εισόδου, όπως είναι τα πεδία κειμένου, στοιχεία επιλογής (checkbox και radio buttons), κουμπιά (υποβολής, επαναφοράς της φόρμας, κ.λπ.) κ.ά. Μεταξύ αυτών των στοιχείων μια φόρμα μπορεί να περιέχει επίσης λίστες επιλογής, περιοχές κειμένου, ετικέτες κ.ά. Όταν αποσταλούν οι πληροφορίες, αυτές συλλέγονται από ένα πρόγραμμα (script) στο διακομιστή (server) για περαιτέρω επεξεργασία. 4

5 Η ετικέτα <FORM> Η δομή της Η ετικέτα <form> δείχνει την αρχή μιας φόρμας και το </form> το τέλος. Η γενική μορφή της δήλωσης είναι η παρακάτω: <form> </form>.. Στοιχεία φόρμας.. Ορίζοντας μια φόρμα πρέπει να καθορίσουμε: το περιεχόμενο, τη διεύθυνση στην οποία θα σταλεί, και τον τρόπο με τον οποίο θα σταλεί. Default CSS form { display: block; margin-top: 0em; } 5

6 Η ετικέτα <FORM> Ιδιότητες Η ετικέτα form μπορεί να έχει τις παρακάτω ιδιότητες: accept-charset: Ορίζει τις κωδικοποιήσεις χαρακτήρων που πρόκειται να χρησιμοποιηθούν για την υποβολή της φόρμας. Η προεπιλεγμένη τιμή είναι το δεσμευμένο string "Unknown" (δηλώνει ότι η κωδικοποίηση είναι ίδια με την κωδικοποίηση του εγγράφου που περιέχει το στοιχείο <form>). Σύνταξη: <form accept-charset="character_set"> Όπου character_set είναι μια διαχωρισμένη με κενά λίστα με μία ή περισσότερες κωδικοποιήσεις χαρακτήρων που θα χρησιμοποιηθεί για την υποβολή της φόρμας. 6

7 Η ετικέτα <FORM> Ιδιότητες Συνέχεια accept-charset: Οι πιο κοινές κωδικοποιήσεις είναι οι: UTF-8: κωδικοποίηση Unicode ISO : κωδικοποίηση για το λατινικό αλφάβητο. <form action="example.asp" accept-charset="iso "> Θεωρητικά μπορεί να χρησιμοποιηθεί οποιαδήποτε κωδικοποίηση χαρακτήρων αλλά δεν αναγνωρίζονται όλες πάντοτε από τους browsers. Όσο πιο ευρέως διαδεδομένη είναι η κωδικοποίηση χαρακτήρων που χρησιμοποιείται, τόσο μεγαλύτερη είναι η πιθανότητα ένας browser να ερμηνεύει σωστά τα περιεχόμενα της ιστοσελίδας. 7

8 Η ετικέτα <FORM> Ιδιότητες action: Ορίζει τη διεύθυνση (URL) του server η οποία θα δεχτεί το περιεχόμενο της φόρμας. Αν δεν οριστεί καμία διεύθυνση, τότε επιστρέφει το περιεχόμενο της φόρμας στη διεύθυνση απ όπου προέρχεται η σελίδα. Σύνταξη: <form action="url"> enctype: Ορίζει το πώς τα δεδομένα της φόρμας θα πρέπει να είναι κωδικοποιημένα κατά την υποβολή στον server και μπορεί να χρησιμοποιηθεί μόνο αν η τιμή της ιδιότητας method είναι post (βλέπετε διαφάνεια 9). Σύνταξη: <form enctype="value"> 8

9 Η ετικέτα <FORM> Ιδιότητες Συνέχεια enctype Τιμές της value: application/x-www-form-urlencoded: Default τιμή. Όλοι οι χαρακτήρες κωδικοποιούνται πριν από την αποστολή τους (τα κενά μετατρέπονται σε "+" σύμβολα και οι ειδικοί χαρακτήρες μετατρέπονται σε ASCII με HEX τιμές). multipart/form-data: Δεν κωδικοποιούνται οι χαρακτήρες. Η τιμή αυτή είναι απαραίτητη όταν χρησιμοποιείτε φόρμες που έχουν ένα στοιχείο ελέγχου αποστολής αρχείων. text/plain: Τα κενά μετατρέπονται σε "+" σύμβολα, αλλά οι ειδικοί χαρακτήρες δε κωδικοποιούνται. 9

10 Η ετικέτα <FORM> Ιδιότητες method: Ορίζει τον τρόπο αποστολής των πληροφοριών. Οι τιμές της ιδιότητας method είναι μία από τις post και get. Για κάθε πεδίο της φόρμας, ο browser στέλνει στο server ζεύγη της μορφής όνομα_πεδίου=τιμή. Με τη μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που «δείχνει» η ιδιότητα action και χωρίζονται με το σύμβολο «&» (URL?όνομα_πεδίου=τιμή&όνομα_πεδίου=τιμή). Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL. Πιο συγκεκριμένα, στέλνονται μέσα στα ΗΤΤP μηνύματα που στέλνει ο browser και δε τα βλέπει ο χρήστης. Σύνταξη: <form method="post get"> Παράδειγμα: <form name="f1" action="../cgi-bin/mycgi.pl" method="post"> 10

11 Η ετικέτα <FORM> Ιδιότητες name: Ορίζει το όνομα της φόρμας και χρησιμοποιείται για την αναφορά των δεδομένων σε σενάρια JavaScript ή για την αναφορά στα στοιχεία αυτά μετά την υποβολή τους. Σύνταξη: <form name="κείμενο"> target: Ορίζει ένα όνομα ή μια λέξη-κλειδί που υποδεικνύει που θα εμφανιστεί η απάντηση που θα ληφθεί μετά την υποβολή της φόρμας. Πιο συγκεκριμένα, ορίζει ένα όνομα ή μια λέξη-κλειδί για ένα πλαίσιο περιήγησης (π.χ. καρτέλα, παράθυρο ή ενσωματωμένο πλαίσιο). Σύνταξη: <form target="_blank _self _parent _top framename"> Παράδειγμα: <form action="myform.asp" method="get" target="_self"> 11

12 Η ετικέτα <FORM> Ιδιότητες Συνέχεια target Τιμές: _blank: Η απάντηση εμφανίζεται σε ένα νέο παράθυρο ή καρτέλα. _self: Η απάντηση εμφανίζεται στο ίδιο πλαίσιο (default τιμή). _parent: Η απάντηση εμφανίζεται στο μητρικό πλαίσιο. _top: Η απάντηση εμφανίζεται σε όλο το σώμα του παραθύρου. framename: Η απάντηση εμφανίζεται στο ονοματισμένο iframe ("παράθυρο" μέσα σε μια σελίδα). 12

13 Η ετικέτα <FORM> HTML5 Νέα πεδία και ιδιότητες Η HTML5 έχει εισάγει αρκετά νέα πεδία και ιδιότητες, τόσο στην ίδια τη <form>, όσο και στα στοιχεία που υποστηρίζει. Τα πεδία αυτά πετυχαίνουν την καλύτερη διαχείριση των δεδομένων της φόρμας, αλλά και τον αυτόματο έλεγχο (validation) των τιμών που πληκτρολογεί ο χρήστης πριν την υποβολή της, χωρίς να χρειάζεται κώδικας JavaScript, όπως γινόταν στις προγενέστερες εκδόσεις της HTML. 13

14 Η ετικέτα <FORM> Ιδιότητες Οι νέες ιδιότητες που περιέχει η HTML5 στις φόρμες είναι οι παρακάτω: autocomplete: Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με στοιχεία που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στην συγκεκριμένη ιστοσελίδα. Η ύπαρξη της ιδιότητας autocomplete στην ετικέτα <form> επηρεάζει όλα τα πεδία της φόρμας. Σύνταξη: <form autocomplete="on off"> 14

15 Η ετικέτα <FORM> Ιδιότητες Συνέχεια autocomplete Τιμές: on: Default τιμή. Ο browser θα συμπληρώσει αυτόματα τις τιμές βάσει των τιμών που ο χρήστης έχει εισάγει από πριν. off: Χωρίς αυτόματες καταχωρήσεις. novalidate: Κάθε φορά που γίνεται υποβολή (submit), η ιδιότητα novalidate, δεν επιτρέπει τον αυτόματο έλεγχο της ορθότητας των τιμών που πληκτρολογούν οι χρήστες στα πεδία της φόρμας. Σύνταξη: <form novalidate> 15

16 Η ετικέτα <FORM> Στοιχεία φόρμας Μπορούμε να τοποθετήσουμε ανάμεσα στο <FORM> και το </FORM> όσα και όποια από τα παρακάτω πεδία μας είναι απαραίτητα: <input> <textarea> <button> <select> <keygen> <output> <fieldset> <label> 16

17 Η ετικέτα <FORM> Πρακτική άσκηση Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες της form HTML Form Attributes 17

18 Η ετικέτα <INPUT> Ιδιότητες Το στοιχείο <input> επιτρέπει να συλλέξουμε πληροφορίες και έχει τις ακόλουθες ιδιότητες και περιορισμούς που λειτουργούν σε όλα τα γνωστά προγράμματα περιήγησης (browsers): accept: Ορίζει τους τύπους των αρχείων που δέχεται ο server (που μπορούν να υποβληθούν μέσω αποστολής αρχείου) και χρησιμοποιείται μόνο όταν η τιμή της ιδιότητας type είναι file (<input type="file">, βλέπε διαφάνεια 24). Σύνταξη: <input accept="file_extension audio/* video/ * image/* media_type"> Σημείωση: Μπορείτε να ορίσετε περισσότερες από μία τιμές, αρκεί να τις διαχωρίστε με κόμμα (π. χ. <input accept="audio/*,video/*,image/*">. 18

19 Η ετικέτα <INPUT> Ιδιότητες Συνέχεια accept: Παραδείγματα: <input type="file" accept=".xls,.xlsx"> <input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx"> <input type="file" accept="image/*"> <input type="file" accept="image/x-png, image/gif, image/jpeg"> Σημείωση: Εδώ μπορείτε να βρείτε πληροφορίες για όλα τα διαθέσιμα media_types. 19

20 Η ετικέτα <INPUT> Ιδιότητες checked: Δείχνει επιλεγμένο ένα check box ή ένα radio button όταν ξεκινά η εμφάνισή τους στην οθόνη. Σύνταξη: <input checked> Παράδειγμα: <input type="checkbox" checked> disabled: Ορίζει ότι ένα πεδίο εισαγωγής θα πρέπει να απενεργοποιηθεί. Σύνταξη: <input disabled> Παράδειγμα: <input type="text" disabled> maxlength: Ορίζει το μέγιστο επιτρεπτό πλήθος των χαρακτήρων σε πεδία κείμενου, όπως text, password, κ.λπ. Σύνταξη: <input maxlength="αριθμός "> Παράδειγμα: <input type= "text" maxlength="20"> 20

21 Η ετικέτα <INPUT> Ιδιότητες name: Ορίζει το όνομα των δεδομένων και είναι υποχρεωτικό. Σύνταξη: <input name="κείμενο"> Παράδειγμα: <input type="text" name="lastname"> readonly: Ορίζει ότι ένα πεδίο εισαγωγής είναι μόνο για ανάγνωση (δε μπορεί να αλλάξει η τιμή που περιέχει, αλλά μπορεί να επιλεγεί και να αντιγραφεί). Σύνταξη: <input readonly> Παράδειγμα: <input type="text" readonly> size: Ορίζει το μέγεθος ενός πεδίου κειμένου σε χαρακτήρες. Σύνταξη: <input size="αριθμός"> Παράδειγμα: <input type="text" size="25"> 21

22 Η ετικέτα <INPUT> Ιδιότητες value: Ορίζει την τιμή ενός στοιχείου της <input>. Σύνταξη: <input value="κείμενο"> Παράδειγμα: <input type="text" name="fname" value="anna"> Σημείωση: Η ιδιότητα value δε μπορεί να χρησιμοποιηθεί όταν η τιμή της ιδιότητας type είναι file (βλέπετε διαφάνεια 24). accesskey: Καθορίζει με ποιο συνδυασμό πλήκτρων, πατώντας το πλήκτρο Alt (π.χ. Alt+1), θα ενεργοποιείται ένα συγκεκριμένο στοιχείο της φόρμας. Παράδειγμα: <input type="text" name="fname" accesskey="1"> 22

23 Η ετικέτα <INPUT> Ιδιότητες tabindex: Καθορίζει με ποια σειρά θα γίνεται ενεργό το κάθε στοιχείο της φόρμας όταν πατηθεί το πλήκτρο Tab. Παράδειγμα: <input type="text" name="fname" tabindex="1"> type: Ορίζει τον τύπο του στοιχείου της Φόρμας (Πεδίο Κειμένου, Περιοχή Κειμένου, Κουμπί Επιλογών, Κουμπί Πολλαπλών Επιλογών, Πεδίο Password, Εικόνα, κ.λπ.). Σύνταξη: <input type="button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week"> 23

24 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE button: Εισάγει ένα κουμπί στη φόρμα το οποίο ως επί το πλείστον χρησιμοποιείται με τη Javascript για την ενεργοποίηση ενός σεναρίου (script), μέσω ενός συμβάντος (onclick, onfocus, κ.λπ.). Παράδειγμα: <input type="button" value="υπολόγισε" onclick="fact()"> checkbox: Εμφανίζει ένα απλό ορθογώνιο (check box) και μπορούμε να επιλέξουμε από καμία μέχρι και όλες τις επιλογές από το σύνολο των δυνατών επιλογών. Η ιδιότητα name κάθε κουμπιού επιλογής της ομάδας πρέπει να έχει διαφορετική τιμή στο κάθε κουμπί. Παράδειγμα: <p><input type="checkbox" name= "c1" value="red">κόκκινο <p><input type="checkbox" name= "c2" value= "blue">μπλε 24

25 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE file: Ορίζει ένα πεδίο επιλογής αρχείου και ένα κουμπί "Browse..." για το ανέβασμα (upload) αρχείων. Παράδειγμα: <input type="file" name="doc1"> hidden: Δεν εμφανίζει τίποτε στην οθόνη και επιτρέπει να κρύψουμε ένα πεδίο <input> από τον επισκέπτη της σελίδας. Χρησιμοποιούμε κρυφά πεδία όταν θέλουμε να περάσουμε σε αρχεία script κρυφές τιμές μαζί με τις υπόλοιπες τιμές που πληκτρολογεί ή επιλέγει ο επισκέπτης. Παράδειγμα: <input type="hidden" name="country" value="greece"> 25

26 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE image: Κάνει ότι και ο τύπος submit με τη διαφορά ότι εμφανίζει μία εικόνα που επιλέγουμε στη θέση του κουμπιού. Ο τύπος image συνοδεύεται υποχρεωτικά από την ιδιότητα src, η οποία καθορίζει τη διαδρομή (path) και το όνομα του αρχείου της εικόνας που θέλουμε να εμφανιστεί. Παράδειγμα: <input type="image" src="./submit1.gif" alt="υποβολή" width= "35" height="35"> 26

27 Η ετικέτα <INPUT> Ιδιότητες του τύπου IMAGE align: Ορίζει τη στοίχιση μιας εικόνας σύμφωνα με τα στοιχεία που την περιβάλουν. Από τις τιμές που παίρνει μόνο η left και η right λειτουργούν το ίδιο σωστά σε όλους τους browsers. Σύνταξη: <input align="left right middle top bottom"> Σημείωση: Η ιδιότητα align δεν υποστηρίζεται από την HTML5 και αντ αυτής χρησιμοποιούνται CSS. Αν και «ξεπερασμένη», συνεχίζει να υποστηρίζεται ακόμη από τους γνωστότερους browsers, όπως επίσης και οι ιδιότητες border, hspace και vspace. Παράδειγμα: <input type="image" style="float:right"> 27

28 Η ετικέτα <INPUT> Ιδιότητες του τύπου IMAGE alt: Παρέχει ένα εναλλακτικό κείμενο για τον χρήστη, αν για κάποιο λόγο δε μπορεί να φορτωθεί από το browser η εικόνα. Σύνταξη: <input alt="κείμενο"> border: Ορίζει το πλάτος του περιγράμματος γύρω από μια εικόνα. Σύνταξη: <input border="pixels"> Παράδειγμα: <input type="image" src="button.gif" border="5" alt="υποβολή"> Σημείωση: Η ιδιότητα border δεν υποστηρίζεται από την HTML5 και αντ αυτής χρησιμοποιούνται CSS. Παράδειγμα: <input type="image" src="button.gif" style="border:5px"> 28

29 Η ετικέτα <INPUT> Ιδιότητες του τύπου IMAGE height: Ορίζει το ύψος μιας εικόνας. Σύνταξη: <input height="pixels"> hspace: Ορίζει το κενό διάστημα στην αριστερή και δεξιά πλευρά της εικόνας. Σύνταξη: <input hspace="pixels"> Παράδειγμα: <input type="image" src="button1.gif" height="30" hspace="15"> Σημείωση: Η ιδιότητα hspace δεν υποστηρίζεται από την HTML5 και αντ αυτής χρησιμοποιούνται CSS. Παράδειγμα: <input type="image" src="button1.gif" style="margin: 0px 15px"> 29

30 Η ετικέτα <INPUT> Ιδιότητες του τύπου IMAGE vspace: Ορίζει το κενό διάστημα στην κορυφή και στο κάτω μέρος της εικόνας. Σύνταξη: <input vspace="pixels"> Παράδειγμα: <input type="image" src="button1.gif" width="30" vspace="15"> Σημείωση: Η ιδιότητα vspace δεν υποστηρίζεται από την HTML5 και αντ αυτής χρησιμοποιούνται CSS. Παράδειγμα: <input type="image" src="button1.gif" style="margin:20px"> width: Ορίζει το πλάτος μιας εικόνας. Σύνταξη: <input width="pixels"> 30

31 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE Ιδιότητες παράκαμψης: Οι ιδιότητες αυτές, παρακάμπτουν συγκεκριμένες λειτουργίες τις οποίες ορίζουν άλλες ιδιότητες στην ετικέτα <form>, τοποθετούνται στα πεδία με input type="submit" και input type="image" και είναι οι εξής: formaction: παρακάμπτει την ιδιότητα action formenctype: παρακάμπτει την ιδιότητα enctype formmethod: παρακάμπτει την ιδιότητα method formnovalidate: παρακάμπτει την ιδιότητα novalidate (δεν υποστηρίζεται από τον Safari) formtarget: παρακάμπτει την ιδιότητα target (δεν υποστηρίζεται από τον Safari) 31

32 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE formaction: Ορίζει ένα εναλλακτικό URL, για το αρχείο που θα επεξεργαστεί τα δεδομένα της φόρμας όταν γίνει υποβολή, παρακάμπτοντας το URL της ιδιότητας action της <form>. Σύνταξη: <input formaction="url"> Παράδειγμα: <form action="examle_form.asp">.. <p><input type="submit" value="υποβολή"> <p><input type="image" src="./button1.gif" formaction="example_form_admin.asp" alt="υποβολή ως administrator"> </form> 32

33 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE formenctype: Ορίζει το πώς θα πρέπει να είναι κωδικοποιημένα τα δεδομένα της φόρμας κατά την υποβολή τους στο server (μόνο για method="post"), παρακάμπτοντας την ιδιότητα enctype της <form>. Σύνταξη: <input formenctype="value"> Παράδειγμα: <form action="examle_form.asp" method="post">.. <p><input type="submit" value="υποβολή"> <p><input type="image" src="./button1.gif" formenctype="text/plain" alt="υποβολή ως text/plain"> </form> Για τις τιμές που μπορεί να πάρει η value βλέπε διαφάνεια 8. 33

34 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE formmethod: Ορίζει τη μέθοδο HTTP με την οποία θα σταλούν τα δεδομένα της φόρμας στο URL που θα τα επεξεργαστεί, παρακάμπτοντας την ιδιότητα method της <form>. Σύνταξη: <input formmethod="get post"> Παράδειγμα: <form action="examle_post_form.asp" method="post">.. <p><input type="submit" value="υποβολή"> <p><input type="image" src="./button1.gif" formmethod= "get" formaction="examle_get_form.asp" alt="υποβολή με τη μέθοδο get"> </form> 34

35 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE formnovalidate: Η ιδιότητα novalidate είναι boolean και όταν δηλώνεται ορίζει ότι το <input> στοιχείο δε θα πρέπει να επικυρωθεί κατά την υποβολή του. Σύνταξη: <input formnovalidate="formnovalidate"> (επίσης <input formnovalidate> ή <input formnovalidate="">) Παράδειγμα: <form action="examle_form.asp">.. <p><input type="submit" value="υποβολή"> <p><input type="image" src="./button1.gif" formnovalidate="" alt="υποβολή χωρίς επικύρωση"> </form> 35

36 Η ετικέτα <INPUT> Ιδιότητες παράκαμψης του τύπου IMAGE formtarget: Ορίζει ένα όνομα ή μια λέξη-κλειδί που υποδεικνύει που θα εμφανιστεί η απάντηση που θα ληφθεί μετά την υποβολή της φόρμας, παρακάμπτοντας την ιδιότητα target της <form>. Σύνταξη: <input formtarget="_blank _self _parent _top framename"> Παράδειγμα: <form action="examle_form.asp">.. <p><input type="submit" value="υποβολή"> <p><input type="image" src="./button1.gif" formtarget="_blank" alt="υποβολή σε νέο παράθυρο"> </form> 36 Για τις τιμές που μπορεί να πάρει βλέπετε διαφάνεια 11.

37 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE password: Εμφανίζει αστεράκια στην οθόνη αντί για τους χαρακτήρες που πληκτρολογούνται έτσι ώστε να μην είναι αναγνώσιμο το συνθηματικό που πληκτρολογείται. Παράδειγμα: <input type="password" name="pwd1"> radio: Αποτελεί μια πιο σύνθετη μορφή ενός check box επιτρέποντας όμως μια μόνο επιλογή από το σύνολο των δυνατών επιλογών. Η ιδιότητα name κάθε κουμπιού της ομάδας πρέπει να έχει την ίδια τιμή στο κάθε κουμπί. Παράδειγμα: <p><input type="radio" name="gender" value="male">άρρεν <p><input type="radio" name="gender" value="female">θήλυ 37

38 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE reset: Εμφανίζει ένα κουμπί που όταν πατηθεί θα καθαρίσει (αδειάσει) το περιεχόμενο όλων των στοιχείων της φόρμας, τοποθετώντας ταυτόχρονα σε αυτά τις αρχικές τους τιμές. Παράδειγμα: <input type="reset" value="καθάρισε"> submit: Εμφανίζει ένα κουμπί το οποίο όταν πατηθεί αποστέλλει τα δεδομένα στο server. Παράδειγμα: <input type="submit" value="υποβολή"> text: Η προεπιλεγμένη τιμή της type είναι text και επιτρέπει να ορίσουμε τη φύση του κειμένου που θα εμφανιστεί με την <input>. Παράδειγμα: <input type="text" name="fname"> 38

39 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 1η: <form name="form1" method="post" action="example.php"> <b>όνομα χρήστη:</b> <input type="text" name="user_name" value="πληκτρολογήστε το όνομα χρήστη εδώ" size="40" maxlength="25"> <p><κωδικός πρόσβασης: <input type="password" name="user_password" size="25" maxlength="20"> <p><input type="submit" name="submit" value= "Αποστολή"> <input type="reset" name="reset" value="καθάρισε"> </form> 39

40 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 2η: <form name="form1" method="post" action="example.php"> <p>απάντηση: <input type="radio" name="answer" value="true" checked> Σωστό <input type="radio" name="answer" value="false"> Λάθος <p><input type="submit" name="submit" value= "Αποστολή"> </form> 40

41 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 3η: <p><b><επιλογές μαθημάτων Α εξαμήνου:</b></p> <form name="form1" method="post" action="example.php"> <input type="checkbox" name="course1" value="1"> Λειτουργικά συστήματα<br> <input type="checkbox" name="course2" value="1"> Προγραμματισμός Υπολογιστών<br> <input type="checkbox" name="course3" value="1">σχεδίαση και ανάπτυξη ιστοτόπων<br> <input type="checkbox" name="course4" value="1">πολυμέσα <p><input type="submit" name="submit" value="αποστολή"> </form> 41

42 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 4η: <form name="form1" action="example.php" method="get"> <p>επεξεργαστής: <input type="text" name="cpu" value="amd" readonly> <p>socket: <input type="text" name="socket" value="am3+" disabled> <p><input type="submit" value="υποβολή"> </form> 42

43 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 5η: <form name="form1" action="example.php" method="get"> <input type="checkbox" name="opt1" value="milk"> Γάλα<br> <input type="checkbox" name="opt2" value="butter" checked> Βούτυρο<br> <input type="checkbox" name="opt3" value="cheese"> Τυρί<br> <input type= "button" name= "disp_data" value="εμφάνισε" onclick= "display()"><br> </form> 43

44 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 6η: <form name="form1" action="example.php" method= "get"> <input type="checkbox" name="opt1" value="milk"> Γάλα<br> <input type="checkbox" name="opt2" value="butter" checked> Βούτυρο<br> <input type="checkbox" name="opt3" value="cheese"> Τυρί<br> <input type="image" src="submit-button.gif" name="image" width="60" height="40"><br> <input type="hidden" name="code" value="1"> </form> 44

45 Η ετικέτα <INPUT> Ιδιότητες autocomplete: Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με στοιχεία που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στη συγκεκριμένη ιστοσελίδα. Τα πεδία που μπορούν να είναι autocomplete είναι αυτά με input type: text, search, url, telephone, , password, ημερολογιακά και ωρολογιακά πεδία (όπως το date και time), range και color. Σύνταξη: <input autocomplete="on(default) off"> Παράδειγμα: <input type= "url" name= "url" autocomplete="off"> 45

46 Η ετικέτα <INPUT> Ιδιότητες autofocus: Η ύπαρξη της ιδιότητας autofocus σε ένα πεδίο σημαίνει ότι κάθε φορά που φορτώνεται η σελίδα, το πεδίο αυτό θα γίνεται ενεργό. Σύνταξη: <input autofocus> Παράδειγμα: <input type="text" name= "Lname" autofocus> dirname: Επιτρέπει την υποβολή της κατεύθυνσης κειμένου του πεδίου εισαγωγής και η τιμή του είναι πάντα το όνομα του πεδίου εισαγωγής, που ακολουθείται από ".dir". Σύνταξη: <input name="myname" dirname="myname.dir"> 46

47 Η ετικέτα <INPUT> Ιδιότητες Συνέχεια dirname: Παράδειγμα: <form action="addcomment.cgi" method=post> <p><label>comment: <input type=text name="comment" dirname="comment.dir" required></label></p> <p><button name="mode" type=submit value="add">post Comment</button></p> </form> Σύμφωνα με την κατεύθυνση εισαγωγής κειμένου, μετά την υποβολή της φόρμας, η παράμετρος "comment.dir" με ltr αξία ή rtl θα προσαρτηθεί στη διεύθυνση URL. Όταν θα γίνει υποβολή, το αποτέλεσμα θα είναι κάτι σαν το παρακάτω: comment=hello&comment.dir=ltr&mode=add 47

48 Η ετικέτα <INPUT> Ιδιότητες form: Ένα στοιχείο μιας φόρμας, μπορεί να ανήκει και σε μια άλλη φόρμα ή και σε μια τρίτη φόρμα κ.ο.κ. Η ιδιότητα form της ετικέτας <input>, μπορεί να πάρει σαν τιμές αυτές των id (*) των φορμών που ανήκει, χωρισμένες με κενό. Σύνταξη: <input form="form_id"> Παράδειγμα: <form action= "example.asp" id="f1"> <p>όνομα:<input type="text" name= "Fname"> <p><input type="submit" value="υποβολή"> </form> <p>επώνυμο:<input type="text" name= "Lname" form="f1"> 48

49 Η ετικέτα <INPUT> Ιδιότητα ID (*) Η ιδιότητα id καθορίζει ένα μοναδικό αναγνωριστικό για κάποιο στοιχείο ενός HTML εγγράφου και η τιμή του πρέπει να είναι μοναδική μέσα στο έγγραφο αυτό. Σύνταξη: <στοιχείο id="αναγνωριστικό"> Για τη σύνταξη της τιμής ενός id ισχύουν οι παρακάτω κανόνες: Πρέπει να περιέχει τουλάχιστον ένα χαρακτήρα. Δε πρέπει να περιέχει χαρακτήρες διαστήματος Στην HTML, σε όλες τις τιμές γίνεται διάκριση πεζώνκεφαλαίων Η ιδιότητα id χρησιμοποιείται συνήθως για τον ορισμό του στυλ σε ένα style sheet και με τη Javascript (μέσω του DOM HTML) για το χειρισμό του στοιχείου με το συγκεκριμένο αναγνωριστικό. 49

50 Η ετικέτα <INPUT> Ιδιότητα ID (*) Στην HTML5, η ιδιότητα id μπορεί να χρησιμοποιηθεί σε οποιοδήποτε στοιχείο HTML, ενώ στην HTML 4.01, δε μπορεί να χρησιμοποιηθεί με τις ετικέτες: <base>, <head>, <html>, <meta>, <param>, <script>, <style> και <title>. Σημείωση: Η HTML 4.01 έχει περισσότερους περιορισμούς σχετικά με το περιεχόμενο των τιμών id (π.χ. οι τιμές id δε μπορεί να ξεκινούν με έναν αριθμό). 50

51 Η ετικέτα <INPUT> Ιδιότητες list: Το χαρακτηριστικό αυτό αναφέρεται σε ένα στοιχείο <datalist> (βλέπε επόμενη διαφάνεια) που περιέχει προκαθορισμένες επιλογές για ένα <input> στοιχείο. Σύνταξη: <input list="datalist_id"> Παράδειγμα: <input list="monitors"> <datalist id="monitors"> <option value="19 inch"> <option value="20 inch"> <option value="21 inch"> </datalist> Για την ετικέτα <option> βλέπετε διαφάνεια

52 Η ετικέτα <INPUT> Η ετικέτα <DATALIST> Η ετικέτα <datalist>, σε συνδυασμό με την <input>, καθορίζει μια λίστα προκαθορισμένων επιλογών για το στοιχείο αυτό. Ο χρήστης έχει τη δυνατότητα να πληκτρολογήσει τα δεδομένα που επιθυμεί ή να τα επιλέξει από την προκαθορισμένη λίστα. Αυτό επιτυγχάνεται με ένα δεύτερο κλικ (ή πατώντας το κάτω βέλος) μέσα στο πλαίσιο του <input> στοιχείου ή πληκτρολογώντας χαρακτήρες που ταιριάζουν με τα περιεχόμενα της προκαθορισμένης λίστας. Για παράδειγμα, σε μια λίστα με ονόματα ομάδων, πληκτρολογώντας το γράμμα «Α» θα εμφανιστούν ομάδες, όπως ΑΕΚ, ΑΡΗΣ, κ.λπ., ενώ δίνοντας και ένα δεύτερο χαρακτήρα «Ε» θα εμφανίσει μόνο την ΑΕΚ. 52

53 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 7η: <form name="form1"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="yandex"> <option value="safari"> </datalist> <input type="button" value="κλικ εδώ" onclick="alert(form1.browser.value)"> </form> 53

54 Η ετικέτα <INPUT> Ιδιότητες max: Καθορίζει τη μέγιστη τιμή για ένα πεδίο εισαγωγής. Σύνταξη: <input max="αριθμός ημερομηνία"> min: Καθορίζει την ελάχιστη τιμή για ένα πεδίο εισαγωγής. Σύνταξη: <input min="αριθμός ημερομηνία"> Παράδειγμα: <p><input type="date" name="date_limit" max=" " min=" "> <p><input type="number" name="age_limit" max="40" min= "20"> Οι ιδιότητες αυτές μπορούν να χρησιμοποιηθούν στα πεδία με input type: number, range, date, datetime, datetime-local, month, time και week. 54

55 Η ετικέτα <INPUT> Ιδιότητες multiple: Η ιδιότητα multiple μπορεί να χρησιμοποιηθεί στα πεδία με input type: και file και η ύπαρξή της σε ένα πεδίο σημαίνει πως μπορούμε να επιλέξουμε σε αυτό περισσότερες από μία τιμές. Σύνταξη: <input multiple> Για το <input type="file">, όταν έχετε να επιλέξετε πολλαπλά αρχεία κάντε χρήση των κουμπιών CTRL και SHIFT. Για το <input type=" ">, χωρίζετε τις διευθύνσεις μεταξύ τους με κόμμα (,). Παράδειγμα: <input type="file" name="docs" multiple> <input type=" " multiple> 55

56 Η ετικέτα <INPUT> Ιδιότητες pattern: Ορίζει το σύνολο των χαρακτήρων που μπορεί να πάρει ένα πεδίο και μπορεί να χρησιμοποιηθεί για πεδία με input type: text, search, url, telephone, , και password. Το σύνολο χαρακτήρων προκύπτει από την μέθοδο RegExp της JavaScript. ( Σύνταξη: <input pattern="regexp"> Παράδειγμα: <input type="text" name="country_code" pattern="[a-za-z]{3}" title="κωδικός χώρας 3 γράμματα"> <input type="password" name="pw" pattern=".{6,}" title="έξι ή περισσότεροι χαρακτήρες"> 56

57 Η ετικέτα <INPUT> Ιδιότητες placeholder: Ορίζει ένα σύντομο κείμενο το οποίο περιγράφει την τιμή που παίρνει ένα πεδίο, το οποίο σβήνεται όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού του σε αυτό. Η ιδιότητα placeholder μπορεί να χρησιμοποιηθεί σε πεδία με input type: text, search, url, tel, και password. Σύνταξη: <input placeholder="κείμενο"> Παράδειγμα: <input type="text" name="fname" placeholder="όνομα"> 57

58 Η ετικέτα <INPUT> Ιδιότητες required: Ορίζει τα πεδία που απαραίτητα πρέπει να συμπληρωθούν από τον χρήστη πριν την υποβολή (submit) της φόρμας και μπορεί να χρησιμοποιηθεί σε πεδία με input type: text, search, url, telephone, , password, ημερολογιακά πεδία, number, checkbox, radio, και file. Σύνταξη: <input required> Παράδειγμα:<input type="text" name= "Lname" required> 58

59 Η ετικέτα <INPUT> Ιδιότητες step: Ορίζει τα επιτρεπτά αριθμητικά διαστήματα για ένα πεδίο εισαγωγής και μπορεί να χρησιμοποιηθεί σε συνδυασμό με τις ιδιότητες max και min για την εισαγωγή αριθμών σε αποδεχτό διάστημα τιμών. Για παράδειγμα, αν ορίσετε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι:...,-10, -5, 0, 5,10,15... κ.λπ. (default 1). Η ιδιότητα step μπορεί να χρησιμοποιηθεί σε πεδία με input type: number, range, date, datetime, datetime-local, month, time και week. Σύνταξη: <input step="αριθμός"> Παράδειγμα:<input type="number" name="points" step="3"> 59

60 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE color: Tο πεδίο κειμένου είναι τύπου hexadecimal color, όπως #1B1BC3. date: Tο πεδίο κειμένου είναι ημέρα. datetime: Tο πεδίο κειμένου είναι ημερομηνία ή ώρα ή και τα δύο. datetime-local: Το πεδίο κειμένου είναι τοπική ώρα και ημερομηνία. Tο πεδίο χρησιμοποιείται για την πληκτρολόγηση μιας διεύθυνση ηλεκτρονικού ταχυδρομείου. Η ορθότητα της τιμής (πρέπει να περιέχει τον και τελεία στο domain) του πεδίου αυτού ελέγχεται αυτόματα κάθε φορά που γίνεται υποβολή (submit) η φόρμα. 60

61 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE month: Tο πεδίο κειμένου είναι μήνας. number: Το πεδίο number χρησιμοποιείται για αριθμητικές τιμές. Αν ο χρήστης πληκτρολογήσει κείμενο, τότε η φόρμα δεν γίνεται submit λόγο μη ορθότητας του πεδίου. Μπορούμε να χρησιμοποιήσουμε τις ιδιότητες max, min, step και value για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει. range: Το πεδίο range χρησιμοποιείται για να πληκτρολογείται σε αυτό μια αριθμητική τιμή από ένα εύρος τιμών. Μπορούμε, όπως και με το πεδίο number, να χρησιμοποιήσουμε τις ιδιότητες max, min, step και value για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει (max default 100). 61

62 Η ετικέτα <INPUT> Τιμές της ιδιότητας TYPE search: Tο πεδίο search συμπεριφέρεται σαν πεδίο κειμένου και χρησιμοποιείται σαν πεδίο αναζήτησης στο οποίο ο χρήστης πληκτρολογεί τη λέξη ή τις λέξεις κλειδιά για τις οποίες θέλει να εκτελέσει μια αναζήτηση. tel: Χρησιμοποιείται όταν το πεδίο κειμένου είναι νούμερο τηλεφώνου. time: Tο πεδίο κειμένου είναι ώρα. url: Χρησιμοποιείται για την πληκτρολόγηση μιας διεύθυνσης url. week: Το πεδίο κειμένου είναι εβδομάδα. 62

63 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 8η: <form name="form1" method= "get" action="example.php" autocomplete novalidate> <p>όνομα: <input type="text" name="first_name" accesskey="n" tabindex=1 > <p>επώνυμο: <input type="text" name="last_name" accesskey="l" tabindex=2 > <p><input type="submit" value="υποβολή"> </form> 63

64 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 9η: <form name="form1" action="example.php" method="get"> <p>τιμή (1 έως 5):<input type="number" name="quantity" min="1" max="5"> <p>τιμή (0 έως 100, αρχική 10, βήμα 10):<input type="number" name="points" min="0" max="100" step="10" value="10"> <p>τιμή (1 έως 10):<input type="range" name="quantity" min="1" max="10"> <p><input type="submit" value="υποβολή"> </form> 64

65 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 10η: <form name="form1" action="example.php" method="get"> <p>επέλεξε εικόνα σημαίας: <input type="file" name="img" multiple novalidate="off"> <p>κωδικός χώρας: <input type="text" name="country_code" pattern="[a-z]{3}" title="κωδικός 3 γράμματα" placeholder="χχχ" autofocus required> <p><input type="submit" value="υποβολή"> </form> Εμφανίζεται μετακινώντας επάνω στο στοιχείο της φόρμας το δείκτη του ποντικιού 65

66 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 11η : <form name="form1" action="example.php" method="get"> <p>search Google: <input type="search" name="google"> <p>δώσε URL:<input type="url" name="webpage"> <p><input type="submit" value="υποβολή"> </form> 66

67 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 12η: <form name="form1" action="example.php" method="get"> <input type=" " name=" "> <input type="submit"> </form> Άσκηση 13η : <form name="form1" action="example.php" method="get"> Επέλεξε ώρα: <input type="time" name="usr_time"> <input type="submit"> </form> 67

68 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 14η: <form name="form1" action="example.php"> Επέλεξε το αγαπημένο σου χρώμα: <input type="color" name="favcolor" value="#ff0000"> <input type="submit" value="υποβολή"> </form> Άσκηση 15η: <form action="example.php"> Γενέθλια: <input type="date" name="bday"> <input type="submit"> </form> 68

69 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 16η: <form action="example.php"> Επέλεξε εβδομάδα: <input type="week" name="week_year"> <input type="submit"> </form> Άσκηση 17η: <form action="example.php"> Γενέθλια (μήνας και έτος): <input type="month" name="birthday"> <input type="submit"> </form> 69

70 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 18η: <form action="example.php"> Γενέθλια (ημερομηνία και ώρα): <input type="datetime" name="birthday"> <input type="submit"> </form> Άσκηση 19η: <form action="example.php"> Γενέθλια (ημερομηνία και ώρα): <input type="datetime-local" name="birthday"> </form> 70

71 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 20η: <form name="form1" action="example.php"> Γενέθλια: <input type="date" name="birthday"> <input type="submit"> </form> 71

72 Η ετικέτα <INPUT> Ασκήσεις Άσκηση 21η: <form name="form1" action= "example.php" method="get"> Όνομα: <input type="text" name="fname"><br> Επώνυμο: <input type="text" name="lname"><br> <input type="submit" value="υποβολή"> <input type="submit" formtarget="_blank" value="υποβολή σε νέα καρτέλα/παράθυρο"> </form> 72

73 Η ετικέτα <INPUT> Πρακτική άσκηση Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλους τους τύπους και τις ιδιότητες της Input HTML Input Types HTML Input Attributes HTML Input tag Datalist 73

74 Η ετικέτα <TEXTAREA> Ιδιότητες Με την ετικέτα <textarea>, μπορούμε να ορίσουμε ένα πεδίο χαρακτήρων πολλών γραμμών, δηλαδή μια περιοχή κειμένου μέσα στην οποία συνήθως o χρήστης μπορεί να προσθέσει τα σχόλια ή παρατηρήσεις του. Το στοιχείο <textarea> έχει τις ακόλουθες ιδιότητες: cols: Ορίζει τον αριθμό των ορατών χαρακτήρων (αυτοί δηλαδή που φαίνονται χωρίς οριζόντιο scrolling) που θα χωράει κάθε γραμμή στη περιοχή κειμένου. Σύνταξη: <textarea cols="αριθμός"> disabled: Ορίζει ότι μια περιοχή κειμένου θα πρέπει να απενεργοποιηθεί. Σύνταξη: <textarea disabled> 74

75 Η ετικέτα <TEXTAREA> Ιδιότητες name: Ορίζει το όνομα της περιοχής κειμένου. Σύνταξη: <textarea name="κείμενο"> readonly: Είναι μια boolean ιδιότητα, η οποία όταν υπάρχει, ορίζει ότι η περιοχή κειμένου θα πρέπει να είναι μόνο για ανάγνωση. Σε μια περιοχή κειμένου μόνο για ανάγνωση, το περιεχόμενο δεν μπορεί να αλλάξει, αλλά ο χρήστης μπορεί να το επιλέξει και να το αντιγράψει. Σύνταξη: <textarea readonly> rows: Ορίζει τον αριθμό των ορατών γραμμών (αυτές δηλαδή που φαίνονται χωρίς κάθετο scrolling) που θα έχει η περιοχή κειμένου. Σύνταξη: <textarea rows="αριθμός"> 75

76 Η ετικέτα <TEXTAREA> Ιδιότητες Παράδειγμα : <textarea name="comments" rows="4" cols="40" readonly> Τα περιεχόμενα της περιοχής κειμένου δε μπορούνε να αλλάξουν. </textarea> 76

77 Η ετικέτα <TEXTAREA> Ιδιότητες autofocus: Η ύπαρξή της σε ένα πεδίο σημαίνει ότι κάθε φορά που φορτώνεται η σελίδα, ο κέρσορας του πληκτρο-λογίου θα αναβοσβήνει στο πεδίο αυτό. Σύνταξη: <textarea autofocus> dirname: Η ιδιότητα αυτή επιτρέπει την υποβολή της κατεύθυνσης κειμένου της περιοχής κειμένου και μπορεί να πάρει τιμή κάθε μη κενή συμβολοσειρά. Το dirname = "this.dir" θα προσαρτήσει this.dir = ltr (από αριστερά προς τα δεξιά) ή this.dir = rtl (από δεξιά προς τα αριστερά) για να υποβάλει τα σχετικά στοιχεία, για παράδειγμα. Σύνταξη: <textarea name="myname" dirname="myname.dir"> </textarea> Βλέπετε επίσης διαφάνειες 45 και

78 Η ετικέτα <TEXTAREA> Ιδιότητες form: Ορίζει μία ή περισσότερες φόρμες στις οποίες ανήκει η περιοχή κειμένου. Σύνταξη: <textarea form="form_id"> Παράδειγμα: <form action= "example.asp" id="form1"> </form> <textarea name="comments" form="form1">...</textarea> Βλέπετε επίσης διαφάνεια

79 Η ετικέτα <TEXTAREA> Ιδιότητες maxlength: Ορίζει το μέγιστο αριθμό των χαρακτήρων που επιτρέπονται στην περιοχή κειμένου. Σύνταξη: <textarea maxlength="αριθμός"> placeholder: Ορίζει ένα σύντομο κείμενο που περιγράφει την αναμενόμενη τιμή μιας περιοχής κειμένου. Σύνταξη: <textarea placeholder="κείμενο"> Παράδειγμα: <textarea rows="5" cols="60" placeholder= "Περιέγραψε τον εαυτό σου εδώ..."></textarea> required: Ορίζει ότι μια περιοχή κειμένου απαιτείται και πρέπει να συμπληρωθεί. Σύνταξη: <textarea required> 79

80 Η ετικέτα <TEXTAREA> Ιδιότητες wrap: Ελέγχει τις αλλαγές γραμμών και μπορεί να πάρει μια από τις παρακάτω τιμές: soft: Default τιμή. Το κείμενο της περιοχής κειμένου δεν αναδιπλώνεται, όταν υποβάλλεται σε μια φόρμα. hard: Το κείμενο της περιοχής κειμένου είναι αναδιπλωμένο (περιέχει νέες γραμμές), όταν υποβάλλεται σε μια φόρμα. Όταν χρησιμοποιείται η τιμή hard, η ιδιότητα cols πρέπει να καθορίζεται. Σύνταξη: <textarea wrap="soft hard"> 80

81 Η ετικέτα <TEXTAREA> Ασκήσεις Άσκηση 22η: <p><εδώ σχολιάζεις εσύ:</b> <form name="form1" method="post" action="example.php"> <textarea name="comments" cols="40" rows="4" wrap="hard"> Μπλα, μπλα,. </textarea> <p><input type="submit" name="submit" value= "Αποστολή"> 81

82 Η ετικέτα <TEXTAREA> Ασκήσεις Άσκηση 23η: <form name="form1" action="example.php" id="usrform"> <p>όνομα: <input type="text" name="usrname"> <input type="submit" value="υποβολή"> </form> <p><textarea rows="4" cols="40" name="comments" form="usrform">πληκτρολόγησε το κείμενό σου εδώ... </textarea> 82

83 Η ετικέτα <TEXTAREA> Ασκήσεις Άσκηση 24η: <form name="form1" action="example.php"> <textarea rows="4" cols="50" name="comment" required placeholder="περιέγραψε τον εαυτό σου εδώ..."> </textarea> <input type="submit" value="υποβολή"> </form> 83

84 Η ετικέτα <TEXTAREA> Πρακτική άσκηση Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες του στοιχείου textarea 84

85 Η ετικέτα <BUTTON> Ιδιότητες Η ετικέτα <button> ορίζει ένα κουμπί το οποίο ενεργοποιείται με ένα κλικ του ποντικιού. Μέσα σε ένα στοιχείο <button> μπορείτε να βάλετε περιεχόμενο, όπως κείμενο ή εικόνες. Αυτή είναι η διαφορά μεταξύ αυτού του στοιχείου και των κουμπιών που δημιουργούνται με το στοιχείο <input>. Το στοιχείο <button> μπορεί να πάρει μία από τις παρακάτω ιδιότητες: disabled: Ορίζει ότι το κουμπί θα πρέπει να απενεργοποιηθεί. Σύνταξη: <button disabled> 85

86 Η ετικέτα <BUTTON> Ιδιότητες name: Ορίζει το όνομα για το στοιχείο <button> και χρησιμοποιείται για την αναφορά στα δεδομένα της φόρμας που έχουν υποβληθεί ή για την αναφορά στα δεδομένα που θα κάνει χρήση ένα σενάριο Javascript. Πολλά κουμπιά μπορούν να μοιράζονται το ίδιο όνομα αλλά να υποβάλλουν διαφορετικές τιμές όταν χρησιμοποιούνται σε μια φόρμα. Σύνταξη: <button name="όνομα"> Παράδειγμα: <button name="button1" disabled>κάνε κλικ!</button> 86

87 Η ετικέτα <BUTTON> Ιδιότητες type: Ορίζει τον τύπο του κουμπιού σε έναν από τους button, submit και reset. Σύνταξη: <button type="button submit reset"> Σημείωση: Καλό είναι να προσδιορίζουμε πάντα τον τύπο για το <button> στοιχείο, διότι διαφορετικοί browsers μπορεί να χρησιμοποιούν διαφορετική προεπιλογή. value: Ορίζει την αρχική τιμή για ένα <button> στη <form>. Σύνταξη: <button value="τιμή"> Σημείωση: Σε μια φόρμα, η τιμή του κουμπιού υποβάλλεται μόνο εάν αυτό το ίδιο χρησιμοποιηθεί για την υποβολή. Παράδειγμα: <button name= "button1" type="submit" value="1">1ος Παίχτης</button> 87

88 Η ετικέτα <BUTTON> Ιδιότητες autofocus: Η ύπαρξη της ιδιότητας autofocus σε ένα κουμπί σημαίνει ότι κάθε φορά που φορτώνεται η σελίδα, το κουμπί αυτό θα γίνεται ενεργό. Σύνταξη: <button type="button" autofocus> form: Ορίζει μία ή περισσότερες φόρμες στις οποίες ανήκει το κουμπί. Σύνταξη: <button form="form_id"> Βλέπετε επίσης διαφάνεια 47. formaction, formenctype, formmethod, formvalidate, formtarget (Βλέπετε διαφάνειες 30-35) 88

89 Η ετικέτα <BUTTON> Ασκήσεις Άσκηση 25η: <form action= "example.asp" method="get" id="f1"> <p>όνομα: <input type="text" name="fname"> <p>επώνυμο: <input type="text" name="lname"> </form> <button type="submit" form="f1" value="submit">υποβολή </button> 89

90 Η ετικέτα <BUTTON> Πρακτική άσκηση Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες του στοιχείου button 90

91 Η ετικέτα <SELECT> Ιδιότητες Η ετικέτα <select> επιτρέπει να εμφανιστεί μια λίστα επιλογών στην οθόνη. Πρέπει να ορίσουμε υποχρεωτικά και ένα διακεκριμένο όνομα για κάθε μια φόρμα και μπορούμε να δηλώσουμε όσες επιλογές επιθυμούμε. Οι ιδιότητές της είναι: disabled: Ορίζει ότι μια πτυσσόμενη λίστα θα πρέπει να απενεργοποιηθεί. Σύνταξη: <select disabled> multiple: Είναι μια boolean ιδιότητα, η οποία επιτρέπει τον ορισμό πολλαπλών επιλογών. Οι πολλαπλές επιλογές ποικίλλουν σε διαφορετικά λειτουργικά συστήματα και browsers (π.χ. σε Λ.Σ. με Windows η πολλαπλή επιλογή γίνεται με Ctrl). Σύνταξη: <select multiple> 91

92 Η ετικέτα <SELECT> Ιδιότητες name: Ορίζει το όνομα των δεδομένων. Σύνταξη: <select name="κείμενο"> size: Καθορίζει τον αριθμό των επιλογών που θα είναι ορατός. Αν δεν οριστεί είναι 1. Σύνταξη: <select size="αριθμός"> Παράδειγμα: <select name="browsers" size="3" multiple> </select> 92

93 Η ετικέτα <SELECT> Η ετικέτα <OPTION> Η ετικέτα <option> χρησιμοποιείται στο εσωτερικό μιας ετικέτας <select> ή <datalist> και μας δίνει τη δυνατότητα να ορίσουμε τις τιμές που θα αποσταλούν με τη χρήση της ιδιότητας value. Ιδιότητες που μπορεί να πάρει η ετικέτα <option>: disabled: Ορίζει ότι η συγκεκριμένη επιλογή μιας πτυσσόμενης λίστας θα πρέπει να απενεργοποιηθεί. Σύνταξη: <option disabled> label: Ορίζει μια συντομότερη έκδοση μιας επιλογής η οποία θα εμφανίζεται στη πτυσσόμενη λίστα. Σύνταξη: <option label="κείμενο"> Παράδειγμα: <option label="επα.λ.">επαγγελματικό Λύκειο</option> 93

94 Η ετικέτα <SELECT> Η ετικέτα <OPTION> selected: Είναι boolean ιδιότητα και ορίζει ότι η επιλογή θα πρέπει να προ-επιλέγεται, όταν φορτώνεται η σελίδα. Σύνταξη: <option selected> value: Ορίζει την τιμή που θα σταλεί στο server όταν θα γίνει υποβολή της φόρμας. Σύνταξη: <option value="τιμή"> Παράδειγμα: <option value="firefox" selected>firefox</option> 94

95 Η ετικέτα <SELECT> Η ετικέτα <OPTGROUP> Η ετικέτα <optgroup> χρησιμοποιείται για την ομαδοποίηση των επιλογών σε μια πτυσσόμενη λίστα και υποστηρίζει τις παρακάτω δύο ιδιότητες: disabled: Ορίζει ότι η συγκεκριμένη ομάδα επιλογών μιας πτυσσόμενης λίστας θα πρέπει να απενεργοποιηθεί. Σύνταξη: <optgroup disabled> label: Ορίζει μια ετικέτα για την ομάδα επιλογών που εμφανίζεται στη πτυσσόμενη λίστα. Σύνταξη: <optgroup label="κείμενο"> Παράδειγμα: <optgroup label="κεντρική Μακεδονία"> </optgroup> 95

96 Η ετικέτα <SELECT> Ασκήσεις Άσκηση 26η: <p><b>επιλογή οργανικής θέσης:</b> <form name="form1" method="post" action="example.asp"> <select name="areas"> <option value="cm" selected>κεντρική Μακεδονία</option> <option value="em">ανατολική Μακεδονία</option> <option value="wm">δυτική Μακεδονία</option> </select> </form> 96

97 Η ετικέτα <SELECT> Ασκήσεις Άσκηση 27η: <p><b>επιλογή οργανικής θέσης:</b> <form name="form1" method="post" action="example.php"> <select name="areas" size="3" > <option value="cm" selected>κεντρική Μακεδονία</option> <option value="em">ανατολική Μακεδονία</option> <option value="wm">δυτική Μακεδονία</option> </select> </form> Αποτέλεσμα με προσθήκη της ιδιότητας multiple 97

98 Η ετικέτα <SELECT> Ασκήσεις Άσκηση 28η: <p><b>επιλογή σχολείου:</b></p> <form name="form1" method="post" action="example.php"> <select> <option label="γε.λ." value="1">γενικό Λύκειο</option> <option label="επα.λ." selected value="2">επαγγελματικό Λύκειο</option> <option label="άλλο" disabled value="3">άλλο Λύκειο</option> </select> </form> 98

99 Η ετικέτα <SELECT> Ασκήσεις Άσκηση 29η: <form name="form1" method="post" action="example.php"> <select> <optgroup label="υλικό (Hardware)" disabled> <option value="inpdev">συσκευές Εισόδου</option> <option value="outdev">συσκευές Εξόδου</option> </optgroup> <optgroup label="λογισμικό (Software)"> <option value="os">λειτουργικά Συστήματα</option> <option value="appl">εφαρμογών</option> </optgroup> </select>. </form> 99

100 Η ετικέτα <SELECT> Ιδιότητες Η HTML5 περιλαμβάνει τις παρακάτω επιπλέον ιδιότητες: autofocus: Ορίζει ότι η πτυσσόμενη (drop-down ) λίστα θα πρέπει να εστιαστεί αυτόματα όταν η σελίδα φορτωθεί (η εστίαση επιτρέπεται μόνο σε ένα στοιχείο της φόρμας). Σύνταξη: <select autofocus> (στην XHTML πρέπει να οριστεί ως <select autofocus="autofocus">) form: Ορίζει μία ή περισσότερες φόρμες στις οποίες ανήκει η πτυσσόμενη λίστα. Σύνταξη: <select form="form_id"> Βλέπε επίσης διαφάνεια

101 Η ετικέτα <SELECT> Ιδιότητες required: Ορίζει ότι ο χρήστης θα πρέπει να επιλέξει μια τιμή πριν από την υποβολή της φόρμας. Σύνταξη: <select required> Παράδειγμα: <form action="example.asp" id="f1"> </form> <select name="s1" multiple required autofocus form="f1"> </select> 101

102 Η ετικέτα <SELECT> Ασκήσεις Άσκηση 30η: <form action="example.php" id="browser"> Όνομα:<input type="text" name="fname"> <input type="submit" value="υποβολή"> </form> <br> <select name="browserlist" form="browser" required autofocus> <option value="firefox">firefox</option> <option value="chrome">chrome</option> <option value="opera">opera</option> <option value="yandex">yandex</option> <option value="ie">internet Explorer</option> <option value="safari">safari</option> </select> 102

103 Η ετικέτα <SELECT> Πρακτική άσκηση Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες του στοιχείου select Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες του στοιχείου option Εδώ μπορείτε να βρείτε και να δοκιμάσετε όλες τις ιδιότητες του στοιχείου optgroup 103

104 Η ετικέτα <KEYGEN> Ιδιότητες Η ετικέτα <keygen> ορίζει ένα πεδίο δημιουργίας ζεύγους κλειδιών (δημόσιο και ιδιωτικό) που χρησιμοποιείται στις φόρμες. Κατά την υποβολή της φόρμας, το ιδιωτικό κλειδί είναι αποθηκευμένο σε τοπικό επίπεδο, και το δημόσιο κλειδί αποστέλλεται στο server. Η ετικέτα <keygen> υποστηρίζει τις παρακάτω ιδιότητες: autofocus: Ορίζει ότι το στοιχείο <keygen> θα πρέπει να γίνει ενεργό αυτόματα όταν η σελίδα φορτωθεί. Σύνταξη: <keygen autofocus> challenge: Ορίζει ότι η τιμή του στοιχείου <keygen> θα πρέπει να αμφισβητηθεί, όταν θα γίνει η υποβολή των στοιχείων της φόρμας. 104

105 Η ετικέτα <KEYGEN> Ιδιότητες disabled: Ορίζει ότι το στοιχείο <keygen> θα πρέπει να απενεργοποιηθεί. Ένα απενεργοποιημένο πεδίο είναι άχρηστο και μη-επεξεργάσιμο. Η απενεργοποίηση μπορεί να εφαρμοστεί για να αποτρέψει ένα χρήστη από τη χρήση του πεδίου μέχρι κάποια άλλη προϋπόθεση να εκπληρωθεί (όπως επιλέγοντας ένα πλαίσιο ελέγχου, κλπ). Στη συνέχεια, κάνοντας χρήση JavaScript κώδικα θα μπορούσε κάποιος να αφαιρέσει την απενεργοποίηση του πεδίου και να το κάνει και πάλι χρηστικό. Σύνταξη: <keygen disabled> 105

106 Η ετικέτα <KEYGEN> Ιδιότητες form: Ορίζει μία ή περισσότερες φόρμες στις οποίες ανήκει το στοιχείο <keygen>. Σύνταξη: <keygen form="form_id"> Βλέπετε επίσης διαφάνεια 47. Παράδειγμα : <form action= "example.php" method="get" id="secform">. </form> Κρυπτογράφηση: <keygen name="security" form="secform"> 106

107 Η ετικέτα <KEYGEN> Ιδιότητες keytype: Ορίζει το τύπο κλειδιού που θα χρησιμοποιηθεί. Σημείωση: Η υποστήριξη για τους τύπους κλειδιών μπορεί να διαφέρει μεταξύ των browsers. Σύνταξη: <keygen keytype="rsa dsa ec"> RSA: Default τιμή. Ορίζει έναν αλγόριθμο ασφάλειας ασύμμετρης κρυπτογράφησης (ιδιωτικού δημοσίου κλειδιού) RSA της τάξης των 1024 με 2048 bits. DSA: Ορίζει έναν αλγόριθμο ασφάλειας ασύμμετρης κρυπτογράφησης DSA. EC: Ορίζει έναν αλγόριθμο ασφάλειας EC. name: Ορίζει το όνομα του στοιχείου <keygen>. Σύνταξη: <keygen name="όνομα"> 107

108 Η ετικέτα <KEYGEN> Ασκήσεις Άσκηση 31η: <form action="example.php" method="get"> <p>όνομα χρήστη: <input type="text" name="usr_name"> <p>κρυπτογράφηση: <keygen name="security" autofocus> <p><input type="submit" value="υποβολή"> </form> usr_name=geo&security=miicqdccasg wggeima0gcsqgsib3dqebaquaa4ibdw AwggEKAoIBAQC6qSHGLCgu%0D%0AD3 bd2s0qedqau4lunoljm4gqwxo%2bikrsy fkjchzohs68ygyin5c3%2bj8tvsp4pke0% 0D%0AGvkYcT9Ce%2FCR%2FAi 108 Αποτέλεσμα κρυπτογράφησης

109 Η ετικέτα <OUTPUT> Ιδιότητες Η ετικέτα <output> αντιπροσωπεύει το αποτέλεσμα ενός υπολογισμού (σαν αυτός να εκτελείται από ένα script) και υποστηρίζει τις παρακάτω ιδιότητες: for: Ορίζει τη σχέση μεταξύ του αποτελέσματος του υπολογισμού, καθώς και τα στοιχεία που χρησιμοποιούνται για τον υπολογισμό. Σύνταξη: <output for="element_id"> Το element_id ορίζει μια λίστα αναγνωριστικών (ids), αποτελούμενη από ένα ή περισσότερα στοιχεία χωρισμένα μεταξύ τους με κενό, ορίζοντας τη σχέση μεταξύ του αποτελέσματος του υπολογισμού, καθώς και των στοιχείων που χρησιμοποιούνται για την πραγματοποίησή του. 109

110 Η ετικέτα <OUTPUT> Ιδιότητες form: Η ιδιότητα αυτή ορίζει μία ή περισσότερες φόρμες στις οποίες το στοιχείο <output> ανήκει. Σύνταξη: <output form="form_id"> Το form_id ορίζει τη φόρμα στην οποία το στοιχείο <output> ανήκει. Η τιμή αυτής της παραμέτρου πρέπει να είναι η ιδιότητα id της <form> στο ίδιο έγγραφο. name: Η ιδιότητα αυτή προσδιορίζει το όνομα ενός <output> στοιχείου και χρησιμοποιείται για την αναφορά σε δεδομένα της φόρμας αφού αυτά υποβληθούν ή για την αναφορά του στοιχείου σε ένα σενάριο JavaScript. Σύνταξη: <output name="όνομα"> 110

111 Η ετικέτα <OUTPUT> Ασκήσεις Άσκηση 32η: <form oninput="o.value = parseint(a.value) + parseint(b.value)"> <input name="a" type="number" step="any" value= "0"> + <input name="b" type="number" step="any" value= "0"> = <output name="o"></output> </form> 111

112 Η ετικέτα <OUTPUT> Ασκήσεις Άσκηση 33η: <form oninput="x.value=parseint(a.value)+parseint(b.value)"> 0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> 112

113 Η ετικέτα <OUTPUT> Ασκήσεις Άσκηση 34η: <form oninput="x.value=parseint(a.value)+parseint(b.value)"> 0<input type="range" id="a" value="0">100+ 0<input type="range" id="b" value="0">100= <output name="x" for="a b"></output> </form> 113

114 114 Η ετικέτα <FIELDSET> Ιδιότητες - Η ετικέτα <LEGEND> Η ετικέτα <fieldset> </fieldset> ομαδοποιεί τα στοιχεία μιας φόρμας δημιουργώντας ένα πλαίσιο γύρω από τα περιεχόμενα που βρίσκονται μεταξύ της ετικέτας αρχής και τέλους. Με την ετικέτα <legend> </legend>, η οποία δηλώνεται μέσα στο σώμα της <fieldset>, έχουμε δυνατότητα να ορίζουμε την επικεφαλίδα του πλαισίου. Η ετικέτα <legend>, μπορεί να πάρει ως παράμετρο στοίχισης την ιδιότητα align, την οποία ηhtml5 δεν υποστηρίζει. Σύνταξη: <legend align= "top bottom left right">