Ετικέτες HTML που ορίζουν φόρμες HTML στον ιστότοπο

Δημιουργούμε ιστοσελίδες και μεμονωμένες σελίδες στο Διαδίκτυογια την επικοινωνία με τους επισκέπτες.

Φόρμες HTMLχρησιμοποιούνται για την εγγραφή επισκεπτών στον ιστότοπο, για διαδραστικές δημοσκοπήσεις και ψηφοφορία, σας επιτρέπουν να στέλνετε μηνύματα, να κάνετε αγορές και ούτω καθεξής. HTMLΗ φόρμα δημιουργείται για έναν σκοπό: συλλογή και μετέπειτα μεταφορά πληροφοριών για επεξεργασία σε ένα σενάριο προγράμματος ή ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ.

Δείγμα φόρμας HTML | Συνδεθείτε

Ετικέτες, χαρακτηριστικά και αξίες

• - καθορίστε τη μορφή.
• name="" - ορίζει το όνομα της φόρμας.
• μέθοδος="" - καθορίζει τον τρόπο αποστολής των δεδομένων από τη φόρμα. Τιμές: "get" (προεπιλογή) και "post" . Η μέθοδος «ανάρτηση» χρησιμοποιείται πιο συχνά, καθώς σας επιτρέπει να μεταφέρετε μεγάλους όγκους δεδομένων.
• action="" - καθορίζει τη διεύθυνση url με την οποία αποστέλλονται τα δεδομένα για επεξεργασία. Στην περίπτωσή μας - enter_data.php ..
• - ορίστε στοιχεία φόρμας όπως κουμπιά, διακόπτες, πεδία κειμένου για την εισαγωγή δεδομένων.
• type="text" - ορίζει ένα πεδίο κειμένου για την εισαγωγή δεδομένων.
• type="password" - ορίζει ένα πεδίο για την εισαγωγή κωδικού πρόσβασης, ενώ το κείμενο εμφανίζεται ως αστερίσκοι ή κύκλοι.
• type="checkbox" - ορίζει ένα κουμπί επιλογής.
• type="hidden" - ορίζει κρυφό στοιχείοφόρμες - χρησιμοποιούνται για την αποστολή πρόσθετων πληροφοριών στον διακομιστή.
• size="25" - μήκος πεδίο κειμένουσε χαρακτήρες.
• maxlength="30" - ο μέγιστος επιτρεπόμενος αριθμός χαρακτήρων εισαγωγής.
• value="" - ορίζει την τιμή που θα σταλεί για επεξεργασία εάν αναφέρεται σε κουμπιά επιλογής ή κουμπιά επιλογής. Η τιμή αυτού του χαρακτηριστικού ως μέρος ενός πεδίου κειμένου ή κουμπιού θα εμφανίζεται, για παράδειγμα, ως John ή Login στο παραπάνω παράδειγμα.

Δείγμα φόρμας HTML | Σχόλια στον ιστότοπο

Ετικέτες, χαρακτηριστικά και αξίες

• action="http://site/comments.php" - καθορίζει τη διεύθυνση url στην οποία θα σταλούν τα δεδομένα από τη φόρμα.
• id="" - ορίζει το όνομα, το αναγνωριστικό του στοιχείου φόρμας.
• name="" - ορίζει το όνομα του στοιχείου της φόρμας.
• - ορίστε ένα πεδίο κειμένου στη φόρμα.
• cols="" - καθορίζει τον αριθμό των στηλών του πεδίου κειμένου της φόρμας.
• rows="" - Καθορίζει τον αριθμό των σειρών για το πεδίο κειμένου της φόρμας.

Αν μεταξύ βάλτε κείμενο, θα εμφανίζεται μέσα στο πλαίσιο ως παράδειγμα που είναι εύκολο να αφαιρεθεί.

Δείγμα φόρμας HTML | Αναπτυσσόμενη λίστα

Ετικέτες, χαρακτηριστικά και αξίες

• - ορίστε μια λίστα με στοιχεία για να διαλέξετε.
• size="" - καθορίζει τον αριθμό των ορατών θέσεων της λίστας. Εάν η τιμή είναι 1, έχουμε να κάνουμε με μια αναπτυσσόμενη λίστα.
• - ορίστε θέσεις (σημεία) της λίστας.
• value="" - περιέχει την τιμή που θα σταλεί από τη φόρμα στο καθορισμένο url για επεξεργασία.
• select="selected" - επιλέγει το στοιχείο της λίστας ως παράδειγμα.

Δείγμα φόρμας HTML | Λίστα με γραμμή κύλισης

Αυξάνοντας την τιμή του χαρακτηριστικού size="", λαμβάνουμε μια λίστα με μια γραμμή κύλισης:

Για αυτήν την επιλογή, χρησιμοποιούμε τη σημαία multiple="multiple", η οποία καθιστά δυνατή την επιλογή πολλών στοιχείων. Η απουσία του σας επιτρέπει να επιλέξετε μόνο ένα στοιχείο.

Δείτε επιπλέον:

Χαιρετισμούς, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θέλω να μιλήσω για πράγματα όπως φόρμες HTML. Όποια και αν είναι η μηχανή του ιστότοπού σας (cms), σίγουρα θα χρησιμοποιεί φόρμες που έχουν δημιουργηθεί με χρήση των ετικετών Φόρμα και Εισαγωγή, καθώς και τα χαρακτηριστικά και τις παραμέτρους Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .

Λοιπόν, μπορείτε επίσης να προσθέσετε στοιχεία σε αυτό για τη δημιουργία αναπτυσσόμενων λιστών και πεδίων κειμένου - Select, Option, Textarea, Label, Fieldset, Legend.

Γιατί χρειάζονται τα έντυπα και πώς λειτουργούν σε σύγχρονους ιστότοπους

Η ίδια συμβολοσειρά αναζήτησης ιστότοπου () δημιουργείται χρησιμοποιώντας αυτές τις ετικέτες και η αναζήτηση για αυτήν στο έργο σας θα είναι υποχρεωτική. Επομένως, η κατανόηση του τρόπου με τον οποίο είναι τακτοποιημένα και λειτουργούν δεν θα επηρεάσει την επιτυχημένη εργασία σας στο σχέδιο και δεν θα είναι περιττό για αυτοπροβολή και προώθηση.

Άρα, με το σκεπτικό της ανάγκης μελέτης αυτών των στοιχείων, νομίζω ότι δεν πρέπει να υπάρχουν άλλα ερωτήματα, οπότε ήρθε η ώρα να προχωρήσουμε απευθείας στη μελέτη των πιθανών επιλογών τους.

Ναι, θέλω επίσης να σας υπενθυμίσω ότι έχουμε ήδη καταφέρει να εξετάσουμε πολλά υλικά σχετικά με το θέμα της γλώσσας σήμανσης υπερκειμένου, για παράδειγμα, τρία ) και .

Στον πυρήνα τους, οι φόρμες αποτελούνται από στοιχεία, για τη δημιουργία των οποίων εισάγονται διάφορες ετικέτες από τις ετικέτες φόρμας μέσα στο κύριο κοντέινερ - Checked, Value, Checkbox, Radio, Checkbox, Submit, κ.λπ. για αυτό το πρότυπο ιστότοπου , προσδιορίζοντας πώς πρέπει να φαίνεται με τη βοήθεια ετικετών και των χαρακτηριστικών τους.

Αυτό θα μπορούσε να είναι ένα πεδίο κειμένου με ένα κουμπί υποβολής για το εισαγόμενο αίτημα, επιλογές κουμπιών επιλογής (όπου μπορείτε να αφήσετε πατημένο μόνο ένα από τα παρεχόμενα κουμπιά), πολλαπλά πεδία κειμένου με ένα κουμπί υποβολής () και πολλά άλλα.

Για παράδειγμα, στην περίπτωση της «αναζήτησης», χρησιμοποιώντας το χαρακτηριστικό Value, μπορείτε να καθορίσετε τι ακριβώς θα γραφτεί στο κουμπί που βρίσκεται δίπλα στο πεδίο για την εισαγωγή ερωτήματος. Τα δεδομένα που εισάγονται στις φόρμες πρέπει να υποβάλλονται σε περαιτέρω επεξεργασία με κάποιο τρόπο.

Για παράδειγμα, στην περίπτωση ανατροφοδότησηο χρήστης, αφού συμπληρώσει το πεδίο με το όνομά του, εισάγει το e-mail του και το κείμενο του μηνύματός του και στη συνέχεια κάνει κλικ στο κουμπί υποβολή, θα έχει το δικαίωμα να ελπίζει να στείλει τα δεδομένα από τη φόρμα στο e-mail του ιστότοπου συγγραφέας. Αλλά η εφαρμογή αυτού χρησιμοποιώντας μόνο μία γλώσσα σήμανσης υπερκειμένου (), δυστυχώς, δεν είναι δυνατή.

Για τους σκοπούς αυτούς, απαιτείται ένα ειδικό πρόγραμμα χειρισμού, το οποίο, αφού ο χρήστης κάνει κλικ στο κουμπί αποστολής, θα λάβει όλα τα δεδομένα από τα πεδία ανατροφοδότησης και θα τα στείλει στον κάτοχο του πόρου μέσω e-mail. Ποιο πρόγραμμα θα το κάνει αυτό, πρέπει να καθορίσετε τον εαυτό σας χρησιμοποιώντας το χαρακτηριστικό Action.

Συνήθως, το πρόγραμμα επεξεργασίας είναι ένα σενάριο γραμμένο σε Γλώσσα PHP. Επομένως, στο χαρακτηριστικό Action της ετικέτας Form, θα χρειαστεί να καθορίσετε τη διαδρομή προς το αρχείο αυτού του σεναρίου που βρίσκεται στον διακομιστή της φιλοξενίας σας. Θα δώσω ως παράδειγμα μια συνδρομή στο Ροή RSSτο blog μου μέσω e-mail:

Λίγο ασαφές, μάλλον, φαίνεται στην αρχή, αλλά νομίζω ότι όλα θα γίνουν πιο ξεκάθαρα όσο προχωράει η ιστορία.

Ετικέτες φόρμας και εισαγωγής για τη δημιουργία κουμπιών, πλαισίων ελέγχου και κουμπιών επιλογής

Οποιαδήποτε φόρμα πρέπει να περικλείεται σε ετικέτες ανοίγματος και κλεισίματος Μορφή. Αυτό είναι ένα είδος δοχείου για τη δημιουργία τους. Αυτή η ετικέτα έχει μια σειρά από απαιτούμενα και προαιρετικά χαρακτηριστικά:

1. Όνομα - ένα μοναδικό όνομα που πρέπει να καθοριστεί εάν το αρχείο htmlόπου κάνετε κάτι, θα χρησιμοποιούνται πολλές φόρμες ιστού
2. Ενέργεια - ένα υποχρεωτικό χαρακτηριστικό που υποδεικνύει τη διαδρομή προς το σενάριο στο οποίο θα μεταφερθούν τα δεδομένα από αυτό για περαιτέρω επεξεργασία
3. Μέθοδος - χρησιμοποιώντας τη μπορείτε να αλλάξετε τη μέθοδο διαβίβασης δεδομένων από αυτήν τη φόρμα ιστού στη δέσμη ενεργειών του αρχείου χειριστή. Εάν δεν το καθορίσετε, θα είναι προεπιλεγμένο μέθοδος λήψης, το οποίο, μάλιστα, προορίζεται κυρίως για μεταβλητές και σύντομα μηνύματα και εκτός αυτού ανοιχτό δρόμοδιοχέτευση δεδομένων γραμμή διεύθυνσηςπρόγραμμα περιήγησης. Για να μεταβιβάσετε δεδομένα φόρμας στο σενάριο χειρισμού, είναι ακόμα καλύτερο να το χρησιμοποιήσετε Μέθοδος POST, σχεδιασμένο ειδικά για τη μεταφορά μηνυμάτων κειμένου με κλειστό τρόπο

Ας δούμε τις υπόλοιπες ετικέτες που σας επιτρέπουν να δημιουργήσετε μια ποικιλία από φόρμες ιστού. Το πιο ευέλικτο είναι Εισαγωγή. Μέσα σε αυτό, πρέπει να γραφτεί το χαρακτηριστικό Type, το οποίο καθορίζει πώς ακριβώς θα είναι η φόρμα HTML που δημιουργήθηκε χρησιμοποιώντας αυτήν την ετικέτα.

Με το Input and Type , μπορείτε να δημιουργήσετε τα ακόλουθα στοιχεία:

1. πεδία κειμένου μιας γραμμής (Type="Text")
2. πεδία κωδικού πρόσβασης (Type="Password")
3. πλαίσια ελέγχου (Type="Checkbox")
4. κουμπιά επιλογής (Type="Radio")
5. κρυφά πεδία (Type="Hidden")
6. κανονικά κουμπιά (Type="Button")
7. κουμπιά για την υποβολή δεδομένων στον χειριστή (Type="Submit")
8. κουμπιά για να μεταφέρετε τη φόρμα ιστού αρχική κατάσταση(Πληκτρολογήστε "Επαναφορά")
9. πεδία για τη μεταφόρτωση αρχείων στον διακομιστή (Type="File)
10. κουμπιά εικόνας (Τύπος = "Εικόνα")

Η είσοδος δεν έχει ετικέτα κλεισίματος. Το τι ακριβώς θα είναι η φόρμα Ιστού που θα δημιουργηθεί με αυτήν εξαρτάται εξ ολοκλήρου από την παράμετρο που καθορίζεται στο χαρακτηριστικό Type. Εάν δεν έχει καθοριστεί Τύπος, θα δημιουργηθεί ένα πεδίο κειμένου από προεπιλογή.

Παραδείγματα φορμών που δημιουργήθηκαν στο Input με διαφορετικές τιμές για Type

Άλλα χαρακτηριστικά της ετικέτας Input και παραδείγματα χρήσης τους

Εξετάστε σε τι χρησιμεύουν τα υπόλοιπα χαρακτηριστικά:

1. Όνομα - εάν τα δεδομένα πρόκειται να σταλούν στη δέσμη ενεργειών προγράμματος χειριστή, τότε πρέπει να καθορίσετε μια παράμετρο για το χαρακτηριστικό Name. Κάτω από αυτό το όνομα, τα δεδομένα που υποβάλλονται από τη φόρμα θα εμφανίζονται στο πρόγραμμα διαχείρισης πληροφοριών.
2. Μέγεθος - με τη βοήθεια του ορίζεται το μέγεθος του πεδίου της δημιουργημένης φόρμας ιστού. Η τιμή καθορίζεται στον αριθμό των χαρακτήρων που μπορούν να χωρέσουν σε αυτό το πεδίο. Εάν δεν έχει καθοριστεί Μέγεθος, το πλάτος θα είναι προεπιλεγμένο σε 24 χαρακτήρες.
3. Maxlength - από προεπιλογή, ο αριθμός των χαρακτήρων που μπορούν να εισαχθούν στη φόρμα Html δεν είναι περιορισμένος, αλλά χρησιμοποιώντας το Maxlength μπορείτε να ορίσετε αυτό το όριο. Περισσότερους χαρακτήρες από αυτούς που θα υποδεικνύονται, δεν θα μπορείτε να εισαγάγετε στο πεδίο
4. Τιμή - με αυτό μπορείτε να ορίσετε τι ακριβώς θα γράφεται από προεπιλογή στο πεδίο ή στο κουμπί αποστολής δεδομένων
5. Το επιλεγμένο είναι ένα χαρακτηριστικό επισήμανσης που μπορεί να εισαχθεί στην είσοδο για κουμπιά επιλογής (ραδιόφωνο) ή για πλαίσια ελέγχου (πλαίσιο ελέγχου). Σε αυτήν την περίπτωση, αυτό το κουμπί επιλογής ή το πλαίσιο ελέγχου θα είναι ενεργό όταν φορτωθεί η σελίδα με τη φόρμα ιστού (θα έχουν ήδη ένα σημάδι επιλογής)

Τώρα ας δούμε τα πάντα μορφοποιήστε παραδείγματα με Input. Η εμφάνιση του πεδίου κειμένου είναι παρόμοια με την εμφάνιση του πεδίου κωδικού πρόσβασης, επομένως θα εξετάσουμε μόνο την επιλογή δημιουργίας κειμένου, για παράδειγμα, για την εισαγωγή μιας διεύθυνσης email:

Ας δούμε τώρα τη δημιουργία μιας φόρμας ιστού με κουμπιά επιλογής (Ραδιόφωνο):

Σημειώστε ότι αυτή η φόρμα χρησιμοποιεί την ετικέτα Εισαγωγή δύο φορές, μία φορά για να δημιουργήσει καθένα από τα δύο κουμπιά επιλογής. Επιπλέον, καθένα από αυτά έχει το χαρακτηριστικό Name με την ίδια τιμή (resultat) και η τιμή Value είναι διαφορετική (ΝΑΙ και ΟΧΙ).

Αυτό σημαίνει ότι κατά την επεξεργασία, εάν επιλεγεί κάποιο από τα κουμπιά επιλογής, θα σταλεί μια μεταβλητή, το όνομα της οποίας είναι γραμμένο στο Όνομα, αλλά η τιμή αυτής της μεταβλητής θα εξαρτηθεί από το κουμπί επιλογής που επιλέχθηκε.

Εξετάστε το παράδειγμα δημιουργίας μιας φόρμας ιστού με πλαίσια ελέγχου (Checkbox):

Τα πλαίσια ελέγχου διαφέρουν από τα κουμπιά επιλογής λόγω της δυνατότητας επιλογής πολλαπλών επιλογών ταυτόχρονα. Το όνομα χρησιμοποιείται για τον προσδιορισμό στο αρχείο χειριστή σε ποιο πλαίσιο ελέγχου έχουν οριστεί τα πλαίσια ελέγχου και η τιμή καθορίζει την τιμή που θα σταλεί στον χειριστή (εάν δεν έχει οριστεί η τιμή, τότε το κείμενο που βρίσκεται δίπλα σε αυτό το πλαίσιο ελέγχου θα σταλεί στον χειριστή ).

Select, Option, Textarea, Label, Fieldset, Legend - αναπτυσσόμενες λίστες, περιοχές κειμένου και άλλα στοιχεία φόρμας ιστού

Αρχικά, θέλω να σας υπενθυμίσω λίγο τι είναι στην πραγματικότητα οι φόρμες ιστού και γιατί χρειάζονται στις σελίδες του ιστότοπου. Έχουν σχεδιαστεί κυρίως για να επαναλαμβάνουν τα στοιχεία που είναι διαθέσιμα σε οποιοδήποτε λειτουργικό σύστημα με φιλικό προς τον χρήστη τρόπο: κουμπιά, πεδία εισαγωγής κειμένου, αναπτυσσόμενες λίστες, πλαίσια ελέγχου, διακόπτες και παρόμοια.

Όλοι οι χρήστες, χωρίς καμία επιπλέον εξήγηση, κατανοούν τον σκοπό αυτών των στοιχείων και αν δουν ένα κουμπί φόρμας Html, καταλαβαίνουν ότι πρέπει να κάνουν κλικ σε αυτό.

Επιπλέον, όλα τα συστατικά στοιχεία του (όπως Select, Option, Textarea, Label, Fieldset, Legend) είναι ήδη ολοκληρωμένα κενά (containers), για την εισαγωγή των οποίων αρκεί απλώς να χρησιμοποιήσετε την επιθυμητή ετικέτα με τα απαραίτητα χαρακτηριστικά και παραμέτρους.

Τα ίδια τα προγράμματα περιήγησης ξέρουν πώς να εμφανίζουν ένα συγκεκριμένο στοιχείο φόρμας ιστού. Είναι αλήθεια ότι οι επιλογές για την εμφάνιση του ίδιου στοιχείου σε διαφορετικά προγράμματα περιήγησηςμπορεί να διαφέρουν ελαφρώς μεταξύ τους, αλλά, κατά κανόνα, όχι σημαντικά.

Οτι. αποδεικνύεται ότι οι φόρμες ιστού στο Html είναι μια προσπάθεια μεταφοράς κλειδιού στοιχεία που χρησιμοποιούνται σε οποιοδήποτε λειτουργικό σύστημα, σε σελίδες ιστότοπου. Γιατί όμως μπορεί να χρειαστούν στις σελίδες του ιστότοπου;

Κατ' αρχήν, για τον ίδιο σκοπό για τον οποίο χρησιμοποιούνται παρόμοια στοιχεία λειτουργικά συστήματα— μεταφορά δεδομένων από τον χρήστη. Στην περίπτωση των φορμών, τα δεδομένα από τον χρήστη μεταδίδονται στον διακομιστή, όπου γίνεται η επεξεργασία τους ειδικό πρόγραμμα(Η γλώσσα σήμανσης υπερκειμένου, δυστυχώς, δεν επιτρέπει την επεξεργασία δεδομένων).

Ωστόσο, τα δεδομένα μπορούν να αποσταλούν όχι μόνο στον διακομιστή, αλλά και, για παράδειγμα, μέσω e-mail στη διεύθυνση που καθορίζεται στο χαρακτηριστικό Action της ετικέτας Form. Κατά την αποστολή δεδομένων από Html σε E-mail, ο χρήστης που συμπληρώνει τα πεδία, αφού κάνει κλικ στο κουμπί αποστολή δεδομένων, θα τρέξει πρόγραμμα αλληλογραφίαςχρησιμοποιείται στον υπολογιστή του από προεπιλογή.

Η αρχική ετικέτα Φόρμας θα πρέπει να μοιάζει κάπως έτσι:

Το Select και το Option είναι αναπτυσσόμενες ετικέτες

Όλα τα στοιχεία φόρμας ιστού που δημιουργούν πεδία με αναπτυσσόμενες λίστες σχηματίζονται με τον ίδιο τρόπο. Αρχικά, το κοντέινερ σύνθετου πλαισίου ορίζεται χρησιμοποιώντας τις ετικέτες επιλογής Html που ανοίγουν και κλείνουν. Και στη συνέχεια, μέσα σε αυτό το κοντέινερ, δημιουργούνται ξεχωριστά κοντέινερ με στοιχεία (στοιχεία) αυτής της λίστας. Αυτό γίνεται με το άνοιγμα και το κλείσιμο των ετικετών Option.

Αποδεικνύεται κάτι σαν αυτό:

Αλλά αυτό είναι ένα απλοποιημένο σχέδιο, γιατί Η επιλογή και η επιλογή έχουν μια σειρά από χαρακτηριστικά, που ορίζουν ιδιότητες και εμφάνισητο πεδίο της αναπτυσσόμενης λίστας που θα δημιουργηθεί.

1. Όνομα - Πρέπει να δώσετε ένα μοναδικό όνομα για αυτό το στοιχείο φόρμας ιστού που δημιουργήθηκε με την επιλογή Επιλογή. Αυτό το όνομα θα μεταβιβαστεί στον διακομιστή στο πρόγραμμα χειρισμού δεδομένων ως όνομα για τη μεταβλητή. Η τιμή του χαρακτηριστικού Value (που ορίζεται στην Επιλογή για κάθε στοιχείο) του στοιχείου της αναπτυσσόμενης λίστας που επιλέγει ο χρήστης θα μεταβιβαστεί ως τιμή αυτής της μεταβλητής.
2. Μέγεθος - με αυτό μπορείτε να ορίσετε τον αριθμό των εμφανιζόμενων στοιχείων. Με άλλα λόγια, χρησιμοποιώντας το Μέγεθος, μπορείτε να ορίσετε το ύψος της λίστας, μετρούμενο στον αριθμό των γραμμών που εμφανίζονται. Εάν δεν καθορίσετε ρητά την τιμή Μέγεθος στην ετικέτα Επιλογή, τότε θα χρησιμοποιηθεί το προεπιλεγμένο ύψος της αναπτυσσόμενης λίστας, ενώ θα είναι διαφορετικό αν δεν υπάρχει ή υπάρχει το χαρακτηριστικό Multiple στο Select:
   1. Εάν το Multiple είναι παρόν στο Select, τότε το ύψος της αναπτυσσόμενης λίστας στη φόρμα web θα είναι από προεπιλογή ίσο με τον αριθμό των στοιχείων της. Εκείνοι. θα εμφανιστούν όλα τα στοιχεία στην αναπτυσσόμενη λίστα πολλαπλών επιλογών. Δείτε το παράδειγμα πληθυντικού παρακάτω. Εάν το χαρακτηριστικό Size στο Select έχει οριστεί σε λιγότερο από τον αριθμό των στοιχείων, τότε θα εμφανιστεί μια γραμμή κύλισης στα δεξιά.
   2. Εάν δεν υπάρχει Πολλαπλός στην Επιλογή, τότε το ύψος της αναπτυσσόμενης λίστας στη φόρμα ιστού θα είναι από προεπιλογή μία γραμμή. Εκείνοι. μόνο μία γραμμή θα είναι ορατή και τα υπόλοιπα στοιχεία θα είναι διαθέσιμα μόνο πατώντας το κουμπί του ανελκυστήρα (στα δεξιά). Δείτε παράδειγμα παρακάτω
3. Πολλαπλές - η αντιστοίχιση αυτού του χαρακτηριστικού στην ετικέτα Επιλογή θα σας επιτρέψει να δημιουργήσετε μια αναπτυσσόμενη λίστα με τη δυνατότητα να επιλέγετε πολλά στοιχεία ταυτόχρονα. Διαβάστε περισσότερα για αυτό το χαρακτηριστικό παρακάτω.

Οι φόρμες με αναπτυσσόμενες λίστες μπορούν να χωριστούν σε δύο επιλογές. Στην πρώτη επιλογή, μπορείτε να επιλέξετε μόνο ένα στοιχείο (γραμμή) του πεδίου με μια αναπτυσσόμενη λίστα, στη δεύτερη επιλογή, κρατώντας πατημένο το Ctrl ή το Shift, μπορείτε να επιλέξετε πολλά από τα διαθέσιμα στοιχεία ταυτόχρονα.

Σε αυτήν την περίπτωση, στη δεύτερη επιλογή, τα δεδομένα για όλα τα επιλεγμένα σημεία θα αποσταλούν στον διακομιστή. Ποια αναπτυσσόμενη λίστα θα δημιουργηθεί καθορίζεται από την παρουσία ή την απουσία του χαρακτηριστικού Multiple στην ετικέτα Επιλογή.

Πολλαπλές καθορίζονται στο Επιλογή χωρίς παράμετρο, επειδή γράφεται απλά Multiple και τέλος. Εάν υπάρχει, τότε θα δημιουργηθεί μια φόρμα web αναπτυσσόμενης λίστας με δυνατότητα πολλαπλής επιλογής (κρατώντας Ctrl ή Shift).

Μια παραλλαγή του πεδίου με μια αναπτυσσόμενη λίστα, στην οποία θα υπάρχει δυνατότητα πολλαπλής επιλογής, θα μοιάζει κάπως έτσι:

Στα δεξιά είναι ένα παράδειγμα μιας αναπτυσσόμενης φόρμας ιστού πολλαπλών επιλογών που βασίζεται στον παραπάνω κώδικα. Όπως μπορείτε να δείτε, κρατώντας πατημένο το Ctrl ή το Shift μπορείτε να επιλέξετε πολλά στοιχεία ταυτόχρονα.

Εάν δεν υπάρχει χαρακτηριστικό Multiple στην ετικέτα Επιλογή, τότε μπορεί να επιλεγεί μόνο ένα στοιχείο αυτής της αναπτυσσόμενης λίστας (σειράς).

Ένα παράδειγμα όπου μπορεί να επιλεγεί μόνο ένα στοιχείο μπορείτε να το δείτε εδώ:

Ετικέτα Επιλέξτε Επιλεγμένο υπόμνημα ιστότοπου

Χαρακτηριστικά ετικέτας επιλογής

Στην αναπτυσσόμενη λίστα που δημιουργήθηκε (χρησιμοποιώντας Επιλογή και Επιλογή), μπορείτε να προσθέσετε κάτι σαν διαχωριστικά με την επικεφαλίδα της ομάδας, η οποία θα διαφέρει από τα υπόλοιπα στοιχεία μενού στο στυλ γραμματοσειράς.

Για να δημιουργήσετε μια ομάδα στοιχείων αναπτυσσόμενης λίστας, πρέπει να τα περικλείσετε στις ετικέτες ανοίγματος και κλεισίματος της φόρμας Optgroup και στην ετικέτα ανοίγματος Optgroup, να καθορίσετε το χαρακτηριστικό Label, ως παράμετρο του οποίου θα πρέπει να εισαγάγετε το επιθυμητό όνομα ομάδας.

Για παράδειγμα όπως αυτό:

Επιλογή ετικέτας
Επιλεγμένος Υπόμνημα Ιστοσελίδας

Textarea - δημιουργία ενός πεδίου κειμένου σε μια φόρμα

Υπάρχει ένα ακόμη στοιχείο φόρμας ιστού που δεν έχουμε εξετάσει - το Textarea (ένα πεδίο με δυνατότητα εισαγωγής κείμενο πολλών γραμμών). Δημιουργείται χρησιμοποιώντας ζευγαρωμένο HtmlΕτικέτα Textarea. Επιπλέον, σε αυτό μπορείτε να μεταφέρετε κείμενο σε νέα γραμμήκαι θα μεταφερθεί στον διακομιστή, λαμβάνοντας υπόψη τις μεταφορές που έγιναν.

Έτσι, για να δημιουργήσετε ένα πεδίο κειμένου πολλών γραμμών, πρέπει να γράψετε ένα άνοιγμα και κλείσιμο Textarea και μεταξύ τους μπορείτε να προσθέσετε κείμενο που θα είναι ορατό όταν φορτωθεί η σελίδα με τη φόρμα ιστού. Ο χρήστης μπορεί στη συνέχεια να σβήσει αυτό το κείμενο και να γράψει το δικό του.

Τι μπορείτε να πείτε για τον εαυτό σας;

Όπως μπορείτε να δείτε, το να κάνετε κλικ στο κείμενο για να ενεργοποιήσετε αυτό το στοιχείο είναι άχρηστο - πρέπει να κάνετε κλικ σε αυτό μόνοι σας. Αυτή ακριβώς είναι η κατάσταση που έχει σχεδιαστεί για να διορθώσει η ετικέτα Label. Σας επιτρέπει να κάνετε κλικ στο κείμενο δίπλα στο στοιχείο της φόρμας ιστού, κάτι που αναμφίβολα είναι βελτίωση της χρηστικότητας.

Αλλά πώς να δένουν στοιχείο HTMLσχήματα και κείμενο; Για να γίνει αυτό, πρέπει να προσθέσετε ένα αναγνωριστικό με μια μοναδική παράμετρο στο χαρακτηριστικό και το κείμενο πρέπει να περιβάλλεται από το άνοιγμα και το κλείσιμο ετικετών Label. Και δεν είναι μόνο αυτό. Στην αρχική ετικέτα Label, πρέπει να γράψετε το χαρακτηριστικό For, η παράμετρος του οποίου πρέπει να είναι ακριβώς ίδια με το χαρακτηριστικό ID στην ετικέτα Html του στοιχείου φόρμας. Αποδεικνύεται κάτι σαν αυτό:

Όπως μπορείτε να δείτε, τώρα, χάρη στη χρήση του Label, τα στοιχεία φόρμας ιστού μπορούν να ενεργοποιηθούν όχι μόνο κάνοντας κλικ σε αυτό, αλλά και κάνοντας κλικ στο κείμενο που βρίσκεται δίπλα του.

Fieldset και Legend - χωρισμός της φόρμας σε μέρη

Πιθανότατα είδατε συχνά ότι οι μεγάλες φόρμες στο Html χωρίζονται σε ομάδες (Fieldset), οι οποίες κυκλώνονται σε ένα πλαίσιο και κάθε τέτοια ομάδα έχει τη δική της κεφαλίδα (Legend). Αυτό υλοποιείται χρησιμοποιώντας μόνο δύο ετικέτες: Fieldset και Legend. Είναι ζευγαρωμένα, δηλ. πρέπει να έχουν ένα άνοιγμα και ένα κλείσιμο.

Έτσι, για να δημιουργήσετε μια ομάδα από συστατικά μέρηπρέπει να περικλείσετε όλα αυτά τα μέρη στο άνοιγμα και το κλείσιμο των ετικετών Fieldset. Και για να ορίσετε έναν τίτλο (Legend) για αυτήν την ομάδα, θα πρέπει αμέσως μετά το άνοιγμα Fieldset να γράψετε μια κατασκευή από το άνοιγμα και το κλείσιμο Legend, μεταξύ των οποίων πρέπει να εισαγάγετε το κείμενο του τίτλου της ομάδας.

Ακολουθεί ένα παράδειγμα δημιουργίας ομάδων χρησιμοποιώντας το Fieldset και το Legend:

Καλή σου τύχη! Τα λέμε σύντομα στον ιστότοπο των σελίδων του ιστολογίου

Μπορεί να σας ενδιαφέρει

Select, Option, Textarea, Label, Fieldset, Legend - Ετικέτες HTMLαναπτυσσόμενες φόρμες και πλαίσιο κειμένου
Καταχωρήσεις σε κώδικας html- Ετικέτες UL, OL, LI και DL
MailTo - τι είναι και πώς να δημιουργήσετε έναν σύνδεσμο email σε Html
Πώς ορίζονται τα χρώματα σε κώδικα Html και CSS, επιλογή αποχρώσεων RGB σε πίνακες, αποτελέσματα Yandex και άλλα προγράμματα
Τι είναι η γλώσσα σήμανσης υπερκειμένου Html και πώς να καταχωρίσετε όλες τις ετικέτες στο πρόγραμμα επικύρωσης του W3C
Πώς να επικολλήσετε Σύνδεσμος HTMLκαι μια εικόνα (φωτογραφία) - ετικέτες IMG και A
Πίνακες σε Html - Ετικέτες Table, Tr και Td, καθώς και Colspan, Cellpadding, Cellspacing και Rowspan για τη δημιουργία τους
Η γραμματοσειρά (πρόσωπο, μέγεθος και χρώμα), το Blockquote και οι προετικέτες είναι μορφοποίηση κειμένου παλαιού τύπου σε καθαρό HTML (χωρίς Χρήση CSS)
Πώς να δημιουργήσετε μια υπερ-σύνδεση (A, Href, Target Blank), πώς να την ανοίξετε σε νέο παράθυρο στον ιστότοπο και επίσης να κάνετε μια εικόνα σύνδεσμο σε κώδικα Html

Χάρη στην ετικέτα κατέστη δυνατή η δημιουργία μιας αναπτυσσόμενης λίστας και μιας λίστας με πολλαπλή επιλογή. Εάν πρόκειται να στείλετε δεδομένα στον διακομιστή, τότε η ετικέτα πρέπει να τοποθετηθεί σε μια φόρμα (ετικέτα

Ποια είναι τα χαρακτηριστικά της ετικέτας επιλογής;

Ετικέτα έχει τρία χρήσιμα χαρακτηριστικά (δεν θα εξετάσουμε τα υπόλοιπα, έχω ήδη μιλήσει για αυτά). Το πρώτο χαρακτηριστικό είναι πολλαπλό , χάρη στο οποίο μπορείτε να κάνετε δυνατή την επιλογή πολλών στοιχείων λίστας. Για να επιλέξετε πολλά στοιχεία, πρέπει να κρατήσετε πατημένο το shift ή το ctr και να κάνετε κλικ στα στοιχεία που θέλετε με το ποντίκι. Το παρακάτω είναι ένα παράδειγμα χρήσης του πολλαπλού χαρακτηριστικού:

Ποια ονόματα σας αρέσουν;
Κανένας
Ιβάν
Πέτρος
Νικόλαος

Απαιτείται το δεύτερο χαρακτηριστικό , με το οποίο μπορείτε να "πείτε" στο πρόγραμμα περιήγησης ότι η λίστα πρέπει να επιλεγεί πριν από την υποβολή της φόρμας, διαφορετικά το πρόγραμμα περιήγησης θα απαγορεύσει την υποβολή της φόρμας και θα εμφανίσει το κατάλληλο μήνυμα για εσάς. Η εμφάνιση αυτού του μηνύματος εξαρτάται εξ ολοκλήρου από το πρόγραμμα περιήγησης και ο χρήστης δεν μπορεί να το αλλάξει. Το παρακάτω είναι ένα παράδειγμα χρήσης του απαιτούμενου χαρακτηριστικού:

Το τρίτο χαρακτηριστικό είναι το μέγεθος , το οποίο μπορεί να χρησιμοποιηθεί για τον καθορισμό του αριθμού των στοιχείων της λίστας που θα εμφανίζονται. Το χαρακτηριστικό size μπορεί να περιέχει μόνο έναν ακέραιο. Το χαρακτηριστικό size μετασχηματίζει τη λίστα, για παράδειγμα, αν είναι ίση με 1, τότε η ετικέτα εμφανίζεται ως "αναπτυσσόμενη λίστα" και εάν το χαρακτηριστικό μέγεθος είναι μεγαλύτερο από 1, τότε η αναπτυσσόμενη λίστα εμφανίζεται ως "κύλιση λίστας". Ακολουθούν δύο παραδείγματα χρήσης του χαρακτηριστικού μεγέθους:

Ναι ή όχι?
Ναί
Δεν

Κατά τη διαδικασία δημιουργίας ενός ιστότοπου ή ιστολογίου και περαιτέρω πλήρωσής του με περιεχόμενο, για διάφορους λόγους, μερικές φορές καθίσταται απαραίτητο να αποκρύψετε μέρος του κειμένου, να τοποθετήσετε πιο ογκώδεις πληροφορίες σε ένα μπλοκ κρυμμένο προς το παρόν, αλλά και πάλι να υποδεικνύεται στον χρησιμοποιήστε ό,τι είναι διαθέσιμο ακόμα ένα πράγμα και δώστε του την ευκαιρία να δει το κρυφό περιεχόμενο χωρίς να μετακινηθεί στην επόμενη γραμμή ή σελίδα.
Προηγουμένως, μια δέσμη javascript χρησιμοποιήθηκε για την υλοποίηση μιας τέτοιας λύσης, αλλά τώρα όλα αυτά μπορούν να γίνουν πολύ εύκολα με τη βοήθεια εκπληκτικών ιδιοτήτων.

Σήμερα θα δούμε απλούστερος τρόποςδημιουργία κρυφών μπλοκ με περιεχόμενο στις σελίδες του ιστότοπου και σε μεμονωμένα μηνύματα που ανοίγουν όταν κάνετε κλικ σε ένα συγκεκριμένο στοιχείο κειμένου, χρησιμοποιώντας μόνο ιδιότητες CSS3. Μια μεμονωμένη λέξη, μια επιλεγμένη φράση, μια ολόκληρη πρόταση ή ένα ενημερωτικό εικονίδιο μπορεί να χρησιμεύσει ως διακόπτης.
Τέτοια μπλοκ χρησιμοποιούνται συχνά σε σελίδες με μεγάλο όγκο περιεχομένου, προκειμένου να γίνει πιο δομημένο και συμπαγές, ενώ όλο το περιεχόμενο χωρίζεται σε λεγόμενες ομάδες, στις οποίες παρουσιάζονται μόνο επικεφαλίδες στον χρήστη, όλο το κείμενο κρύβεται από προεπιλογή και μπορεί να δει κανείς κάνοντας κλικ σε ένα συγκεκριμένο στοιχείο (βλ. παραπάνω).

Ας προσπαθήσουμε να κάνουμε χωρίς υπερβολικό νερό, κοιτάξτε όλο αυτόν τον απλό μηχανισμό σε δράση, επάνω Καλό παράδειγμα, μπορείτε επίσης να επεξεργαστείτε κάτι αν θέλετε:

Παράδειγμα #1

Στο ρόλο των διακοπτών των αναπτυσσόμενων μπλοκ με Επιπλέον πληροφορίεςΔεν χρησιμοποιείται κανένα επισημασμένο ή επισημασμένο κείμενο, με μια σαφή προσφορά να κάνετε κλικ σε αυτό, την οποία πρέπει να κάνετε χωρίς φόβο και αμφιβολία για να δείτε)))

Όπως μπορείτε να δείτε, όλα λειτουργούν περισσότερο από μια χαρά, το κρυφό περιεχόμενο εμφανίζεται χωρίς προβλήματα και εξαφανίζεται με ένα ελαφρύ κλικ του ποντικιού και ταυτόχρονα χρησιμοποιήσαμε τον ελάχιστο δυνατό κώδικα, τόσο στο πλαίσιο html όσο και στο σχηματισμός στυλ css. Χωρίς σύνδεση επιπλέον javascriptβιβλιοθήκες, με αιώνιο άγχος, και αν είναι απενεργοποιημένες από την πλευρά του χρήστη.
Η υλοποίηση όλης αυτής της δράσης κατέστη δυνατή χάρη στην ψευδο-κλάση CSS3 :τετραγωνισμένοςεφαρμόζεται σε στοιχεία διεπαφής όπως κουμπιά επιλογής (). Τι κάναμε στην πραγματικότητα, στην ετικέτα εκχωρήσαμε στο χαρακτηριστικό type την τιμή του πλαισίου ελέγχου, καθώς και το αναγνωριστικό id="hd-1" που αντιστοιχεί στο μοναδικό αναγνωριστικό for="hd-1"διακόπτη του τρέχοντος μπλοκ. Ας κρύψουμε τα πλαίσια ελέγχου πλήρως και για πάντα, ρυθμίζοντας την ιδιότητα εμφάνισης: none στην κλάση .hide;
Στην πραγματικότητα εδώ, δεν υπάρχει τίποτα ιδιαίτερο να εξηγήσουμε, ολόκληρος ο μηχανισμός για την ενεργοποίηση και απενεργοποίηση κρυφών μπλοκ αποτελείται από τρία στοιχεία:

• Πλαίσιο ελέγχου - ετικέτα με νόημα πλαίσιο ελέγχουΧαρακτηριστικό τύποςκαι με συγκεκριμένο δεσμευτικό αναγνωριστικό
• Τίτλος (κουμπί επιλογής κειμένου) - ετικέτα με μια μοναδική τιμή αναγνωριστικού για το χαρακτηριστικό Για, (το αναγνωριστικό πρέπει να είναι ίδιο με το αναγνωριστικό της ετικέτας εισαγωγήμε νόημα πλαίσιο ελέγχουΧαρακτηριστικό τύπος).
• Το μπλοκ περιεχομένου είναι μια ετικέτα div, η οποία θα περιέχει ποικίλο κρυφό περιεχόμενο (κείμενο, εικόνες κ.λπ., κ.λπ.) μέχρι καλύτερες στιγμές, μέχρι να κάνει κλικ ο χρήστης.

Ελπίζω, από τη χαοτική εξήγησή μου, ωστόσο να έγινε σαφές ποιο είναι το όλο κόλπο. Το CSS εφαρμόζει νέα στυλ (χρησιμοποιώντας την ψευδο-κλάση τετραγωνισμένος) για να εμφανίσετε ένα μπλοκ περιεχομένου που προηγουμένως ήταν κρυφό μόνο όταν ο χρήστης κάνει κλικ σε ένα στοιχείο που σχετίζεται με ένα πλαίσιο ελέγχου με ένα μοναδικό αναγνωριστικό.

Από όλα αυτά προκύπτει σημαντική σημείωση:

όταν χρησιμοποιείτε πολλά κρυφά μπλοκ στην ίδια σελίδα, κάθε κουμπί επιλογής πρέπει να έχει ένα μοναδικό αναγνωριστικό, το οποίο θα διαφέρει από τα αναγνωριστικά σε άλλα μπλοκ.

Λοιπόν, με λόγια, έχουμε ταξινομήσει τι πηγαίνει πού και γιατί, τώρα ας δούμε το πλαίσιο html ολόκληρης της δομής:

Κάντε κλικ εδώ για να ανοίξετε!

Στη συνέχεια, προχωράμε απευθείας στο σχηματισμό στυλ css, χωρίς την οποία δεν θα λειτουργήσει ολόκληρη η δομή. Ο ελάχιστος ελάχιστος κώδικας, χωρίς κανένα στυλ, απλώς επισήμανε το φόντο για το αναπτυσσόμενο πλαίσιο για να ορίσει και να εμφανίσει τα κρυφά πλαίσια κειμένου για εσάς. Μπορείτε να διακοσμήσετε τα μπλοκ όπως θέλετε, να κρεμάσετε περιγράμματα, στρογγυλές γωνίες, να επισημάνετε κείμενο ή .

1. CSS

/* απόκρυψη πλαισίων ελέγχου και μπλοκ περιεχομένου */ .hide, .hide + label ~ div ( display: none; ) /* label text view */ .hide + label, .hide:checked + label ( padding: 0; color: green ; δρομέας: δείκτης, περίγραμμα-κάτω: 1 εικονοστοιχείο πράσινο με κουκκίδες; ) /* προβολή κειμένου ετικέτας όταν το κουμπί επιλογής είναι ενεργό */ .hide:checked + label ( χρώμα: κόκκινο; περίγραμμα-κάτω: 0; ) /* εμφάνιση πλαισίων όταν το πλαίσιο ελέγχου είναι ενεργό με περιεχόμενο */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

Αυτό είναι όλο, για ένα ασκητικό παράδειγμα, ένα αρκετά επαρκές ελάχιστο. Αλλά τελικά, δεν θα είμαστε καθόλου εμείς αν δεν κρεμάσουμε τουλάχιστον μερικά καλούδια και είναι καλύτερο για τον χρήστη να προτείνει οπτικά πού να κάνει κλικ.
Στο δεύτερο παράδειγμα, πρόσθεσα ένα απλό σύμβολο με τη μορφή συν, το οποίο δείχνει ξεκάθαρα ότι κάτι άλλο είναι κρυμμένο εδώ, όταν πατηθεί, μετατρέπεται αμέσως σε μείον και για κρυφά μπλοκ με περιεχόμενο, βίδωσα ένα μικρό animation όταν εμφανίζονται, και όλα αυτά αποκλειστικά με τη βοήθεια της μαγείας CSS3.

2. CSS

/* απόκρυψη πλαισίων ελέγχου και μπλοκ περιεχομένου */ .hide, .hide + label ~ div ( display: none; ) /* label text view */ .hide + label ( margin: 0; padding: 0; color: green; cursor : δείκτης; εμφάνιση: inline-block; ) /* προβολή κειμένου ετικέτας όταν το κουμπί επιλογής είναι ενεργό */ .hide:checked + label ( χρώμα: κόκκινο; border-bottom: 0; ) /* όταν το πλαίσιο ελέγχου είναι ενεργό, εμφάνιση μπλοκ με περιεχόμενο */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* λίγο animation όταν εμφανιστεί */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease-in 0,5s; κινούμενη εικόνα: fade ease-in 0,5s; ) /* animation όταν εμφανίζονται κρυφά μπλοκ */ @-moz-keyframes fade ( από ( αδιαφάνεια: 0; ) σε ( αδιαφάνεια: 1 ) ) @-webkit-keyframes fade ( από ( αδιαφάνεια: 0 ; ) σε ( αδιαφάνεια: 1 ) ) @keyframes fade ( από ( αδιαφάνεια: 0; ) σε ( αδιαφάνεια: 1 ) ) .hide + label:fore ( background-color: #1e90ff; χρώμα: #fff; περιεχόμενο: "\002B"; display:block; float: αριστερά; μέγεθος γραμματοσειράς: 14 px; βάρος γραμματοσειράς: έντονη; ύψος: 16 px; Ύψος γραμμής: 16 px; περιθώριο: 3px 5px; text-align: κέντρο; πλάτος: 16 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; ακτίνα συνόρων: 50% ) .hide:checked + label:before ( περιεχόμενο: "\2212"; )

Από κάθε άποψη, η μέθοδος είναι αναμφίβολα καλή, αλλά όπως πάντα, δεν προκαλεί έκπληξη, προκύπτουν προβλήματα με το αιώνιο φρένο προόδου, το πρόγραμμα περιήγησης IE, την ψευδο-κλάση τετραγωνισμένοςυποστηρίζουν μόνο την 9η και νεότερες εκδόσεις αυτού του προγράμματος περιήγησης. Για παλαιότερες εκδόσεις του IE, είναι το ίδιο όπως πριν, πρέπει να χρησιμοποιήσετε javascript.

Χρησιμοποιώντας κρυφά πλαίσια ελέγχου, μπορείτε εύκολα να εφαρμόσετε , μπλοκ στυλ, ρυθμιστικά, γκαλερί και άλλα.

Με όλο τον σεβασμό, Andrew

Χαρακτηριστικά φόρμας:

• Το χαρακτηριστικό action καθορίζει αρχείο διακομιστήμε ένα σενάριο υπεύθυνο για την κύρια επεξεργασία των δεδομένων που αποστέλλονται από τη φόρμα. Συνήθως, ο κώδικας για αυτό το αρχείο είναι γραμμένος σε μια γλώσσα προγραμματισμού από την πλευρά του διακομιστή, όπως π.χ phpή perl.
• Το χαρακτηριστικό enctype υποδεικνύει τον τύπο των πληροφοριών που μεταδίδονται στον διακομιστή, εάν είναι απλώς δεδομένα κειμένου - κείμενο/απλό , εάν αποστέλλονται αρχεία με τη φόρμα, τότε θα πρέπει να καθοριστούν τα δεδομένα πολλαπλών μερών/φόρμας.
• Το χαρακτηριστικό μέθοδος καθορίζει και ορίζει τη μορφή μεταφοράς δεδομένων. Δεν θα σταθούμε λεπτομερώς σε αυτό, αλλά θα πρέπει να πούμε ότι για μια πιο αξιόπιστη μεταφορά θα πρέπει να καθοριστεί η μέθοδος post.

στοιχεία φόρμας html

<τύπος εισαγωγής = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" > !}

Αποτέλεσμα:

• Η τιμή του χαρακτηριστικού τύπου - κείμενο - υποδεικνύει ότι πρόκειται για πεδίο κειμένου
• μέγεθος - το μέγεθος του πεδίου κειμένου σε χαρακτήρες
• maxlength - ο μέγιστος αριθμός χαρακτήρων που χωρούν στο πεδίο
• τιμή - το αρχικό κείμενο στο πεδίο κειμένου
• όνομα - το όνομα του στοιχείου, απαραίτητο για την επεξεργασία δεδομένων στο αρχείο χειριστή

Αποτέλεσμα:


Αντί για κείμενο, εμφανίζεται μια μάσκα στο πεδίο - αστερίσκοι ή κύκλοι

<τύπος εισαγωγής = "υποβολή" τιμή= "Αποστολή δεδομένων">

Αποτέλεσμα:

Το κουμπί υποβολής συλλέγει όλα τα δεδομένα της φόρμας που έχει καταχωρίσει ο χρήστης και τα στέλνει στη διεύθυνση που καθορίζεται στο χαρακτηριστικό δράσης της φόρμας.

<input type = "reset" value = "(!LANG:Διαγραφή φόρμας" > !}

Αποτέλεσμα:

Το κουμπί επιστρέφει την κατάσταση όλων των στοιχείων ελέγχου στην αρχική (διαγράφει τη φόρμα)

<τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "asp" τιμή = "(!LANG:ναι" > !}ΑΣΠΙΔΑ.<br > <τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "js" τιμή = "(!LANG:ναι" checked = "checked" > !} javascript<br > <τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "php" τιμή = "(!LANG:ναι" > !} PHP<br > <τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "html" τιμή = "(!LANG:ναι" checked = "checked" > !} HTML<br >

ΑΣΠΙΔΑ.
javascript
PHP
HTML



Αποτέλεσμα:

ΑΣΠΙΔΑ.
javascript
PHP
HTML

Στο html, ένα πλαίσιο ελέγχου χρησιμοποιείται για την οργάνωση πολλαπλών επιλογών, π.χ. όταν είναι απαραίτητο και δυνατό να επιλέξετε πολλές απαντήσεις

<τύπος εισόδου = "radio" name = "book" value = "(!LANG:asp" > !}ΑΣΠΙΔΑ.<br > <τύπος εισόδου = "ραδιόφωνο" όνομα = "βιβλίο" τιμή = "(!LANG:js" > !} javascript<br > <τύπος εισόδου = "radio" name = "book" value = "(!LANG:php" > !} PHP<br > <τύπος εισόδου = "ραδιόφωνο" όνομα = "βιβλίο" τιμή = "(!LANG:html" checked = "checked" > !} HTML<br >

ΑΣΠΙΔΑ.
javascript
PHP
HTML




Αποτέλεσμα:

ΑΣΠΙΔΑ.
javascript
PHP
HTML

κουμπί επιλογής html χρησιμεύει για μία μόνο επιλογή από πολλές επιλογές

Το χαρακτηριστικό checked ορίζει αμέσως το στοιχείο σε επιλεγμένο

Σπουδαίος:Για στοιχεία ραδιόφωνοείναι απαραίτητο η τιμή του χαρακτηριστικού όνομαόλα τα στοιχεία στην ομάδα είχαν το ίδιο: σε αυτήν την περίπτωση, τα στοιχεία θα λειτουργούν αλληλένδετα, όταν ένα στοιχείο είναι ενεργοποιημένο, τα άλλα θα απενεργοποιούνται

Αναπτυσσόμενη λίστα HTML

Εξετάστε ένα παράδειγμα προσθήκης μιας αναπτυσσόμενης λίστας:

ΑΣΠΙΔΑ. JavaScript PHP HTML

Αποτέλεσμα:

• Η αναπτυσσόμενη λίστα αποτελείται από την κύρια ετικέτα - επιλογή - η οποία έχει ένα ζεύγος κλεισίματος και κάθε στοιχείο λίστας είναι μια ετικέτα επιλογής, μέσα στην οποία εμφανίζεται το κείμενο του στοιχείου
• χαρακτηριστικό μέγεθος με τιμή "ένας"υποδεικνύει ότι η λίστα σε συμπτυγμένη μορφή εμφανίζει ένα στοιχείο, τα υπόλοιπα ανοίγουν όταν κάνετε κλικ στο βέλος του μενού
• Το επιλεγμένο χαρακτηριστικό του στοιχείου (επιλογή) υποδεικνύει ότι αυτό το συγκεκριμένο στοιχείο θα είναι αρχικά ορατό και τα υπόλοιπα στοιχεία είναι "συμπτυγμένα"

Για μεγάλες και σύνθετες λίστες, υπάρχει μια επιλογή προσθέστε υπότιτλους- ετικέτα optgroup με χαρακτηριστικό label (επιγραφή):

ΑΣΠΙΔΑ. JavaScript PHP HTML ASP στα ρωσικά JavaScript στα ρωσικά

Να δώσει μια ευκαιρία επιλέξτε πολλά στοιχεία ταυτόχροναπρέπει να προσθέσετε το πολλαπλό χαρακτηριστικό. Αλλά σε αυτήν την περίπτωση, το χαρακτηριστικό size θα πρέπει επίσης να οριστεί σε τιμή μεγαλύτερη από 1:

Κείμενο

Αποτέλεσμα:

• Το πλάτος ενός στοιχείου εξαρτάται από το χαρακτηριστικό cols, το οποίο καθορίζει πόσοι χαρακτήρες χωρούν οριζόντια.
• Το χαρακτηριστικό rows καθορίζει τον αριθμό των σειρών σε ένα στοιχείο.

Άλλα στοιχεία

Πρόσθετα στοιχεία και χαρακτηριστικά

• Για ελέγχους ραδιόφωνοκαι πλαίσιο ελέγχουείναι βολικό να χρησιμοποιείτε πρόσθετα στοιχεία που, πρώτον, κάνουν το κείμενο να αγκυροβολεί στο ίδιο το στοιχείο του ραδιοφώνου ή του πλαισίου ελέγχου και, δεύτερον, προσθέτουν μια διαδρομή όταν κάνετε κλικ:

<τύπος εισαγωγής="πλαίσιο ελέγχου" id="book1"> <label for="book1">ΑΣΠΙΔΑ.</label>

ΑΣΠΙΔΑ.

Στο παράδειγμα, δημιουργείται μια ετικέτα (ετικέτα ετικέτας) για το στοιχείο του πλαισίου ελέγχου. Η δέσμευση γίνεται μέσω του χαρακτηριστικού id, η τιμή του οποίου καθορίζεται στο χαρακτηριστικό for της ετικέτας.

Αποτέλεσμα:



• Το χαρακτηριστικό απενεργοποιημένο σάς επιτρέπει να απενεργοποιήσετε ένα στοιχείο, καθιστώντας το μη επεξεργάσιμο από τον χρήστη:

<τύπος εισαγωγής = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" disabled = "disabled" >!} <τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "asp" τιμή = "(!LANG:ναι" > !}ΑΣΠΙΔΑ.<br > <τύπος εισαγωγής = "πλαίσιο ελέγχου" όνομα = "js" τιμή = "(!LANG:ναι" checked = "checked" disabled = "disabled" > !} javascript<br >


ΑΣΠΙΔΑ.
javascript