Heim > Artikel > Web-Frontend > Fieldset-Tag, Legenden-Tag
Fieldset-Tag, Legenden-Tag
- 巴扎黑Original
- 2017-06-27 11:53:482873Durchsuche
Im Formularformular können wir die Informationen im Formular gruppieren und klassifizieren. Im Formular des Registrierungsformulars können wir beispielsweise die Registrierungsinformationen in
Grundlegende Informationen (im Allgemeinen erforderlich)
Detailliert gruppieren Informationen (im Allgemeinen optional)
Wie können wir es dann besser erreichen? Wir können erwägen, dem Formular die folgenden zwei Tags hinzuzufügen:
Feldsatz: Gruppieren Sie die Formulare. Ein Formular kann mehrere Feldsätze haben.
Legende: Beschreiben Sie die Inhaltsbeschreibung jeder Gruppe.
Schauen wir uns den folgenden Code an:
Beispiel-Quellcode [www.52css.com]
Das Feldset ist standardmäßig umrandet, während die Legende ist standardmäßig normal. Wird in der oberen linken Ecke angezeigt. Auf einigen Seiten möchten wir jedoch nicht, dass die Standardstile oder Standardlayouts von Feldsätzen und Legenden die Ästhetik des Designs beeinträchtigen. Die Lösung besteht darin, den Rahmen des Feldsatzes in CSS auf 0 und die Anzeige der Legende auf „Keine“ zu setzen.
◆ Etikettenetikett
Jeder sollte mit Etikettenetiketten vertraut sein. Wir geben dem Textetikett im Formular eine Etikettenbezeichnung und verwenden das for-Attribut, um es zu erstellen Formularkomponenten werden verknüpft. Der Effekt besteht darin, dass beim Klicken auf die Textbeschriftung der Cursor in der entsprechenden Formularkomponente angezeigt wird.
Schauen wir uns den folgenden Code an:
Beispiel-Quellcode [www.52css.com]
Zusätzlich zu den oben genannten Methoden Darüber hinaus können wir auch Label-Tags verwenden, um die gesamte Formularkomponente und Textbeschriftung zu verschachteln, siehe folgenden Code:
Beispiel Quellcode [ www.52css.com]
Gemäß der Spezifikation wird Text automatisch mit benachbarten Formularkomponenten verknüpft, aber leider der Mainstream-Browser IE6 unterstützt diese Funktion nicht.
◆ accesskey-Attribut, tabindex-Attribut
Die Website sollte die normale Verwendung in mehreren Browsing-Umgebungen berücksichtigen, z. B. wenn kein Cursor-Gerät vorhanden ist (z. B Maus), es muss auch Tastaturoperationen verwenden, um das Ausfüllen des Formulars abzuschließen. Zu diesem Zeitpunkt hat das Klicken für sie keine Bedeutung. Zu diesem Zeitpunkt wählen wir den Zugriffsschlüssel (Tastenkombination, Alt+Accesskey-Attributwert unter IE, Alt+Umschalt+Accesskey-Attributwert unter FF) und das Tabindex-Attribut (Tab-Taste, Tabindex-Attributwert ist Sequenz) des Etiketts aus, um es dem Formularetikett hinzuzufügen . Wie Etikett, Eingabe usw.
Schauen wir uns den folgenden Code an:
Beispiel-Quellcode [www.52css.com]
◆ optgroup tag
Die Rolle des optgroup-Tags wird in der Auswahl definiert Liste Eine Reihe von Optionen. Wir können das optgroup-Tag verwenden, um die Optionen des select-Elements zu klassifizieren, und den Attributwert als nicht auswählbaren, eingerückten Titel in der -Dropdown-Liste (select) verwenden. Bitte beachten Sie, dass Optgroups keine Verschachtelung unterstützen.
Schauen wir uns den folgenden Code an:
Beispiel-Quellcode [www.52css.com]
Es gibt einen in IE6 Kleiner Fehler (kein Problem in Firefox): Wenn Sie im IE die Pfeiltasten der Tastatur zum Auswählen verwenden und das ausgewählte Element von einer Option einer Optgroup in eine Option einer anderen Optgroup geändert wird, wird „onchange“ nicht ausgelöst. Die Lösung besteht darin, onkeydown- oder onkeyup-Ereignisse hinzuzufügen, um das Problem zu lösen.
◆ Button-Tag
Wir definieren es als Submit-Button. Innerhalb des Schaltflächenelements können Sie Inhalte wie Texte oder Bilder platzieren. Dies ist der Unterschied zwischen diesem Element und der Eingabeelement-Schaltfläche.
Beispiel-Quellcode [www.52css.com]
Das Button-Tag bietet weitere Funktionen und reichhaltigerer Inhalt. Die Schaltfläche trennt den Schaltflächentext, und Sie können Bilder innerhalb der Schaltfläche hinzufügen, wodurch Text und Bilder mehr Stile zur Auswahl haben und die steife Schaltfläche lebendiger und flexibler wird. Und die Verwendung des Schaltflächen-Tags ist semantischer als die Eingabeschaltfläche und kann einfach anhand der wörtlichen Bedeutung verstanden werden.
Das obige ist der detaillierte Inhalt vonFieldset-Tag, Legenden-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!