Βίντεο: Section 10 2024
Μπορείτε να κάνετε βασική επικύρωση χρησιμοποιώντας το JavaScript για διάφορους τύπους εισόδου. Αυτή η πρώτη άσκηση δημιουργεί το HTML για τη φόρμα ιστού. Μόλις ολοκληρώσετε αυτήν την άσκηση, θα έχετε την επικύρωση JavaScript για μια φόρμα.
-
Ανοίξτε τον επεξεργαστή κειμένου και δημιουργήστε ένα νέο κενό αρχείο.
-
Στο πλαίσιο του αρχείου, τοποθετήστε το παρακάτω HTML:
Μια φόρμα Πληροφορίες Χρήστη Όνομα: * Όνομα απαιτείται
Πόλη:
Κράτος: Αλαμπάμα Καλιφόρνια Κολοράντο Φλόριντα Ιλλινόις Νιού Τζέρσεϊ Νέα Υόρκη Ουισκόνσιν > Κωδικός:
Διεύθυνση ηλεκτρονικού ταχυδρομείου: * Απαιτείται η αποστολή μηνύματος ηλεκτρονικού ταχυδρομείου
Αριθμός τηλεφώνου: Μορφή: xxx-xxx-xxxx
Επαληθεύστε τον κωδικό πρόσβασης: * Οι κωδικοί πρόσβασης δεν ταιριάζουν
Αποθηκεύστε το αρχείο ως φόρμα. php στη ρίζα του εγγράφου σας.
-
localhost
/ φόρμα. php. - Το HTML φαίνεται πολύ κακό, με τα λάθος ευθυγραμμισμένα πεδία φόρμας και τα σφάλματα που εμφανίζονται. Μπορείτε να το διορθώσετε με το CSS. Δημιουργήστε ένα νέο αρχείο κειμένου στον επεξεργαστή σας και εισαγάγετε το ακόλουθο CSS:
form fieldset {display: inline-block}}. radioButton {float: κανένας; οθόνη: inline; περιθώριο-δεξιά: 0. 1em; πλάτος: 2em;} ετικέτα φόρμας {width: 8em; περιθώριο-δεξιά: 1em; float: αριστερά. κείμενο-ευθυγράμμιση: δεξιά? εμφάνιση: μπλοκ?} είσοδος φόρμας {width: 15em;} #submit {margin-top: 2em; float: δεξιά}. errorClass {χρώμα-φόντου: # CC6666;} #errorDiv {col ή: red;}. errorFeedback {visibility: hidden}}
-
Αποθηκεύστε το αρχείο ως φόρμα. css στη ρίζα του εγγράφου σας.
-
Αυτό το αρχείο αναφέρθηκε ήδη στην HTML που δημιουργήσατε στο Βήμα 2, οπότε δεν είναι απαραίτητες άλλες αλλαγές στο συγκεκριμένο αρχείο.
Επαναφόρτωση της φόρμας. php στο πρόγραμμα περιήγησής σας.Με το HTML και CSS στη θέση του, ήρθε η ώρα να προσθέσετε κάποιο JavaScript.
-
Σημείωση:
Κατασκευάζετε τον κώδικα επικύρωσης αργότερα σε αυτό το κεφάλαιο. Προς το παρόν, προσθέτετε μόνο ένα βασικό αρχείο JavaScript.
Τοποθετήστε το ακόλουθο JavaScript στο αρχείο. -
$ (έγγραφο). έτοιμο (λειτουργία () {alert ("hello");});
-
Αποθηκεύστε το αρχείο ως φόρμα. js στη ρίζα του εγγράφου σας.
Επαναφόρτωση φόρμας. php στο πρόγραμμα περιήγησης ιστού σας.
-
Κάντε κλικ στο OK για να απορρίψετε το παράθυρο διαλόγου.
-
Ενώ το ίδιο το παράθυρο προειδοποίησης δεν είναι κάτι καινούργιο, αποδεικνύει ότι έχετε συνδέσει σωστά το HTML και τη JavaScript για αυτήν την άσκηση. Από εδώ, μπορείτε να εργαστείτε σχετικά με την προσθήκη επικύρωσης JavaScript στη φόρμα. Πριν από αυτό, μπορεί να σας φανεί χρήσιμο να καταργήσετε κάποιες από τις HTML και CSS που έχετε δημιουργήσει.