032.4 Μάθημα 1

Προτού μεταβούμε στον markup κώδικα που αφορά ειδικά τις φόρμες, ας ξεκινήσουμε πρώτα με ένα απλό κενό έγγραφο HTML, χωρίς περιεχόμενο στο body:

Αποθηκεύστε το δείγμα κώδικα ως αρχείο μη επεξεργασμένου κειμένου [raw], με επέκταση .html (όπως στο form.html) και χρησιμοποιήστε το αγαπημένο σας πρόγραμμα περιήγησης για να το ανοίξετε. Αφού το αλλάξετε, πατήστε το κουμπί reload στο πρόγραμμα περιήγησης για να εμφανιστούν οι τροποποιήσεις.

Η βασική δομή της φόρμας δίνεται από το ίδιο το <form> tag και τα εσωτερικά της elements:

Τα διπλά εισαγωγικά δεν απαιτούνται για attributes μεμονωμένης λέξης όπως type, επομένως το type=text λειτουργεί εξίσου με το type="text". Ο προγραμματιστής μπορεί να επιλέξει ποιό κανόνα θα χρησιμοποιήσει.

Αποθηκεύστε το νέο περιεχόμενο και φορτώστε ξανά τη σελίδα στο πρόγραμμα περιήγησης. Θα πρέπει να δείτε το αποτέλεσμα που εμφανίζεται στην Figure 1.

Το tag <form> από μόνο του, δεν παράγει κανένα αξιοσημείωτο αποτέλεσμα στη σελίδα. Τα elements μέσα στα tags <form>…​</form> θα καθορίσουν τα πεδία και άλλα οπτικά βοηθήματα που εμφανίζονται στον επισκέπτη.

Ο κώδικας του παραδείγματος περιέχει τόσο γενικά HTML tags (<h2> και <p>) και το <input> tag, το οποίο είναι ένα tag, ειδικά για φόρμες. Ενώ τα γενικά tags μπορούν να εμφανίζονται οπουδήποτε στο έγγραφο, τα tags ειδικά για φόρμες θα πρέπει να χρησιμοποιούνται μόνο εντός του <form> element· δηλαδή μεταξύ των opening <form> και closing </form> tags.

Όπως φαίνεται στο παράδειγμα, το paragraph tag <p> μπορεί να χρησιμοποιηθεί για να περιγράψει το πεδίο στον επισκέπτη. Ωστόσο, δεν υπάρχει προφανής τρόπος με τον οποίο το πρόγραμμα περιήγησης θα μπορούσε να συσχετίσει την περιγραφή στo tag <p> με το αντίστοιχο input element. Το tag <label> είναι πιο κατάλληλο σε αυτές τις περιπτώσεις (από εδώ και στο εξής, θεωρήστε όλα τα δείγματα κώδικα ότι βρίσκονται μέσα στο body του HTML εγγράφου):

Το attribute for στο tag <label> περιέχει το id του αντίστοιχου input element. Κάνει τη σελίδα πιο προσιτή, καθώς οι screenreaders θα μπορούν να εκφωνούν τα περιεχόμενα του label element όταν το input element βρίσκεται σε focus. Επιπλέον, οι επισκέπτες μπορούν να κάνουν κλικ στο label για να κάνουν focus στο αντίστοιχο πεδίο input.

Το attribute id λειτουργεί για elements φόρμας όπως και για οποιοδήποτε άλλο element στο έγγραφο. Παρέχει ένα αναγνωριστικό για το element που είναι μοναδικό σε ολόκληρο το έγγραφο. Το attribute name έχει παρόμοιο σκοπό, αλλά χρησιμοποιείται για τον προσδιορισμό του input element στο πλαίσιο της φόρμας. Το πρόγραμμα περιήγησης χρησιμοποιεί το name attribute για να προσδιορίσει το input field κατά την αποστολή των δεδομένων της φόρμας στον server, επομένως είναι σημαντικό να χρησιμοποιείτε ουσιώδη και μοναδικά name attributes μέσα στη φόρμα.

Το attribute type είναι το κύριο attribute του input element, επειδή ελέγχει τον τύπο δεδομένων που δέχεται το element και την οπτική του παρουσίαση στον επισκέπτη. Εάν το attribute type δεν παρέχεται, από προεπιλογή το input εμφανίζει ένα κουτί κειμένου. Οι ακόλουθοι τύποι input υποστηρίζονται από τα σύγχρονα προγράμματα περιήγησης:

Η εμφάνιση των input types password, search, tel, url, και email δεν διαφέρει από το τυπικό text. Σκοπός τους είναι να προσφέρουν υποδείξεις στο πρόγραμμα περιήγησης σχετικά με το περιεχόμενο που προορίζεται για αυτό το πεδίο εισαγωγής, έτσι ώστε το πρόγραμμα περιήγησης ή το script που εκτελείται στην πλευρά του client να μπορεί να κάνει προσαρμοσμένες ενέργειες για έναν συγκεκριμένο input type. Η μόνη διαφορά μεταξύ του input type κειμένου και του πεδίου κωδικού πρόσβασης, για παράδειγμα, είναι ότι τα περιεχόμενα του πεδίου κωδικού πρόσβασης δεν εμφανίζονται καθώς τα πληκτρολογεί ο επισκέπτης. Σε συσκευές με οθόνη αφής, όπου το κείμενο πληκτρολογείται με πληκτρολόγιο οθόνης, το πρόγραμμα περιήγησης μπορεί να εμφανίσει μόνο το αριθμητικό πληκτρολόγιο όταν γίνεται focus ενός input type tel. Μια άλλη πιθανή ενέργεια είναι να προτείνετε μια λίστα με γνωστές διευθύνσεις email όταν γίνει focus το input type email.

Ο τύπος number εμφανίζεται επίσης ως απλή εισαγωγή κειμένου, αλλά με βέλη αύξησης/μείωσης στο πλάι του. Η χρήση του θα κάνει το αριθμητικό πληκτρολόγιο, να εμφανιστεί σε συσκευές με οθόνη αφής όταν γίνει focus.

Τα άλλα input elements έχουν τη δική τους εμφάνιση και συμπεριφορά. Ο τύπος date, για παράδειγμα, αποδίδεται σύμφωνα με τις τοπικές ρυθμίσεις της μορφής ημερομηνίας και εμφανίζεται ένα ημερολόγιο όταν το πεδίο γίνεται focus:

Η Figure 2 δείχνει πώς η desktop έκδοση του Firefox αποδίδει αυτό το πεδίο.

Αυτό είναι ένα τυπικό χαρακτηριστικό όλων των σύγχρονων προγραμμάτων περιήγησης και δεν απαιτεί επιπλέον επιλογές ή προγραμματισμό.

Ανεξάρτητα από το input type, το περιεχόμενο ενός πεδίου εισαγωγής ονομάζεται η τιμή του. Όλες οι τιμές πεδίων είναι κενές από προεπιλογή, αλλά το attribute value μπορεί να χρησιμοποιηθεί για να ορίσετε μια προεπιλεγμένη τιμή για το πεδίο. Η τιμή για τον τύπο date πρέπει να χρησιμοποιεί τη μορφή YYYY-MM-DD. Η προεπιλεγμένη τιμή στο ακόλουθο πεδίο ημερομηνίας στις 6 Αυγούστου 2020:

Τα συγκεκριμένα input types βοηθούν τον επισκέπτη να συμπληρώσει τα πεδία, αλλά δεν εμποδίζουν τον επισκέπτη να παρακάμψει τους περιορισμούς και να εισάγει αυθαίρετες τιμές σε οποιοδήποτε πεδίο. Γι' αυτό είναι σημαντικό οι τιμές των πεδίων να επικυρώνονται όταν φτάνουν στον server.

Τα elements φόρμας των οποίων οι τιμές πρέπει να πληκτρολογηθούν από τον επισκέπτη μπορεί να έχουν ειδικά attributes που βοηθούν στη συμπλήρωσή τους. Το attribute placeholder εισάγει ένα παράδειγμα τιμής στο input element:

Ο placeholder εμφανίζεται μέσα στο input element, όπως φαίνεται στην Figure 3.

Μόλις ο επισκέπτης αρχίσει να πληκτρολογεί στο πεδίο, ο placeholder εξαφανίζεται. Το κείμενο του placeholder δεν αποστέλλεται ως τιμή πεδίου εάν ο επισκέπτης αφήσει το πεδίο κενό.

Το attribute required απαιτεί από τον επισκέπτη να συμπληρώσει μια τιμή για το αντίστοιχο πεδίο πριν υποβάλει τη φόρμα:

Το attribute required, είναι ένα Boolean attribute, επομένως μπορεί να τοποθετηθεί μόνο του (χωρίς το σύμβολο ίσον). Είναι σημαντικό να επισημάνετε τα πεδία που απαιτούνται, διαφορετικά ο επισκέπτης δεν θα μπορεί να ξεχωρίσει ποια πεδία λείπουν και εμποδίζουν την υποβολή της φόρμας.

Το attribute autocomplete υποδεικνύει εάν η τιμή του input element μπορεί να συμπληρωθεί αυτόματα από το πρόγραμμα περιήγησης. Εάν οριστεί σε autocomplete="off", τότε το πρόγραμμα περιήγησης δεν προτείνει προηγούμενες τιμές για τη συμπλήρωση της καταχώρισης. Τα input elements για ευαίσθητες πληροφορίες, όπως οι αριθμοί πιστωτικών καρτών, θα πρέπει να έχουν θέσει το attribute autocomplete σε off.

Σε αντίθεση με το πεδίο κειμένου, όπου μπορεί να εισαχθεί μόνο μία γραμμή κειμένου, το element textarea επιτρέπει στον επισκέπτη να εισάγει περισσότερες από μία γραμμές κειμένου. Το textarea είναι ξεχωριστό element, αλλά δεν βασίζεται στο input element:

Η τυπική εμφάνιση ενός textarea είναι Figure 4.

Μια άλλη διαφορά από το input element, είναι ότι το textarea element έχει ένα closing tag (</textarea>), επομένως το περιεχόμενό του (δηλαδή η τιμή του) μπαίνει μεταξύ τους. Το attribute rows και cols δεν περιορίζουν το μέγεθος του κειμένου· χρησιμοποιούνται μόνο για τον καθορισμό της διάταξης. Το textarea έχει επίσης μια λαβή στην κάτω δεξιά γωνία, η οποία επιτρέπει στον επισκέπτη να μεταβάλλει το μέγεθός του.

Μπορούν να χρησιμοποιηθούν διάφοροι τύποι στοιχείων ελέγχου φόρμας για την παρουσίαση μιας λίστας επιλογών στον επισκέπτη: το element <select> και τα input types radio και checkbox.

Το element <select> είναι ένα dropdown στοιχείο ελέγχου με μια λίστα προκαθορισμένων εγγραφών:

Το tag <option> αντιπροσωπεύει μια μεμονωμένη καταχώριση στο αντίστοιχο στοιχείο ελέγχου <select>. Ολόκληρη η λίστα εμφανίζεται όταν ο επισκέπτης πατήσει ή κάνει κλικ στο στοιχείο ελέγχου, όπως φαίνεται στην Figure 5.

Η πρώτη καταχώριση στη λίστα επιλέγεται από προεπιλογή. Για να αλλάξετε αυτήν τη συμπεριφορά, μπορείτε να προσθέσετε το attribute selected σε μια άλλη καταχώριση, ώστε να επιλέγεται όταν φορτώσει η σελίδα.

Το input type radio είναι παρόμοιο με το στοιχείο ελέγχου <select>, αλλά αντί για μια dropdown λίστα, εμφανίζει όλες τις καταχωρήσεις, ώστε ο επισκέπτης να μπορεί να επισημάνει μία από αυτές. Τα αποτελέσματα του παρακάτω κώδικα εμφανίζονται στην Figure 6.

Σημειώστε ότι όλα τα input types radio στην ίδια ομάδα έχουν το ίδιο name attribute. Καθένα από αυτά είναι αποκλειστικό, επομένως το αντίστοιχο value attribute για την επιλεγμένη καταχώριση θα είναι αυτό που σχετίζεται με το κοινόχρηστο name attribute. Το attribute checked, λειτουργεί όπως το attribute selected του στοιχείου ελέγχου <select>. Σηματοδοτεί την αντίστοιχη καταχώριση όταν η σελίδα φορτώνεται για πρώτη φορά. Το tag <label> είναι ιδιαίτερα χρήσιμο για καταχωρίσεις radio, επειδή επιτρέπει στον επισκέπτη να ελέγξει μια καταχώριση, κάνοντας κλικ ή πατώντας στο αντίστοιχο κείμενο επιπλέον του ίδιου του στοιχείου ελέγχου.

Ενώ τα στοιχεία ελέγχου radio προορίζονται για την επιλογή μόνο μιας καταχώρισης μιας λίστας, το input type checkbox επιτρέπει στον επισκέπτη να ελέγχει πολλές καταχωρίσεις:

Τα checkboxes μπορούν επίσης να χρησιμοποιήσουν το attribute checked για να κάνουν καταχωρίσεις, επιλεγμένες από προεπιλογή. Αντί για τα στρογγυλά στοιχεία ελέγχου ενός radio input, το checkbox αποδίδεται ως τετράγωνα στοιχεία ελέγχου, όπως φαίνεται στην Figure 7.

Εάν επιλεγούν περισσότερες από μία καταχωρίσεις, το πρόγραμμα περιήγησης θα τις υποβάλει με το ίδιο όνομα, απαιτώντας από τον προγραμματιστή του backend να γράψει συγκεκριμένο κώδικα για να διαβάσει σωστά τα δεδομένα φόρμας που περιέχουν checkboxes.

Για να βελτιωθεί η χρηστικότητα, τα input fields μπορούν να ομαδοποιηθούν μέσα σε ένα <fieldset> tag:

Το tag <legend> περιέχει το κείμενο που τοποθετείται στην κορυφή του πλαισίου που δημιουργεί το tag <fieldset>, γύρω από τα στοιχεία ελέγχου (Figure 8).

Το tag <fieldset> δεν αλλάζει τον τρόπο υποβολής των τιμών των πεδίων στον server, αλλά επιτρέπει στον προγραμματιστή του frontend να ελέγχει τα nested στοιχεία ελέγχου πιο εύκολα. Για παράδειγμα, θέτοντας το attribute disabled μέσα σε ένα <fieldset> attribute, θα καταστήσει όλα τα εσωτερικά του elements μη διαθέσιμα στον επισκέπτη.

Υπάρχουν περιπτώσεις όπου ο προγραμματιστής θέλει να συμπεριλάβει πληροφορίες στη φόρμα που να μην μπορεί να χειριστεί ο επισκέπτης, δηλαδή να υποβάλει μια τιμή που έχει επιλέξει ο προγραμματιστής χωρίς να παρουσιάσει ένα πεδίο φόρμας όπου ο επισκέπτης μπορεί να πληκτρολογήσει ή να αλλάξει την τιμή. Ο προγραμματιστής μπορεί να θέλει, για παράδειγμα, να συμπεριλάβει ένα αναγνωριστικό token για τη συγκεκριμένη φόρμα που δεν χρειάζεται να το δει ο επισκέπτης. Ένα hidden [κρυφό] element φόρμας κωδικοποιείται όπως στο ακόλουθο παράδειγμα:

Η τιμή ενός hidden input field προστίθεται συνήθως στο έγγραφο στην πλευρά του server, κατά την απόδοση του εγγράφου. Τα hidden inputs αντιμετωπίζονται σαν συνηθισμένα πεδία όταν το πρόγραμμα περιήγησης τις στέλνει στον server, ο οποίος τις διαβάζει επίσης ως συνηθισμένα input fields.

Εκτός από τα δεδομένα κειμένου, είτε πληκτρολογημένα είτε επιλεγμένα από μια λίστα, οι φόρμες HTML μπορούν επίσης να υποβάλουν αυθαίρετα αρχεία στον server. Το input type file επιτρέπει στον επισκέπτη να επιλέξει ένα αρχείο από το τοπικό σύστημα αρχείων και να το στείλει απευθείας από την ιστοσελίδα:

Αντί για ένα πεδίο φόρμας για γραφή ή επιλογή τιμής, το file input type εμφανίζει ένα κουμπί browse που θα ανοίξει ένα παράθυρο διαλόγου αρχείων. Οποιοσδήποτε τύπος αρχείου είναι αποδεκτός από το`file` input type, αλλά ο προγραμματιστής του backend πιθανότατα θα περιορίσει τους επιτρεπόμενους τύπους αρχείων και το μέγιστο μέγεθός τους. Η επαλήθευση τύπου αρχείου μπορεί επίσης να πραγματοποιηθεί στο frontend προσθέτοντας το attribute accept. Για να αποδεχτείτε μόνο εικόνες JPEG και PNG, για παράδειγμα, το attribute accept θα πρέπει να είναι accept="image/jpeg, image/png".

Από προεπιλογή, η φόρμα υποβάλλεται όταν ο επισκέπτης πατήσει το πλήκτρο Enter σε οποιοδήποτε input field. Για να γίνουν τα πράγματα πιο διαισθητικά, θα πρέπει να προστεθεί ένα κουμπί υποβολής με το input type submit:

Το κείμενο στο attribute value εμφανίζεται επάνω στο κουμπί, όπως φαίνεται στην Figure 9.

Ένα άλλο χρήσιμο κουμπί που πρέπει να συμπεριληφθεί σε σύνθετες φόρμες είναι το κουμπί reset, το οποίο διαγράφει τη φόρμα και την επαναφέρει στην αρχική της κατάσταση:

Όπως το κουμπί υποβολής, το κείμενο στο attribute value χρησιμοποιείται για την ετικέτα του κουμπιού. Εναλλακτικά, το tag <button> μπορεί να χρησιμοποιηθεί για την προσθήκη κουμπιών σε φόρμες ή οπουδήποτε αλλού στη σελίδα. Σε αντίθεση με τα κουμπιά που κατασκευάζονται με το tag <input>, το element του κουμπιού έχει ένα closing tag και η ετικέτα του κουμπιού είναι το εσωτερικό τους περιεχόμενο:

Εντός μιας φόρμας, η προεπιλεγμένη ενέργεια για το element button είναι η υποβολή της φόρμας. Όπως τα κουμπιά input, το type attribute του κουμπιού μπορεί να αλλάξει σε reset.

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

Από την πλευρά του server, η πιο κοινή προσέγγιση είναι να έχετε ένα script αρχείο που θα αναλύει, θα επικυρώνει και θα επεξεργάζεται τα δεδομένα της φόρμας σύμφωνα με το σκοπό της εφαρμογής. Για παράδειγμα, ο προγραμματιστής του backend θα μπορούσε να γράψει ένα script που ονομάζεται receive_form.php για να λάβει τα δεδομένα που αποστέλλονται από τη φόρμα. Στην πλευρά του client, το script υποδεικνύεται στο attribute action του tag φόρμας:

Το attribute action ακολουθεί τους ίδιους κανόνες με όλες τις διευθύνσεις HTTP. Εάν το script βρίσκεται στο ίδιο επίπεδο ιεραρχίας της σελίδας που περιέχει τη φόρμα, μπορεί να γραφτεί χωρίς το μονοπάτι του. Διαφορετικά, πρέπει να παρέχεται το απόλυτο ή η σχετικό μονοπάτι. Το script θα πρέπει επίσης να δημιουργήσει το response για να χρησιμεύσει ως σελίδα προορισμού, η οποία φορτώνεται από το πρόγραμμα περιήγησης αφού ο επισκέπτης υποβάλει τη φόρμα.

Το HTTP παρέχει διακριτές μεθόδους για την αποστολή δεδομένων φόρμας μέσω μιας σύνδεσης με τον server. Οι πιο συνηθισμένες μέθοδοι είναι get και post, οι οποίες θα πρέπει να υποδεικνύονται στο attribute method του tag form:

Ή:

Στη μέθοδο get, τα δεδομένα της φόρμας κωδικοποιούνται απευθείας στο request URL. Όταν ο επισκέπτης υποβάλει τη φόρμα, το πρόγραμμα περιήγησης θα φορτώσει τη διεύθυνση URL που ορίζεται στο attribute action με τα πεδία φόρμας που έχουν προστεθεί σε αυτήν.

Η μέθοδος get προτιμάται για μικρές ποσότητες δεδομένων, όπως απλές φόρμες επικοινωνίας. Ωστόσο, η διεύθυνση URL δεν μπορεί να υπερβαίνει τους μερικές χιλιάδες χαρακτήρες, επομένως η μέθοδος post θα πρέπει να χρησιμοποιείται όταν οι φόρμες περιέχουν μεγάλα ή μη πεδία κειμένου, όπως εικόνες.

Η μέθοδος post κάνει το πρόγραμμα περιήγησης να στέλνει τα δεδομένα της φόρμας στην ενότητα body του HTTP request. Αν και είναι απαραίτητη για binary δεδομένα που υπερβαίνουν το όριο μεγέθους μιας διεύθυνσης URL, η μέθοδος post προσθέτει περιττό overhead στη σύνδεση όταν χρησιμοποιείται σε απλούστερες μορφές κειμένου, επομένως η μέθοδος get προτιμάται σε τέτοιες περιπτώσεις.

Η επιλεγμένη μέθοδος δεν επηρεάζει τον τρόπο με τον οποίο ο επισκέπτης αλληλεπιδρά με τη φόρμα. Οι μέθοδοι get και post επεξεργάζονται διαφορετικά από το script του server που λαμβάνει τη φόρμα.

Όταν χρησιμοποιείτε τη μέθοδο post, είναι επίσης δυνατό να αλλάξετε τον τύπο MIME των περιεχομένων της φόρμας με το attribute φόρμας enctype. Αυτό επηρεάζει τον τρόπο με τον οποίο τα πεδία και οι τιμές φόρμας θα γίνουν stacked μαζί στην HTTP επικοινωνία με τον server. Η προεπιλεγμένη τιμή για το enctype είναι application/x-www-form-urlencoded, η οποία είναι παρόμοια με τη μορφή που χρησιμοποιείται στη μέθοδο get. Εάν η φόρμα περιέχει input fields του τύπου file, θα πρέπει να χρησιμοποιηθεί το enctype multipart/form-data.