Bei der Erstellung von Webseiten, die den Webstandards entsprechen, stoßen wir häufig auf Wissensdefizite in diesem Bereich Ich hoffe, es wird jedem beim CSS-Layout helfen.
1. Verwenden Sie Fieldset- und Legenden-Tags
Im Formular gruppieren wir die Informationen häufig. Im Registrierungsformular können wir die Registrierungsinformationen beispielsweise in grundlegende Informationen (im Allgemeinen erforderlich) und detaillierte Informationen (im Allgemeinen optional) gruppieren Es? Wir können erwägen, dem Formular die folgenden zwei Tags hinzuzufügen:
Fieldset: Gruppenformulare. Ein Formular kann mehrere Fieldsets haben.
Legende: Beschreiben Sie den Inhalt jeder Gruppe
| Nachfolgend der zitierte Inhalt: <form id="demoform" class="democss" action=""> <fieldset> <legend>Basisregister</legend> <p>Vorname: <input type="text" name="fname" value="" /></p> ... </fieldset> <fieldset> <legend>Detailliertes Register</legend> <p>Interesse: <input type="text" name="interest" value="" /></p> ... </fieldset> ... </form> |
Der Feldsatz ist standardmäßig umrandet und die Legende wird im Allgemeinen standardmäßig in der oberen linken Ecke angezeigt. In manchen Fällen möchten Sie jedoch möglicherweise nicht, dass die Standardstile oder Standardlayouts von Feldsätzen und Legenden die Ästhetik des Designs beeinträchtigen.
Lösung: Setzen Sie in CSS die Ränder des Feldsatzes auf 0 und die Anzeige der Legende auf Keine.
2. Verwenden Sie Etiketten-Tags
Wir geben der Textbeschriftung im Formular eine Beschriftung und verknüpfen sie mithilfe des for-Attributs mit der Formularkomponente. Der Effekt besteht darin, dass beim Klicken auf die Textbeschriftung der Cursor in der entsprechenden Formularkomponente angezeigt wird.
| Nachfolgend der zitierte Inhalt: <form id="demoform" class="democss" action=""> <fieldset> <legend>Basisregister</legend> <p> <label for="fname">Vorname:</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </fieldset> <fieldset> <legend>Detailliertes Register</legend> <p> <label for="interest">Interesse:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </fieldset> ... </form> |
Zusätzlich zu den oben genannten Methoden können wir auch Etiketten verwenden, um die gesamte Formularkomponente und Textbeschriftung zu verschachteln, z. B.:
| Nachfolgend der zitierte Inhalt: <label for="fname"> Vorname: <input type="text" id="fname" name="fname" value="" /> </label> |
Gemäß der Spezifikation wird Text automatisch mit benachbarten Formularkomponenten verknüpft, aber leider unterstützt der aktuelle Mainstream-Browser IE6 diese Funktion nicht.
3. Verwenden Sie die Attribute accesskey und tabindex
Websites müssen mehr Nutzungssituationen berücksichtigen, wenn beispielsweise kein Cursor-Gerät (z. B. eine Maus) vorhanden ist, kann das Ausfüllen des Formulars zu diesem Zeitpunkt für sie keine Bedeutung haben. 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 (Tabulatortaste, Tabindex-Attributwert ist Sequenz) des Etiketts aus, um es dem Formularetikett hinzuzufügen. wie Etikett, Eingabe usw.
| Nachfolgend der zitierte Inhalt: <label for="fname" accesskey="f" tabindex="1" >Vorname:</label> <input type="text" id="fname" name="fname" value="" /> |
4. Verwenden Sie das optgroup-Tag
Die Rolle des optgroup-Tags besteht darin, eine Reihe von Optionen in einer Auswahlliste zu definieren. Wir können das optgroup-Tag verwenden, um die Optionen des select-Elements zu klassifizieren und das label-Attribut zu verwenden. Der Attributwert wird als nicht auswählbarer, eingerückter Titel in der Dropdown-Liste angezeigt (select). Hinweis: Optgroups unterstützen keine Verschachtelung.
| Nachfolgend der zitierte Inhalt: <select name="China"> <optgroup label="Jiangsu"> <option value="nj">Nanjing</option> <option value="sz">Suzhou</option> </optgroup> <optgroup label="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen zhou</option> </optgroup> </select> |
Es gibt einen kleinen Fehler in IE6.0 (der in FireFox nicht vorhanden ist): 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, erfolgt onchange nicht ausgelöst werden. Die Lösung ist: Fügen Sie onkeydown- oder onkeyup-Ereignisse hinzu, um das Problem zu lösen.
5. Verwenden Sie Button-Tags
Definition und Verwendung
Als Absenden-Schaltfläche definiert. 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.
<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button>
Die Schaltfläche bietet mehr Funktionen und reichhaltigeren Inhalt als die Eingabe. 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 wird.
Und die Verwendung von Schaltflächen-Tags ist semantischer als Eingabeschaltflächen und kann einfach anhand der wörtlichen Bedeutung verstanden werden.