Αναπτυσσόμενα συμβάντα html php css. Δημιουργούμε κομψές αναπτυσσόμενες λίστες. Απλό αναπτυσσόμενο μενού HTML, CSS

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

Λοιπόν, μπορείτε επίσης να προσθέσετε σε αυτό στοιχεία για τη δημιουργία αναπτυσσόμενων λιστών και πεδίων κειμένου - Επιλογή, Επιλογή, Textarea, Ετικέτα, Σύνολο πεδίων, Υπόμνημα.

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

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

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

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

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

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

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

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

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

Συνήθως, το πρόγραμμα επεξεργασίας είναι ένα σενάριο γραμμένο σε PHP. Επομένως, στο χαρακτηριστικό Action της ετικέτας Form, θα χρειαστεί να καθορίσετε τη διαδρομή προς το αρχείο αυτού του σεναρίου που βρίσκεται στον διακομιστή φιλοξενίας σας. Επιτρέψτε μου να σας δώσω ένα παράδειγμα εγγραφής στη ροή RSS του ιστολογίου μου μέσω 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. κουμπιά για να φέρετε τη φόρμα ιστού στην αρχική της κατάσταση (Type="Reset")
  9. πεδία για τη μεταφόρτωση αρχείων στον διακομιστή (Type="File)
  10. κουμπιά με εικόνα (Type="Image")

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

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

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

Ας δούμε τι χρειάζονται τα άλλα χαρακτηριστικά:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ετικέτες Επιλογή και Επιλογή - αναπτυσσόμενη λίστα

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Fieldset και Legend - σπάζοντας τη φόρμα σε μέρη

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

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

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



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

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

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

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

Προηγουμένως, για να δημιουργήσετε μια αναπτυσσόμενη λίστα σε html ( Στα Αγγλικά. - αναπτυσσόμενο μενού), μόλις χρησιμοποιήσαμε

Σε αυτό το παράδειγμα κάνουμε ετικέτα

Στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Ομαδοποίηση στοιχείων μενού

Ας δούμε την παρακάτω ετικέτα , το οποίο χρησιμοποιείται για την ομαδοποίηση των σχετικών δεδομένων σε μια αναπτυσσόμενη λίστα όνομα = "ασπρόμαυρο" > label = "Λίστα λευκών" >

Σε αυτό το παράδειγμα, έχουμε επισημάνει 2 ομάδες με την ετικέτα . Το χαρακτηριστικό label του στοιχείου καθορίζει το όνομα της επιλεγμένης ομάδας, γραμμένο με έντονους χαρακτήρες:

Στο παρακάτω παράδειγμα, χρησιμοποιώντας το χαρακτηριστικό disabled boolean, θα απενεργοποιήσουμε μια ομάδα (" Ομάδα Β"):

</span>Ένα παράδειγμα χρήσης του απενεργοποιημένου χαρακτηριστικού μιας ετικέτας HTML <optgroup><span>

Το αποτέλεσμα του παραδείγματός μας:

Απενεργοποίηση λίστας και πολλαπλή επιλογή

</span>Τα χαρακτηριστικά απενεργοποιημένων και πολλαπλών ετικετών <select><span>

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

Για τη δεύτερη λίστα, χρησιμοποιήσαμε το χαρακτηριστικό multiple, το οποίο υποδεικνύει ότι είναι δυνατό να επιλέξετε πολλές επιλογές στη λίστα ταυτόχρονα (μέσω Ctrlστα Windows και μέσω Εντολήσε Mac).

Στο πρόγραμμα περιήγησης μοιάζει με αυτό:

Περιοχή κειμένου

Το αποτέλεσμα του παραδείγματός μας:

Απενεργοποίηση της περιοχής κειμένου

Κατ' αναλογία με τα στοιχεία ετικέτας που συζητήθηκαν προηγουμένως



type = "submit" name = "submitInfo" value = "submit" > !}

Σε αυτό το παράδειγμα, δημιουργήσαμε δύο περιοχές κειμένου (το στοιχείο