Αυτό το κεφάλαιο περιγράφει τα διάφορα γνωρίσματα για το στοιχείο HTML <form>. Συνεχίζουμε στα ελληνικά.
Το στοιχείο <form> χρησιμοποιείται για τη δημιουργία μιας φόρμας HTML. Οι εξής γνωρίσματα μπορούν να χρησιμοποιηθούν στο στοιχείο <form> για να προσαρμοστεί το συμπεριφορά και η εμφάνιση της φόρμας:
action: Καθορίζει το URL ή το αρχείο σεναρίου που θα επεξεργαστεί τα δεδομένα της φόρμας.method: Ορίζει τη μέθοδο υποβολής της φόρμας. Οι πιο συνηθισμένες τιμές είναι “get” και “post”.target: Καθορίζει το παράθυρο ή το πλαίσιο προορισμού για την απόκριση του χειριστή φόρμας.autocomplete: Καθορίζει εάν οι εισαγωγές της φόρμας πρέπει να έχουν αυτόματη συμπλήρωση από τον περιηγητή.enctype: Ορίζει τον τύπο κωδικοποίησης που θα χρησιμοποιηθεί για την υποβολή των δεδομένων της φόρμας.novalidate: Απενεργοποιεί την επικύρωση της φόρμας από τον περιηγητή.
Παράδειγμα χρήσης γνωρισμάτων φόρμας:
<form action="process.php" method="post" target="_blank" autocomplete="on" enctype="multipart/form-data"> <!-- Στοιχεία της φόρμας --> </form>
Στο παραπάνω παράδειγμα, ορίζεται η δράση (action) για την επεξεργασία της φόρμας στο αρχείο “process.php”. Η μέθοδος υποβολής (method) είναι “post”, ο προορισμός (target) είναι “_blank” (νέο παράθυρο ή πλαίσιο περιήγησης), η αυτόματη συμπλήρωση (autocomplete) είναι ενεργοποιημένη και ο τύπος κωδικοποίησης (enctype) είναι “multipart/form-data”.
Το γνώρισμα action καθορίζει τη δράση που θα πραγματοποιηθεί όταν υποβάλλεται η φόρμα.
Συνήθως, τα δεδομένα της φόρμας αποστέλλονται σε ένα αρχείο στον διακομιστή όταν ο χρήστης κάνει κλικ στο κουμπί υποβολής.
Στο παρακάτω παράδειγμα, τα δεδομένα της φόρμας αποστέλλονται σε ένα αρχείο με το όνομα “action_page.php”. Αυτό το αρχείο περιέχει ένα σενάριο στην πλευρά του διακομιστή που χειρίζεται τα δεδομένα της φόρμας:
<form action="action_page.php" method="post"> <!-- Στοιχεία της φόρμας --> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, ορίζεται η δράση (action) για την υποβολή της φόρμας στο αρχείο “action_page.php”. Η μέθοδος υποβολής (method) είναι “post”, που σημαίνει ότι τα δεδομένα θα αποσταλούν με τη μέθοδο POST. Όταν ο χρήστης κάνει κλικ στο κουμπί υποβολής, η φόρμα θα στείλει τα δεδομένα στο αρχείο “action_page.php” για επεξεργασία στον διακομιστή.
Το γνώρισμα target καθορίζει πού θα εμφανιστεί η απόκριση που λαμβάνεται μετά την υποβολή της φόρμας.
Το γνώρισμα target μπορεί να έχει μία από τις ακόλουθες τιμές:
_blank: Η απόκριση εμφανίζεται σε ένα νέο παράθυρο ή καρτέλα._self: Η απόκριση εμφανίζεται στο τρέχον παράθυρο._parent: Η απόκριση εμφανίζεται στον γονικό πλαίσιο._top: Η απόκριση εμφανίζεται σε ολόκληρο το παράθυρο.framename: Η απόκριση εμφανίζεται σε ένα πλαίσιο με συγκεκριμένο όνομα.
[adinserter block=”2″]
Η προεπιλεγμένη τιμή είναι _self, που σημαίνει ότι η απόκριση θα ανοίξει στο τρέχον παράθυρο.
Παράδειγμα χρήσης γνωρίσματος target:
<form action="action_page.php" method="post" target="_blank"> <!-- Στοιχεία της φόρμας --> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, η φόρμα ορίζει την υποβολή στο αρχείο “action_page.php” και το γνώρισμα target ορίζεται ως “_blank”. Αυτό σημαίνει ότι η απόκριση από την υποβολή της φόρμας θα εμφανιστεί σε ένα νέο παράθυρο ή καρτέλα.
Το γνώρισμα method καθορίζει τη μέθοδο HTTP που θα χρησιμοποιηθεί για την υποβολή των δεδομένων της φόρμας.
Τα δεδομένα της φόρμας μπορούν να αποσταλούν είτε ως μεταβλητές URL (με method="get") είτε ως μια συναλλαγή HTTP post (με method="post").
Η προεπιλεγμένη μέθοδος HTTP για την υποβολή δεδομένων φόρμας είναι η GET.
Παράδειγμα χρήσης γνωρίσματος method:
<form action="action_page.php" method="post"> <!-- Στοιχεία της φόρμας --> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, η φόρμα ορίζει την υποβολή στο αρχείο “action_page.php” και το γνώρισμα method ορίζεται ως “post”. Αυτό σημαίνει ότι τα δεδομένα της φόρμας θα αποσταλούν με τη μέθοδο POST. Όταν ο χρήστης κάνει κλικ στο κουμπί υποβολής, η φόρμα θα στείλει τα δεδομένα στο αρχείο “action_page.php” για επεξεργασία στον διακομιστή.
Βεβαιωθείτε ότι έχετε τοποθετήσει την κατάλληλη ενέργεια (URL ή αρχείο σεναρίου) για την αναζήτηση των δεδομένων που θα υποβληθούν με τη μέθοδο GET.
Παράδειγμα χρήσης γνωρίσματος method με GET:
<form action="search.php" method="get"> <label for="search-input">Αναζήτηση:</label> <input type="text" id="search-input" name="query"> <input type="submit" value="Αναζήτηση"> </form>
Στο παραπάνω παράδειγμα, η φόρμα ορίζει την υποβολή στο αρχείο “search.php” και το γνώρισμα method ορίζεται ως “get”. Όταν ο χρήστης υποβάλλει τη φόρμα, το περιεχόμενο του πεδίου εισαγωγής με το όνομα “query” θα είναι προσαρτημένο στο URL ως μεταβλητή, για παράδειγμα: “search.php?query=το+κείμενο+αναζήτησης”. Έτσι, το αρχείο “search.php” μπορεί να λάβει την αναζήτηση που υποβλήθηκε και να επεξεργαστεί τα δεδομένα αναζήτησης ανάλογα.
Σημειώσεις σχετικά με το GET:
- Προσθέτει τα δεδομένα της φόρμας στο URL σε μορφή ζευγών όνομα/τιμής.
- ΠΟΤΕ μη χρησιμοποιείτε το GET για την αποστολή ευαίσθητων δεδομένων! (τα δεδομένα που υποβάλλονται μέσω της φόρμας είναι ορατά στο URL!)
- Ο μήκος ενός URL έχει περιορισμούς (2048 χαρακτήρες).
- Χρήσιμο για υποβολές φόρμας όπου ο χρήστης θέλει να αποθηκεύσει το αποτέλεσμα ως σελιδοδείκτη.
- Το GET είναι καλό για μη ασφαλή δεδομένα, όπως οι συμβολοσειρές ερωτημάτων στο Google.
Σημειώσεις σχετικά με το POST:
- Προσθέτει τα δεδομένα της φόρμας μέσα στο σώμα του αιτήματος HTTP (τα δεδομένα που υποβάλλονται μέσω της φόρμας δεν εμφανίζονται στο URL).
- Το POST δεν έχει περιορισμούς μεγέθους και μπορεί να χρησιμοποιηθεί για την αποστολή μεγάλου όγκου δεδομένων.
- Οι υποβολές φόρμας με τη χρήση του POST δεν μπορούν να αποθηκευτούν ως σελιδοδείκτες.
Το γνώρισμα autocomplete καθορίζει εάν μια φόρμα πρέπει να έχει ενεργοποιημένη ή απενεργοποιημένη τη λειτουργία αυτόματης συμπλήρωσης.
[adinserter block=”3″]
Όταν η αυτόματη συμπλήρωση είναι ενεργοποιημένη, ο περιηγητής συμπληρώνει αυτόματα τιμές βάσει των τιμών που ο χρήστης έχει εισαγάγει προηγουμένως.
Το γνώρισμα autocomplete μπορεί να έχει τις εξής τιμές:
on: Ενεργοποιεί τη λειτουργία αυτόματης συμπλήρωσης.off: Απενεργοποιεί τη λειτουργία αυτόματης συμπλήρωσης.
Παράδειγμα χρήσης γνωρίσματος autocomplete:
<form action="action_page.php" method="post" autocomplete="on"> <!-- Στοιχεία της φόρμας --> <input type="text" name="username" autocomplete="off"> <input type="password" name="password" autocomplete="new-password"> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, το γνώρισμα autocomplete της φόρμας ορίζεται ως “on”, ενεργοποιώντας τη λειτουργία αυτόματης συμπλήρωσης για όλα τα πεδία. Ωστόσο, μπορούμε επίσης να απενεργοποιήσουμε τη λειτουργία αυτόματης συμπλήρωσης για συγκεκριμένα πεδία, όπως στο παράδειγμα με το πεδίο username που έχει `autocomplete=”off”. Επίσης, μπορούμε να χρησιμοποιήσουμε την τιμή new-password στο πεδίο password` για να ανακαλύψουμε νέα κωδικά πρόσβασης χωρίς να συμπληρώνονται αυτόματα από προηγούμενες τιμές.
Το γνώρισμα novalidate είναι ένα χαρακτηριστικό boolean.
Όταν είναι παρόν, καθορίζει ότι τα δεδομένα της φόρμας (είσοδος) δεν πρέπει να επικυρωθούν κατά την υποβολή.
Παράδειγμα χρήσης του γνωρίσματος novalidate:
<form action="action_page.php" method="post" novalidate> <!-- Στοιχεία της φόρμας --> <input type="text" name="name" required> <input type="email" name="email" required> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, το γνώρισμα novalidate της φόρμας ορίζεται ως παρόν, γεγονός που σημαίνει ότι τα δεδομένα της φόρμας δεν θα επικυρωθούν πριν από την υποβολή. Ως αποτέλεσμα, ακόμα και αν τα πεδία name και email έχουν το γνώρισμα required, ο χρήστης μπορεί να υποβάλει τη φόρμα χωρίς να συμπληρώσει αυτά τα πεδία.