Όταν φτιάχνεις μια φόρμα, χρησιμοποιείς frameworks ή εργαλεία φορμών. Από κάτω όμως όλα χρησιμοποιούν φόρμες HTML. Αν καταλάβεις πώς δουλεύουν οι φόρμες HTML, καταλαβαίνεις όλα τα υπόλοιπα. Δεν εξαρτάσαι από κανένα εργαλείο ή framework. Ξέρεις τα θεμέλια.
Σε αυτό το άρθρο θα δεις το στοιχείο form του HTML, τους τύπους πεδίων, τις ετικέτες, την επικύρωση και πώς γίνεται πραγματικά η υποβολή. Χωρίς frameworks. Χωρίς βιβλιοθήκες. Μόνο HTML και οι αρχές πάνω στις οποίες χτίζονται τα πάντα.
Το στοιχείο form του HTML
Η φόρμα είναι στοιχείο HTML που περιβάλλει τα πεδία και στέλνει τα δεδομένα τους κάπου. Η βασική δομή είναι:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Αποστολή</button>
</form>
Τρία χαρακτηριστικά μετράνε. Το action λέει στη φόρμα πού να στείλει τα δεδομένα. Το "/submit" σημαίνει υποβολή POST στο endpoint /submit του server σου. Αν το action είναι κενό, η φόρμα υποβάλλεται στην τρέχουσα σελίδα. Το method λέει στη φόρμα πώς ταξιδεύουν τα δεδομένα. Το POST στέλνει τα δεδομένα στο σώμα του αιτήματος (ασφαλές, κρυμμένο από το URL). Το GET προσθέτει τα δεδομένα στο URL (ανασφαλές για ευαίσθητα δεδομένα, χρήσιμο για αναζητήσεις). Το enctype χρειάζεται μόνο για μεταφόρτωση αρχείων. Όρισε enctype="multipart/form-data" όταν η φόρμα σου έχει πεδίο αρχείου.
Ό,τι βρίσκεται μέσα στις ετικέτες form είναι μέρος της υποβολής. Όταν ο χρήστης πατά το κουμπί υποβολής, ο browser μαζεύει όλα τα πεδία που έχουν όνομα και τα στέλνει στο URL του action με τη μέθοδο που ορίστηκε.
Τύποι πεδίων και τι κάνουν
text
<input type="text" name="first_name">
Πεδίο κειμένου μίας γραμμής. Ο browser δείχνει ένα απλό πλαίσιο κειμένου. Χωρίς επικύρωση. Επιτρέπεται κάθε χαρακτήρας.
<input type="email" name="email">
Πεδίο για διευθύνσεις email. Στον υπολογιστή μοιάζει με πεδίο κειμένου. Στο κινητό, ο browser δείχνει πληκτρολόγιο για email. Στην υποβολή, ο browser ελέγχει ότι η τιμή μοιάζει με email (περιέχει @). Μόνο βασική επικύρωση.
password
<input type="password" name="password">
Κείμενο που κρύβεται ως τελείες ή αστερίσκοι καθώς γράφεις. Η τιμή εξακολουθεί να μεταδίδεται ως απλό κείμενο, γι' αυτό χρησιμοποίησε πάντα HTTPS σε φόρμες με πεδία κωδικού.
number
<input type="number" name="age">
Στον υπολογιστή, πεδίο κειμένου που δέχεται μόνο αριθμούς. Στο κινητό, ο browser δείχνει αριθμητικό πληκτρολόγιο. Ο browser εμποδίζει την εισαγωγή μη αριθμητικών τιμών.
date
<input type="date" name="birth_date">
Επιλογέας ημερομηνίας. Σε browsers και συσκευές που το υποστηρίζουν, το πάτημα του πεδίου ανοίγει ημερολόγιο. Η τιμή έχει μορφή YYYY-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
Ένα κουτάκι που ανοιγοκλείνει. Αν είναι τσεκαρισμένο, η τιμή του πεδίου στέλνεται στην υποβολή. Αν δεν είναι, το πεδίο δεν στέλνεται καθόλου.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Πολλά radio buttons με το ίδιο όνομα λειτουργούν ως ομάδα. Μπορεί να επιλεγεί μόνο ένα κάθε φορά. Η τιμή του επιλεγμένου στέλνεται στην υποβολή.
select (αναπτυσσόμενη λίστα)
<select name="country">
<option value="us">Ηνωμένες Πολιτείες</option>
<option value="ca">Καναδάς</option>
</select>
Αναπτυσσόμενο μενού. Η τιμή της επιλεγμένης επιλογής στέλνεται στην υποβολή.
textarea
<textarea name="message"></textarea>
Πεδίο κειμένου πολλών γραμμών. Οι χρήστες μπορούν να γράψουν παραγράφους. Η τιμή περιλαμβάνει αλλαγές γραμμής.
file
<input type="file" name="resume">
Κουμπί που ανοίγει τον επιλογέα αρχείων της συσκευής. Το επιλεγμένο αρχείο στέλνεται στον server. Απαιτεί enctype="multipart/form-data" στο στοιχείο form.
hidden
<input type="hidden" name="user_id" value="12345">
Πεδίο που δεν εμφανίζεται αλλά στέλνεται στην υποβολή. Χρήσιμο για δεδομένα παρακολούθησης που πρέπει να συμπεριληφθούν αλλά ο χρήστης δεν πρέπει να τα αλλάζει.
Ετικέτες και προσβασιμότητα
Να συνδυάζεις πάντα τα πεδία με ετικέτες.
<label for="email">Διεύθυνση email</label>
<input type="email" id="email" name="email">
Το χαρακτηριστικό for της ετικέτας πρέπει να ταιριάζει με το id του πεδίου. Όταν το κάνεις σωστά:
Οι αναγνώστες οθόνης ανακοινώνουν μαζί την ετικέτα και το πεδίο, το πάτημα στην ετικέτα εστιάζει το πεδίο και οι χρήστες κινητού παίρνουν μεγαλύτερη περιοχή αφής.
Μην παραλείπεις ποτέ τις ετικέτες. Αν χρειάζεται να κρύψεις μια ετικέτα οπτικά, κρύψε την με CSS αλλά κράτα την στο HTML. Αυτό λέγεται «οπτικά κρυμμένη» ετικέτα.
Ομαδοποίηση σχετικών πεδίων
Για σχετικά πεδία, χρησιμοποίησε fieldset και legend.
<fieldset>
<legend>Διεύθυνση αποστολής</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Το στοιχείο legend ανακοινώνει την ομάδα στους αναγνώστες οθόνης. Τα fieldsets βοηθούν να οργανώνεις radio buttons και checkboxes οπτικά και σημασιολογικά.
Υποβολή φόρμας και μέθοδοι HTTP
Όταν ο χρήστης πατά το κουμπί υποβολής, ο browser μαζεύει όλα τα πεδία με όνομα, κωδικοποιεί τα δεδομένα (application/x-www-form-urlencoded από προεπιλογή), στέλνει αίτημα HTTP στο URL του action με τη μέθοδο (POST ή GET) και περιμένει απάντηση.
Ο server λαμβάνει το αίτημα και μπορεί να επεξεργαστεί τα δεδομένα. Τα δεδομένα φτάνουν ως ζεύγη κλειδιού και τιμής. Αν η μέθοδος της φόρμας είναι POST και το action είναι "/submit", το αίτημα μοιάζει ως εξής. POST /submit HTTP/1.1 με Content-Type ορισμένο σε application/x-www-form-urlencoded, και μετά τα δεδομένα εμφανίζονται ως email=user@example.com&name=John.
Ο server αναλύει αυτά τα δεδομένα και απαντά. Αν η απάντηση είναι σελίδα, ο browser τη φορτώνει. Αν η απάντηση είναι ανακατεύθυνση, ο browser πηγαίνει στο νέο URL.
Επικύρωση από την πλευρά του πελάτη
Το HTML έχει ενσωματωμένα χαρακτηριστικά επικύρωσης. Ο browser τα ελέγχει πριν στείλει τη φόρμα.
required
<input type="text" name="email" required>
Το πεδίο πρέπει να έχει τιμή. Αν μείνει κενό, η φόρμα δεν υποβάλλεται και ο browser δείχνει σφάλμα.
minlength και maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Η τιμή πρέπει να έχει πλήθος χαρακτήρων μέσα στα όρια που ορίζονται.
min και max
<input type="number" name="age" min="18" max="120">
Στα πεδία αριθμών, η τιμή πρέπει να είναι μέσα στο εύρος.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Μια κανονική έκφραση που πρέπει να ταιριάζει με την τιμή. Ένας πενταψήφιος ταχυδρομικός κωδικός ταιριάζει με [0-9]{5}.
Η επικύρωση από την πλευρά του πελάτη είναι διευκόλυνση για τους χρήστες. Τους εμποδίζει να στείλουν άκυρα δεδομένα και να δουν σφάλμα από τον server. Ποτέ όμως μην βασίζεσαι σε αυτήν για ασφάλεια. Επικύρωνε πάντα και στον server.
Η διαφορά ανάμεσα στο type="submit" και στο type="button"
<button type="submit">Αποστολή</button>
<button type="button">Αποθήκευση</button>
Ένα κουμπί με type="submit" υποβάλλει τη φόρμα όταν πατηθεί. Ένα κουμπί με type="button" δεν κάνει τίποτα από προεπιλογή. Χρησιμοποίησε type="button" όταν θέλεις να συνδέσεις event handlers JavaScript.
Πολλοί προγραμματιστές χρησιμοποιούν <button> χωρίς να ορίσουν type. Αυτό παίρνει προεπιλογή type="submit", που συνήθως είναι αυτό που θες. Να είσαι όμως ρητός για να αποφύγεις εκπλήξεις.
Γιατί να καταλάβεις τις φόρμες HTML
Αν χρησιμοποιείς React, Vue ή Angular, χτίζεις πάνω σε φόρμες HTML. Τα frameworks κρύβουν τις λεπτομέρειες, αλλά οι βασικές αρχές είναι ίδιες. Μια φόρμα εξακολουθεί να υποβάλλεται σε ένα endpoint. Η επικύρωση εξακολουθεί να χρειάζεται. Ο server εξακολουθεί να πρέπει να χειριστεί τα δεδομένα.
Όταν κάτι χαλάσει στον χειρισμό της φόρμας σου, η κατανόηση του HTML σε βοηθά να βρεις το πρόβλημα. Ξέρεις από πού έρχονται τα δεδομένα, πώς κωδικοποιούνται και τι πρέπει να λάβει ο server. Αυτό είναι το θεμέλιο.
Οι περισσότερες σύγχρονες web εφαρμογές δεν χρησιμοποιούν πια την παραδοσιακή υποβολή φόρμας. Χρησιμοποιούν JavaScript για να πιάσουν τη φόρμα, να την επικυρώσουν και να στείλουν δεδομένα με _blocked_ ή axios. Αν όμως ξέρεις πρώτα τον τρόπο του HTML, αυτά τα μοτίβα βγάζουν νόημα.
Το WEMASY και οι φόρμες
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Δες τη σελίδα τιμών του WEMASY για τα πακέτα.