Σε αυτό το Οδηγός θα μάθεις όλες τις σημαντικές πτυχές των πεδίων εισόδου για διευθύνσεις email και URLs στις φόρμες HTML. Ο στόχος είναι να σου δείξουμε πώς να υλοποιήσεις αποτελεσματικά την επαλήθευση αυτών των εισόδων και πώς να προσαρμόσεις το στιλ για διαφορετικές καταστάσεις εισόδου. Αυτό θα βελτιώσει όχι μόνο την εμπειρία του χρήστη, αλλά θα βελτιώσει επίσης την ποιότητα των δεδομένων που συλλέγεις.
Σημαντικά Συμπεράσματα
- Θα μάθεις τη βασική δομή και την επαλήθευση για τα email και URLs χρησιμοποιώντας HTML.
- Επίσης, θα μάθεις πώς να παρέχεις οπτικά σχόλια στους χρήστες μέσω CSS όταν οι εισαγωγές είναι μη έγκυρες.
- Η χρήση μοτίβων για περαιτέρω επαλήθευση διευθύνσεων email και URLs εξηγείται.
Οδηγίες Βήμα προς Βήμα
1. Δημιουργία Βασικού Πεδίου Εισόδου για Email
Ξεκίνα δημιουργώντας ένα Στοιχείο Εισόδου Στάνταρ για Email. Εδώ πρέπει να ορίσεις τον τύπο ως "email" ώστε ο περιηγητής να επαληθεύει αυτόματα την εισαγωγή.
Το πεδίο εισαγωγής θα χειριστεί πλέον από το HTML ως να περιμένει μια διεύθυνση email και να δίνει οπτική ανατροφοδότηση σε περίπτωση μη έγκυρης εισόδου. Μόλις ένας χρήστης ξεκινήσει την εισαγωγή, το φόντο αλλάζει σε ροζ χρώμα για να υποδείξει κάποιο σφάλμα.
2. Επαλήθευση της Διεύθυνσης Email
Η επαλήθευση της διεύθυνσης email γίνεται με απλούς κανόνες. Πρέπει να υπάρχει τουλάχιστον ένα σύμβολο "@" ακολουθούμενο από τουλάχιστον ένα επιπλέον σύμβολο. Αυτή είναι μια βασική επαληθευτική NLP. Ωστόσο, αυτός ο κανόνας επαλήθευσης δεν είναι επαρκής για να εγγυηθεί ότι η διεύθυνση email όντως υπάρχει.
Ένα παράδειγμα μιας μη έγκυρης διεύθυνσης email θα ήταν "bla@". Σε αυτήν την περίπτωση, η υποβολή της φόρμας αποκλείεται και ο χρήστης βλέπει ένα μήνυμα λάθους.
3. Χρήση Μοτίβων για Ακριβέστερη Επαλήθευση
Για να επιτύχεις μια πιο ακριβή επαλήθευση, μπορείς να χρησιμοποιήσεις το χαρακτηριστικό "pattern". Με έναν κανονικό έκφραση (Regex) μπορείς να ορίσεις ότι η διεύθυνση email πληροί συγκεκριμένες απαιτήσεις, π.χ. μια συγκεκριμένη τομέα.
Με αυτήν την επιπλέον επαλήθευση, εξασφαλίζεις ότι δέχεσαι μόνο έγκυρες διευθύνσεις email, όπως για παράδειγμα μόνο διευθύνσεις Gmail ή GMX.
4. Απαιτούμενη Εισαγωγή και Στιλιστικό
Για να διασφαλιστεί ότι το πεδίο email συμπληρώνεται, μπορείς να προσθέσεις το χαρακτηριστικό "required". Αν ο χρήστης προσπαθήσει να υποβάλει τη φόρμα χωρίς εισαγωγή, θα λάβει άμεσα οπτική ανατροφοδότηση.
Για την εμφάνιση των μη έγκυρων εισόδων μπορείς να χρησιμοποιήσεις στο CSS τον επιλογέα ":invalid". Με αυτόν τον τρόπο, το φόντο του πεδίου γίνεται κόκκινο για να προειδοποιήσει τον χρήστη ότι η είσοδος δεν είναι σωστή.
5. Δημιουργία Πεδίου Εισόδου για URLs
Όπως και στην περίπτωση του email, είναι σημαντικό να δημιουργηθεί ένα κατάλληλο στοιχείο εισόδου για URLs. Ορίστε τον τύπο σε "url", ώστε ο περιηγητής να επαληθεύει επίσης την εισαγωγή εδώ.
6. Επαλήθευση της Διεύθυνσης URL
Οι βασικές απαιτήσεις για μια έγκυρη URL περιλαμβάνουν το ότι πρέπει να ξεκινά με "http://" ή "https://" και να έχει τουλάχιστον ένα επόμενο σύμβολο. Αν ο χρήστης πληκτρολογήσει μόνο "https", αυτό δεν είναι επαρκές.
Το ίδιο αρχή ισχύει για άλλα πρωτόκολλα όπως το "ftp". Εάν η είσοδος δεν πληροί τις προϋποθέσεις, ο περιηγητής προσφέρει ανατροφοδότηση και δεν επιτρέπει την υποβολή της φόρμας.
7. Προηγμένη Επαλήθευση με Patterns για URLs
Για να κάνεις την επαλήθευση ακόμη πιο ακριβή, μπορείς να χρησιμοποιήσεις το χαρακτηριστικό "pattern" επίσης για συγκεκριμένα πρότυπα όπως "https://www.example.com", ώστε να βοηθήσεις τους χρήστες σου να εισάγουν σωστές URLs.
8. Χρηστικότητα σε φορητές συσκευές
Ένα μεγάλο πλεονέκτημα της χρήσης τύπων "email" και "url" σε φόρμες είναι η βελτιωμένη χρηστικότητα σε φορητές συσκευές. Το πληκτρολόγιο προσαρμόζεται βέλτιστα για να διευκολύνει τους χρήστες στην εισαγωγή διευθύνσεων email και URLs.
Συνοψη
Σε αυτό το εγχειρίδιο καλύψαμε τα σημαντικότερα κριτήρια για τον έλεγχο εγκυρότητας διευθύνσεων email και URLs σε φόρμες ιστού. Έμαθες πως να πραγματοποιείς απλές και προηγμένες επικυρώσεις και πως να προσαρμόζεις το feedback του χρήστη μέσω CSS για μια καλύτερη εμπειρία χρήστη.
Συχνές Ερωτήσεις
Τι συμβαίνει αν μια δεδομένη διεύθυνση email είναι μη έγκυρη;Εάν η διεύθυνση email δεν είναι έγκυρη, η φόρμα δεν μπορεί να υποβληθεί και ο χρήστης βλέπει ένα μήνυμα σφάλματος.
Πώς μπορώ να ελέγξω ότι η δεδομένη URL είναι σωστή;Μπορείς να χρησιμοποιήσεις το χαρακτηριστικό "pattern" για να θέσεις συγκεκριμένες απαιτήσεις στη διεύθυνση URL, όπως για παράδειγμα να ξεκινάει με "http://" ή "https://".
Μπορώ να δώσω περισσότερες από μία διευθύνσεις email σε ένα πεδίο;Ναι, μπορείς να χρησιμοποιήσεις το χαρακτηριστικό "multiple" για να επιτρέψεις στους χρήστες να εισάγουν περισσότερες από μία διευθύνσεις email, χωρισμένες με κόμματα.
