Home-theater-designers
Η συλλογή δεδομένων από έναν χρήστη ιστότοπου μπορεί να γίνει με διάφορους τρόπους. Οι φόρμες στους ιστότοπους μπορούν να έχουν μια απλή λειτουργία, όπως η εγγραφή ενός χρήστη σε ένα ενημερωτικό δελτίο ή ένας πιο περίπλοκος σκοπός, όπως η φόρμα αίτησης για εργασία.
Ωστόσο, ένα κοινό πράγμα που έχουν όλες αυτές οι απλές έως πολύπλοκες μορφές είναι το HTML και πιο συγκεκριμένα το HTML ετικέτα.
Χρήση της ετικέτας φόρμας
ο Η ετικέτα είναι ένα στοιχείο HTML που χρησιμοποιείται ως κοντέινερ για να περικλείσει άλλα στοιχεία που μπορούν να θεωρηθούν ως δομικά στοιχεία για φόρμες. Μερικά από αυτά τα θεμελιώδη στοιχεία περιλαμβάνουν το ετικέτα, το ετικέτα, και το ετικέτα.
ο Η ετικέτα έχει ένα σημαντικό χαρακτηριστικό που συμβάλλει στη λειτουργικότητά της. Αυτό το χαρακτηριστικό ονομάζεται ενέργεια και χρησιμοποιείται για τον προσδιορισμό του αρχείου στο οποίο θα μεταβιβαστούν τα δεδομένα που έχουν εισαχθεί στη φόρμα.
Χρησιμοποιώντας το Παράδειγμα ετικέτας
Το παραπάνω παράδειγμα δείχνει πώς να χρησιμοποιήσετε την ετικέτα φόρμας στα έργα σας. Ένα από τα κυριότερα συμπεράσματα είναι ότι εάν ανοίξετε μια ετικέτα φόρμας θα πρέπει να θυμάστε να την κλείσετε. Αυτό θα δημιουργήσει μια δομή φόρμας και θα διασφαλίσει επίσης ότι τα δεδομένα που έχουν εισαχθεί στη φόρμα υποβάλλονται σε σωστή επεξεργασία.
Χρήση της ετικέτας
ο Η ετικέτα χρησιμοποιείται για να περιγράψει τα δεδομένα σε κάθε πεδίο εισαγωγής σε μια φόρμα. Αυτή η ετικέτα έχει ένα Για χαρακτηριστικό, το οποίο χρησιμοποιείται για να βελτιώσει τη λειτουργικότητα μιας φόρμας.
Σχετίζεται με: Οι καλύτεροι δωρεάν διαδικτυακοί επεξεργαστές HTML για τον έλεγχο του κώδικα σας
Εάν το αναγνωριστικό που έχει εκχωρηθεί στο αντίστοιχο πεδίο εισαγωγής ταιριάζει με το Για αξία στο ετικέτα, τότε αυτό το πεδίο εισαγωγής θα επισημανθεί αυτόματα όταν κάνετε κλικ στην ετικέτα.
Χρησιμοποιώντας το Παράδειγμα ετικέτας
First Name:
Στο παραπάνω παράδειγμα μπορείτε να δείτε ότι το Για στο χαρακτηριστικό εκχωρείται η τιμή fname Το Επομένως, εάν δημιουργήσετε ένα πεδίο εισαγωγής με το fname id, αυτό το πεδίο θα επισημαίνεται κάθε φορά που κάνετε κλικ στο Πρώτα Ονομα επιγραφή.
Χρήση της ετικέτας
Στην πιο βασική του μορφή, το η ετικέτα μπορεί να θεωρηθεί ως πλαίσιο κειμένου. ο Η ετικέτα καταγράφει δεδομένα από τον χρήστη και ένα από τα πιο σημαντικά χαρακτηριστικά της είναι το τύπος Χαρακτηριστικό. ο τύπος Το χαρακτηριστικό υποδεικνύει τον τύπο δεδομένων που μπορεί να συλλέξει αυτό το πλαίσιο κειμένου.
Σχετίζεται με: Πώς να δημιουργήσετε μια στοιβασμένη φόρμα στο CSS
Υπάρχουν πολλές διαφορετικές τιμές που μπορείτε να αντιστοιχίσετε στο τύπος χαρακτηριστικό, αλλά μερικά από τα πιο δημοφιλή είναι τα ακόλουθα.
- Κείμενο
- Αριθμός
- ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
- Εικόνα
- Ημερομηνία
- Πλαίσιο ελέγχου
- Ραδιόφωνο
- Κωδικός πρόσβασης
Χρησιμοποιώντας την ετικέτα Παράδειγμα
First Name:
ο Η ετικέτα στον παραπάνω κώδικα έχει τρία διαφορετικά χαρακτηριστικά που το καθένα έχει μια μοναδική λειτουργία. ο τύπος στο χαρακτηριστικό εκχωρείται μια τιμή κειμένου που σημαίνει ότι το πλαίσιο κειμένου θα δέχεται μόνο χαρακτήρες.
ο ταυτότητα Το χαρακτηριστικό είναι ένα μοναδικό αναγνωριστικό για το πλαίσιο κειμένου και είναι σημαντικό επειδή παρέχει πρόσβαση σε αυτό το στοιχείο από ένα αρχείο CSS. ο όνομα Το χαρακτηριστικό είναι επίσης ένα μοναδικό αναγνωριστικό. Ωστόσο, το χαρακτηριστικό όνομα χρησιμοποιείται για να αλληλεπιδράσει με ένα στοιχείο από την πλευρά του διακομιστή της ανάπτυξης.
ο ταυτότητα και όνομα Τα χαρακτηριστικά αποδίδονται συνήθως με την ίδια τιμή καθώς το ένα παρέχει πρόσβαση σε ένα στοιχείο από την πλευρά του πελάτη και το άλλο από την πλευρά του διακομιστή.
Χρήση του στοιχείου πλαισίου ελέγχου
Το στοιχείο ελέγχου είναι πολύ μοναδικό σε σύγκριση με τα άλλα στοιχεία που μπορείτε να χρησιμοποιήσετε με το ετικέτα. Επιτρέπει στον χρήστη να επιλέξει μία ή περισσότερες επιλογές από μια λίστα σχετικών επιλογών. Τα πλαίσια ελέγχου αναγνωρίζονται εύκολα επειδή αντιπροσωπεύονται από μικροσκοπικά τετράγωνα πλαίσια που περιέχουν μια επιταγή όταν είναι επιλεγμένα.
Χρησιμοποιώντας το Παράδειγμα στοιχείου πλαισίου ελέγχου
Programming Languages:
Java
JavaScript
Python
Στο παραπάνω παράδειγμα, καθένα από τα στοιχεία του πλαισίου ελέγχου έχει ένα χαρακτηριστικό τιμής και αυτό είναι σημαντικό επειδή βοηθά στη διάκριση κάθε επιλογής πλαισίου ελέγχου από τη συλλογή. Επομένως, εάν ένας χρήστης επιλέξει 'Java' από τις παραπάνω επιλογές, τα δεδομένα θα το αντικατοπτρίζουν.
Χρήση της ετικέτας και των ραδιοφωνικών στοιχείων
ο Η ετικέτα και τα στοιχεία ραδιοφώνου είναι παρόμοια με την έννοια ότι επιτρέπουν σε έναν χρήστη να επιλέγει μόνο μία τιμή κάθε φορά. Επομένως, μπορεί κανείς να πει ότι έχουν την ίδια λειτουργία. Ωστόσο, είναι πολύ διαφορετικές στην εμφάνιση.
Το στοιχείο ραδιοφώνου είναι πιο κοντά στο στοιχείο του πλαισίου ελέγχου στην εμφάνιση, ωστόσο, με το στοιχείο ραδιοφώνου έχετε κύκλους αντί για τετράγωνα.
ο Η ετικέτα παράγει αυτό που είναι ουσιαστικά ένα αναπτυσσόμενο πλαίσιο, το οποίο επιτρέπει στον χρήστη να επιλέξει μια μεμονωμένη τιμή.
Χρησιμοποιώντας το παράδειγμα του στοιχείου ετικέτας και ραδιοφώνου
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Χρήση του στοιχείου ημερομηνίας
Το στοιχείο ημερομηνίας παράγει ένα μικρό πλαίσιο κειμένου που δημιουργεί ένα ημερολόγιο όταν κάνετε κλικ. Χρησιμοποιώντας ημερομηνία ως τύπος εισαγωγής στις φόρμες σας διασφαλίζει έναν χρήστη που ενδεχομένως εισάγει εσφαλμένη ημερομηνία, η οποία μπορεί ενδεχομένως να οδηγήσει στη συλλογή εσφαλμένων δεδομένων.
Χρησιμοποιώντας το παράδειγμα στοιχείου ημερομηνίας
Χρήση του στοιχείου email και κωδικού πρόσβασης
Όταν ένας προγραμματιστής εκχωρεί είτε τις τιμές ηλεκτρονικού ταχυδρομείου είτε τον κωδικό πρόσβασης στο χαρακτηριστικό τύπου ενός ετικέτα, το καθένα παράγει ένα πανομοιότυπο πλαίσιο κειμένου. Ωστόσο, όταν αρχίσετε να χρησιμοποιείτε αυτά τα πλαίσια, οι διαφορές γίνονται εμφανείς.
Το στοιχείο ηλεκτρονικού ταχυδρομείου παρακολουθεί τα δεδομένα που έχουν εισαχθεί στο πλαίσιο κειμένου και διασφαλίζει ότι κάθε υποβολή πληροί τις τυπικές απαιτήσεις μιας διεύθυνσης ηλεκτρονικού ταχυδρομείου. που σημαίνει να έχουμε ένα τοπικό μέρος, ακολουθούμενο από το σύμβολο @ και να τελειώνουμε με έναν τομέα.
Χρήση του παραδείγματος στοιχείου ηλεκτρονικού ταχυδρομείου
Στο παραπάνω παράδειγμα εισάγετε ένα νέο χαρακτηριστικό που ονομάζεται placeholder , και αυτό το χαρακτηριστικό λαμβάνει μια τιμή κειμένου που εμφανίζεται στο πλαίσιο κειμένου με γκρι χρώμα. Αυτό το κείμενο χρησιμοποιείται για να υποδείξει τα δεδομένα που πρόκειται να τοποθετηθούν στο πλαίσιο κειμένου, όπως φαίνεται στο παραπάνω παράδειγμα.
Το στοιχείο κωδικού πρόσβασης μετατρέπει τους χαρακτήρες σε αστερίσκους καθώς εισάγονται στο πλαίσιο κειμένου. Επομένως, εάν η οθόνη του υπολογιστή σας είναι ορατή σε άλλα άτομα, δεν θα βλέπουν τον κωδικό πρόσβασης που εισάγετε.
Χρήση του παραδείγματος στοιχείου κωδικού πρόσβασης
Χρησιμοποιώντας την ετικέτα κουμπιού
Σε μια μορφή, υπάρχουν συνήθως δύο διαφορετικοί τύποι κουμπιών. Το πρώτο είναι το κουμπί υποβολής, το οποίο υποβάλλει τα δεδομένα που έχουν εισαχθεί στη φόρμα στην τιμή που αντιστοιχεί στο χαρακτηριστικό ενέργειας (το οποίο βρίσκεται στο < φόρμα> ετικέτα).
Παράδειγμα κουμπιού υποβολής
Submit
Ο δεύτερος τύπος κουμπιού που χρησιμοποιείται συνήθως σε μια φόρμα είναι ένα κουμπί επαναφοράς, το οποίο διαγράφει τα δεδομένα σε μια φόρμα, ώστε ο χρήστης να μπορεί να εισαγάγει νέα δεδομένα. ο η ετικέτα έχει α τύπος χαρακτηριστικό, το οποίο χρησιμοποιείται για να υποδείξει τη λειτουργία του κουμπιού. Στο παραπάνω παράδειγμα το τύπος χαρακτηριστικό είναι να εκχωρήσετε την τιμή υποβάλλουν , ως εκ τούτου, ένα κουμπί που έχει ένα τύπος αξία του επαναφορά χρησιμοποιείται για την επαναφορά της φόρμας.
Παράδειγμα κουμπιού επαναφοράς
Reset
Δημιουργία φόρμας
Για να δημιουργήσετε μια απλή φόρμα σε HTML θα πρέπει να περικλείσετε όλα τα στοιχεία που αναφέρονται παραπάνω σε ένα ετικέτα.
Δημιουργία παραδείγματος φόρμας
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Ο παραπάνω κώδικας θα παράγει την ακόλουθη φόρμα:
πώς να σταματήσετε τις ανεπιθύμητες τηλεφωνικές κλήσεις στα σταθερά
Τώρα μπορείτε να δημιουργήσετε μια απλή φόρμα σε HTML
Αυτό το άρθρο σας παρέχει όλα τα εργαλεία για τη δημιουργία μιας λειτουργικής φόρμας HTML. Προσδιορίζει τις διαφορετικές ετικέτες HTML που χρησιμοποιούνται για τη δημιουργία φόρμας και διερευνά τα διαφορετικά χαρακτηριστικά που μπορούν να χρησιμοποιηθούν με αυτές τις ετικέτες.
Ωστόσο, οι περισσότερες φόρμες που βλέπετε σε ιστότοπους έχουν ένα επιπλέον στοιχείο. CSS, το οποίο χρησιμοποιείται για να ζωντανέψει τη φόρμα και να την κάνει πιο αισθητικά ευχάριστη.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Το βασικό φύλλο εξαπάτησης ιδιοτήτων CSS3Κυριαρχήστε τη βασική σύνταξη CSS με το φύλλο εξαπάτησης ιδιοτήτων CSS3.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- HTML
- Ανάπτυξη διαδικτύου
- Φροντιστήρια κωδικοποίησης
Ο Kadeisha Kean είναι προγραμματιστής λογισμικού πλήρους στοίβας και τεχνικός/συγγραφέας τεχνολογίας. Έχει την ξεχωριστή ικανότητα να απλοποιήσει μερικές από τις πιο πολύπλοκες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί να γίνει εύκολα κατανοητό από κάθε αρχάριο τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και τα ταξίδια στον κόσμο (μέσω ντοκιμαντέρ).
Περισσότερα από τον Kadeisha KeanΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή