Η λειτουργία αυτόματης συμπλήρωσης είναι πλέον μια δημοφιλής λειτουργία στο διαδίκτυο. Όταν πληκτρολογεί κάποιος κάτι σε ένα πεδίο φόρμας, οι περιηγητές προσφέρουν μια λίστα προτάσεων λέξεων - εφόσον η λειτουργία είναι ενεργοποιημένη και υποστηρίζεται από τον περιηγητή.
Τέτοιες εφαρμογές μπορούν πλέον να υλοποιηθούν πολύ εύκολα. Γι' αυτό αναθέτουμε στο στοιχείο input το χαρακτηριστικό autocomplete.
<input type="text" autocomplete="on" />
Με την τιμή on ενεργοποιείται η αυτόματη συμπλήρωση για το πεδίο. Από τώρα και πέρα, ο περιηγητής θα θυμάται τις τιμές που εισήχθησαν στο πεδίο και θα τις προτείνει αργότερα μέσω μιας λίστας επιλογών. Με αυτόν τον τρόπο, τα φόρμα μπορούν να συμπληρωθούν σημαντικά ταχύτερα.
Ωστόσο, αυτή η συμπεριφορά δεν επιθυμείται σε όλα τα πεδία. Σε τέτοιες περιπτώσεις, η αυτόματη συμπλήρωση μπορεί να απενεργοποιηθεί ρητά. Γι' αυτό αναθέτουμε στο χαρακτηριστικό autocomplete την τιμή off.
<input type="text" autocomplete="off" />
Εναλλακτικά, μπορούμε επίσης να προσθέσουμε το χαρακτηριστικό autocomplete στο στοιχείο form. Ανάλογα με το αν χρησιμοποιείται η τιμή on ή off εδώ, ενεργοποιείται ή απενεργοποιείται η λειτουργία αυτόματης συμπλήρωσης για ολόκληρη τη φόρμα.
<form autocomplete="on"> .. </form>
Ωστόσο, αν γίνουν αντικρουόμενες δηλώσεις μέσα στη φόρμα, τότε εκείνες βρίσκουν εφαρμογή.
<form autocomplete="on"> Όνομα: <input type="text" name="vname" autocomplete="off" /><br /> Επώνυμο: <input type="text" name="nname" /><br /> Ταχυδρομικός κώδικας: <input type="text" name="plz" /><br /> Πόλη: <input type="text" name="ort" /> </form>
Σε αυτό το παράδειγμα, η αυτόματη συμπλήρωση θα εφαρμοστεί σε όλα τα πεδία της φόρμας, καθώς στο εισαγωγικό στοιχείο form έχει οριστεί η τιμή του χαρακτηριστικού autocomplete σε on. Η εξαίρεση εδώ αποτελεί μόνο το πεδίο vname. Επειδή σε αυτό το πεδίο η αυτόματη συμπλήρωση έχει απενεργοποιηθεί ρητά.
Για να λειτουργήσει η αυτόματη συμπλήρωση, αυτή η λειτουργία πρέπει να υποστηρίζεται από τον αντίστοιχο περιηγητή και να μην έχει απενεργοποιηθεί. Επιπλέον, στη λίστα προτάσεων εμφανίζονται μόνο τιμές που έχουν ήδη καταχωρηθεί προηγουμένως.
Για να μπορεί κανείς πραγματικά να επηρεάσει τις τιμές στη λίστα προτάσεων, εισήχθη το στοιχείο datalist με το HTML5. Αυτό το στοιχείο δεν εμφανίζει κάποια ορατή έξοδο στον περιηγητή. Μέσω των υποκείμενων στοιχείων option μπορούν να οριστούν οι τιμές για τις λίστες προτάσεων. Ένα παράδειγμα:
<div> Γλώσσα: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Μέσω του χαρακτηριστικού list του στοιχείου input δημιουργείται μια λογική σύνδεση μεταξύ του πεδίου εισαγωγής και του στοιχείου datalist. Γι' αυτό όταν χρησιμοποιείται το list και το χαρακτηριστικό id του στοιχείου datalist, πρέπει να χρησιμοποιούνται οι ίδιες τιμές.
Ορισμός εστίασης
Ένα πεδίο φόρμας μπορεί να ανατεθεί αυτόματα με την εστίαση, όταν η σελίδα φορτώνεται. Μια τέτοια λειτουργία όπως, για παράδειγμα, στην αρχική σελίδα της Google. Όταν αυτή η σελίδα φορτώνεται, μπορείτε να πληκτρολογήσετε αμέσως την αναζήτησή σας χωρίς να έχετε τοποθετήσει χειροκίνητα το δρομέα στο πεδίο αναζήτησης.
Στο HTML5, γι' αυτές τις περιπτώσεις υπάρχει το χαρακτηριστικό autofocus. Αυτό το χαρακτηριστικό κάνει το πεδίο φόρμας που το φέρει να λαμβάνει αυτόματα την εστίαση κατά τη φόρτωση της σελίδας.
Ένα παράδειγμα:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Αναζήτηση" /> </form>
Οι περιηγητές που δεν γνωρίζουν το χαρακτηριστικό autofocus το αγνοούν απλά. Αυτή η αγνόηση δεν έχει αρνητικές επιπτώσεις. (Ωστόσο, τότε το πεδίο δεν είναι εστιασμένο).
Έλεγχος εισαγωγών
Μέχρι τώρα, οι εισαγόμενες φόρμες δεν μπορούσαν να ελεγχθούν μόνο με τα εργαλεία HTML. Αν για παράδειγμα ήθελε κάποιος να ελέγξει αν ο χρήστης έχει πράγματι εισάγει μια διεύθυνση email σε ένα πεδίο φόρμας, τότε συνήθως ανατρέχαμε σε JavaScript ή PHP. Στο HTML5 αυτές οι «στροφές» δεν είναι πλέον απαραίτητες. Από τώρα και στο εξής, το HTML φέρνει ένα API επικύρωσης. Και αυτό έχει αρκετές δυνατότητες. Με πολύ μικρή προσπάθεια, οι εισαγωγές των φορμών μπορούν να ελεγχθούν.
Το HTML5 καθορίζει μερικούς κανόνες, μέσω των οποίων καθορίζεται ο τρόπος με τον οποίο γίνεται επικύρωση των πεδίων. Για παράδειγμα, τα πεδία εισόδου τύπου email ελέγχονται για το αν έχει εισα
<input id="vname" name="vname" type="text" required="required" />
Ένα πεδίο που σημειώνεται έτσι πρέπει να συμπληρωθεί, δεν πρέπει να είναι κενό.
Αλλά προσοχή: Για την επικύρωση των πεδίων, πρέπει να πληρούνται κάποιες προϋποθέσεις.
• Το στοιχείο πρέπει να έχει ανατεθεί το γνώρισμα name.
• Το στοιχείο πρέπει να βρίσκεται εντός ενός στοιχείου form, να βρίσκεται δηλαδή μέσα σε ένα φόρμα HTML. Εναλλακτικά, η σύνδεση με τη φόρμα μπορεί επίσης να επιτευχθεί μέσω του γνωρίσματος form.
• Το στοιχείο δεν πρέπει να έχει τα γνωρίσματα readonly ή disabled.
Έτσι λοιπόν θα είναι μια σωστή εφαρμογή:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Εδώ ο φυλλομετρητής θα ελέγξει αν το πεδίο έχει συμπληρωθεί. Αν το πεδίο είναι κενό και παρ' όλα αυτά προσπαθείτε να υποβάλετε τη φόρμα, ο περιηγητής θα πρέπει τώρα να εμφανίσει ένα μήνυμα σφάλματος.
Κατά τη διάρκεια αυτής της σειράς έχει ήδη τονιστεί πολλές φορές η χρήση των τύπων πεδίου φόρμας email, range, number, tel και url. Αυτά τα πεδία όχι μόνο ελέγχονται για την ύπαρξη μιας τιμής, αλλά και για τη σωστότητα της εισαγόμενης τιμής.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Στην περίπτωση των πεδίων τύπου email, για παράδειγμα, ελέγχεται αν η τιμή που εισάγετε είναι πράγματι μια συντακτικά σωστή διεύθυνση email. Αν δεν είναι αυτό το σωστό, ο φυλλομετρητής θα εκδώσει ένα μήνυμα σφάλματος.
Για την εμφάνιση του μηνύματος σφάλματος είναι υπεύθυνοι οι φυλλομετρητές.
Μην επιτρέπετε την αυτόματη επαλήθευση των πεδίων
Δεν είναι πάντα επιθυμητό να υπάρχει αυτόματη επαλήθευση των εισόδων. Αν θέλετε να αποτρέψετε την επαλήθευση ολόκληρης της φόρμας, αναθέτετε στο αρχικό στοιχείο form το γνώρισμα novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Εναλλακτικά, μπορείτε να προσθέσετε το γνώρισμα formnovalidate σε ένα κουμπί υποβολής. Αυτό είναι ενδιαφέρον όταν παρέχετε ένα κουμπί για αποθήκευση της φόρμας παράλληλα με το κουμπί αποστολής.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Αποστολή" />
<input type="submit"
formnovalidate="formnovalidate" value="Αποθήκευση" />
<input type="submit"
formnovalidate="formnovalidate" value="Αποσύνδεση" />
</form>
Σε αυτήν την περίπτωση, η φόρμα θα επικυρωθεί μόνο με το πρώτο κουμπί αποστολής. Τα άλλα δύο χρησιμεύουν για αποθήκευση και αποσύνδεση αντίστοιχα. Δεν είναι απαραίτητη η επαλήθευση σε αυτές τις περιπτώσεις.
