Ο χρήστης πατά αποστολή. Τι γίνεται μετά; Το πρόγραμμα περιήγησης στέλνει τα δεδομένα στον διακομιστή. Ο διακομιστής τα επεξεργάζεται. Και μετά; Φορτώνει ξανά η σελίδα; Εμφανίζεται κάτι στη σελίδα; Ανακατευθύνεται ο χρήστης κάπου;
Ο χειρισμός της υποβολής φόρμας είναι η γέφυρα ανάμεσα στο frontend και το backend. Αν γίνει λάθος, ο χρήστης μπερδεύεται. Αν γίνει σωστά, η εμπειρία νιώθεις ότι είναι ομαλή και σκόπιμη. Το άρθρο εξηγεί τους διαφορετικούς τρόπους χειρισμού των υποβολών φορμών.
Παραδοσιακή υποβολή φόρμας
Στην παραδοσιακή υποβολή φόρμας, το πρόγραμμα περιήγησης στέλνει τα δεδομένα της φόρμας στον διακομιστή με τα χαρακτηριστικά action και method της φόρμας.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Όταν ο χρήστης πατά το κουμπί, το πρόγραμμα περιήγησης κωδικοποιεί τα δεδομένα της φόρμας και τα στέλνει στο /submit. Ο διακομιστής τα επεξεργάζεται και απαντά με νέα σελίδα. Το πρόγραμμα περιήγησης φορτώνει αυτή τη σελίδα. Ο χρήστης βλέπει νέο URL και νέο περιεχόμενο.
Η παραδοσιακή υποβολή είναι απλή, δουλεύει παντού και δουλεύει χωρίς JavaScript. Το κύριο μειονέκτημα είναι ότι η σελίδα φορτώνει ξανά, κάτι που μοιάζει αργό ακόμα κι αν δεν είναι, με αποτέλεσμα ο χρήστης να χάνει τη θέση κύλισης και να καθαρίζουν τα πεδία της φόρμας.
Υποβολή φόρμας με ανακατεύθυνση
Αφού ο διακομιστής επεξεργαστεί μια φόρμα, συνήθως ανακατευθύνει τον χρήστη σε σελίδα επιτυχίας ή πίσω στη φόρμα.
Στον διακομιστή, μετά την επεξεργασία της φόρμας, χρησιμοποίησε return redirect('/thank-you'), που στέλνει απάντηση ανακατεύθυνσης HTTP 303, ώστε το πρόγραμμα περιήγησης να ακολουθήσει την ανακατεύθυνση και να φορτώσει τη σελίδα /thank-you, όπου ο χρήστης βλέπει νέο περιεχόμενο σε νέο URL. Το πλεονέκτημα είναι ότι ο χρήστης ξέρει ότι η φόρμα επεξεργάστηκε και μια νέα σελίδα κάνει σαφές ότι έγινε κάτι. Το μειονέκτημα είναι ότι η σελίδα φορτώνει ξανά, χρειάζονται δύο αιτήματα προς τον διακομιστή (ένα για την υποβολή, ένα για τον προορισμό της ανακατεύθυνσης), και η εμπειρία νιώθεις πιο αργή απ' όσο χρειάζεται.
Υποβολή φόρμας με AJAX
Το AJAX (Asynchronous JavaScript and XML) σου επιτρέπει να στέλνεις δεδομένα φόρμας χωρίς να φορτώσει ξανά η σελίδα, με form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. Το πρόγραμμα περιήγησης στέλνει τα δεδομένα της φόρμας με _blocked_, ο διακομιστής τα επεξεργάζεται και απαντά, και η JavaScript παίρνει την απάντηση και ενημερώνει τη σελίδα, χωρίς επαναφόρτωση ή ανακατεύθυνση. Ο χρήστης μένει στην ίδια σελίδα αλλά βλέπει επιβεβαίωση. Το πλεονέκτημα είναι ότι είναι γρήγορο, δίνει ομαλή εμπειρία, δεν έχει επαναφόρτωση σελίδας και σου δίνει πλήρη έλεγχο για το τι γίνεται μετά. Το μειονέκτημα είναι ότι απαιτεί JavaScript, και αν η JavaScript αποτύχει, η φόρμα δεν στέλνεται, το ιστορικό δεν ενημερώνεται (το URL μένει το ίδιο) και πρέπει να χειριστείς εσύ όλη την ενημέρωση του χρήστη.
Progressive enhancement με AJAX
Το progressive enhancement σημαίνει ότι η φόρμα δουλεύει χωρίς JavaScript αλλά δουλεύει καλύτερα με αυτή. Ξεκίνα με μια παραδοσιακή φόρμα που δουλεύει χωρίς JavaScript, όπου η φόρμα στέλνεται και η σελίδα ανακατευθύνει σε σελίδα ευχαριστίας. Μετά, αν υπάρχει JavaScript, κάνε intercept το γεγονός submit με addEventListener χρησιμοποιώντας if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } ώστε να στέλνεται με AJAX και να εμφανίζεται μήνυμα στην ίδια σελίδα. Τώρα η φόρμα δουλεύει και στα δύο σενάρια. Με JavaScript, στέλνεται με AJAX και ο χρήστης μένει στη σελίδα. Χωρίς JavaScript, στέλνεται παραδοσιακά και ανακατευθύνει. Το πλεονέκτημα είναι ότι η φόρμα δουλεύει για όλους, και οι χρήστες με JavaScript παίρνουν την ομαλή εμπειρία ενώ όσοι δεν έχουν συνεχίζουν να μπορούν να στείλουν τη φόρμα. Το μειονέκτημα είναι περισσότερος κώδικας, γιατί πρέπει να συντηρείς και τις δύο διαδρομές υποβολής.
Χειρισμός σφαλμάτων υποβολής
Όταν ο διακομιστής απορρίπτει μια υποβολή φόρμας (αποτυχία επικύρωσης, σφάλμα βάσης κ.λπ.), έχεις δύο προσεγγίσεις. Στην παραδοσιακή υποβολή, ο διακομιστής ξαναδείχνει τη φόρμα με μηνύματα σφάλματος και τα εμφανίζει στον χρήστη. Στην υποβολή με AJAX, ο διακομιστής απαντά με κωδικό σφάλματος (400, 422) και μηνύματα σφάλματος, και η JavaScript δείχνει τα σφάλματα στη σελίδα με _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Δείχνε πάντα τα σφάλματα δίπλα στα πεδία που τα προκάλεσαν και όχι κρυμμένα σε μια σύνοψη, ώστε ο χρήστης να βλέπει ακριβώς τι πήγε στραβά και πού να το διορθώσει.
Χειρισμός καταστάσεων φόρτωσης
Όταν στέλνεται η φόρμα, απενεργοποίησε το κουμπί αποστολής, ώστε ο χρήστης να μην το πατήσει δύο φορές, και δείξε ένα spinner φόρτωσης ή μήνυμα με form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Απενεργοποίησε το κουμπί αμέσως, γιατί αν το αίτημα πάρει 5 δευτερόλεπτα, ο χρήστης μπορεί να το ξαναπατήσει νομίζοντας ότι δεν δούλεψε.
Τι κάνεις μετά από επιτυχημένη υποβολή
Αφού η φόρμα σταλεί με επιτυχία, έχεις επιλογές. Μπορείς να καθαρίσεις τα πεδία της φόρμας, να δείξεις μήνυμα ευχαριστίας, να ανακατευθύνεις σε σελίδα ευχαριστίας, να στείλεις στον χρήστη ένα email, να τον γυρίσεις στην προηγούμενη σελίδα ή να μείνεις στη φόρμα και να τον αφήσεις να στείλει ξανά. Διάλεξε με βάση τον σκοπό της φόρμας σου. Μια φόρμα επικοινωνίας πρέπει να δείχνει μήνυμα ευχαριστίας, μια φόρμα κράτησης πρέπει να ανακατευθύνει στην επιβεβαίωση της κράτησης και μια εγγραφή στο newsletter πρέπει να τον γυρίζει στη σελίδα όπου ήταν.
Πώς χειρίζεται η WEMASY την υποβολή φορμών
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα.
Δες τις επιλογές για την υποβολή φορμών στο πακέτο WEMASY σου.