Σε αυτόν τον οδηγό σας δείχνω πώς μπορείτε να υλοποιήσετε τα δύο πεδία εισόδου search και tel στα Φόρμα Web σας. Αυτοί οι τύποι εισόδου είναι ειδικοί για ερωτήματα αναζήτησης και τηλεφωνικούς αριθμούς και προσφέρουν μερικές χρήσιμες λειτουργίες που μπορούν να κάνουν τη ζωή σας και των χρηστών σας πιο εύκολη. Θα μάθετε πώς να χρησιμοποιήσετε αυτές τις εισόδους σωστά και ποια πλεονεκτήματα φέρνουν μαζί τους.
Σημαντικές Εστίες
- Τα πεδία εισόδου search και tel προσφέρουν απλούς τρόπους να υλοποιήσετε εισαγωγές που σχετίζονται με αναζητήσεις και τηλεφωνικές κλήσεις στις φόρμες.
- Η λειτουργία search υποστηρίζεται σε πολλούς περιηγητές και διαθέτει μερικές φιλικές προς τον χρήστη ιδιότητες, ενώ το tel είναι ειδικά σχεδιασμένο για την εισαγωγή τηλεφωνικών αριθμών.
- Και τα δύο δεν διαθέτουν ειδικές λειτουργίες επικύρωσης, αλλά μπορούν να συμπληρωθούν με τακτικές εκφράσεις.
Τύπος Εισόδου "search"
Αρχικά, ας εξετάσουμε το πεδίο εισόδου για αναζήτηση. Μοιάζει με ένα κανονικό πεδίο κειμένου, αλλά με συγκεκριμένες προσαρμογές στη λειτουργικότητά του.
Το πεδίο εισόδου παρουσιάζεται συνήθως μέσω ενός απλού πεδίου κειμένου, με το Chrome για παράδειγμα να εμφανίζει ένα "Χ" για διαγραφή της εισόδου. Αυτό το χαρακτηριστικό είναι πρακτικό, δίνοντας στους χρήστες τη δυνατότητα να διαγράψουν γρήγορα μια αναζήτηση και να ξεκινήσουν μια νέα είσοδο.
Επίσης, μπορείτε να ορίσετε έναν placeholder που να εμφανίζει στους χρήστες τι πρέπει να εισαγάγουν σε αυτό το πεδίο. Για παράδειγμα, αν προσθέσετε "Όρος Αναζήτησης" ως οδηγία, αυτό το κείμενο θα αποκρύπτεται αυτόματα καθώς πληκτρολογείτε. Αυτό δημιουργεί έναν καθαρό χειρισμό του χρήστη.
Η επικύρωση δεν προωθείται με τους τύπους εισόδου όπως αυτοί. Ωστόσο, μπορείτε να χρησιμοποιήσετε τακτικές εκφράσεις (RegEx) εάν έχετε ειδικές απαιτήσεις για τις εισαγωγές.
Τύπος Εισόδου "tel"
Στη συνέχεια, θα εξετάσουμε το πεδίο εισόδου για τηλεφωνικούς αριθμούς, δηλαδή το tel. Η δομή στο HTML είναι παρόμοια, αλλά η πρόθεση είναι διαφορετική.
Με τον τύπο tel, ο περιηγητής γνωρίζει ότι ο χρήστης πρέπει να εισάγει έναν τηλεφωνικό αριθμό. Σε κινητές συσκευές συνήθως εμφανίζεται μόνο η αριθμητική πληκτρολόγηση, κάτι που διευκολύνει σημαντικά την εισαγωγή.
Δεν υπάρχει μεγάλη διαφορά μεταξύ του κανονικού πεδίου κειμένου. Και εδώ θα μπορούσατε να χρησιμοποιήσετε έναν placeholder για να δώσετε οδηγίες ή να υποδείξετε ειδικές μορφές, όπως το μορφότυπο κωδικού χώρας, αν είναι απαραίτητο.
Ένα άλλο πλεονέκτημα είναι ότι οι Screenreader κατανοούν τη σημασιολογία των πεδίων εισόδου. Δίνετε στον περιηγητή και ιδιαίτερα σε άτομα με αναπηρίες μια σαφή οδηγία ότι σε αυτό το πεδίο θα πρέπει να εισαχθεί ένας τηλεφωνικός αριθμός. Αυτό μπορεί να βελτιώσει σημαντικά την προσβασιμότητα της ιστοσελίδας σας.
Επικύρωση για Τηλεφωνικούς Αριθμούς
Αν θέλετε να εξασφαλίσετε ότι οι χρήστες εισάγουν σωστό τηλεφωνικό αριθμό, σας συνιστούμε να χρησιμοποιήσετε ένα RegEx για την είσοδο. Μπορείτε εύκολα να προσαρμόσετε αυτές τις ρυθμίσεις, ανάλογα με το εάν θέλετε να υποστηρίξετε εθνικούς ή διεθνείς τηλεφωνικούς αριθμούς.
Ένα RegEx για Γερμανικούς τηλεφωνικούς αριθμούς θα ήταν μια καλή βάση. Για διεθνείς αριθμούς γίνεται πιο πολύπλοκο, καθώς οι διάφορες χώρες έχουν διαφορετικά μορφές τηλεφωνικών αριθμών. Μια καλή στρατηγική θα μπορούσε να είναι να επιλέξετε πρώτα τη χώρα και στη συνέχεια να εφαρμόσετε μια συγκεκριμένη επικύρωση για την επιλεγμένη χώρα.
