5 einfache XHTML-Webformulare für die Produktion von Webdesign_HTML/Xhtml_Webseiten

Einfaches XHTML-Webformular in Web Design 5.                   ​ Technik 1: Sandwich beschriften Fügen Sie das Eingabefeld, das Auswahlfeld und das Textfeld in Beschriftungselemente ein und legen Sie sie alle als Elemente auf Blockebene fest. Stellen Sie den Anzeigemodus für Optionsfelder und Kontrollkästchen auf „Inline“ ein, damit sie in derselben Zeile angezeigt werden. Wenn Sie Etikett bevorzugen
​                   ​ ​ ​ ​ Einfaches XHTML-Webformular in Web Design 5.                   ​ Technik 1: Label-Sandwich
Fügen Sie alle Eingabefelder, Auswahlfelder und Textfelder in Label-Elemente ein und legen Sie sie alle als Elemente auf Blockebene fest. Stellen Sie den Anzeigemodus für Optionsfelder und Kontrollkästchen auf „Inline“ ein, damit sie in derselben Zeile angezeigt werden. Wenn Sie möchten, dass die Beschriftung und das Optionsfeld/Mehrfachauswahlfeld in unterschiedlichen Zeilen angezeigt werden, können Sie sie nicht in die Beschriftung aufnehmen oder feste Zeilenumbrüche verwenden.
Jedes Szenario wird unten demonstriert.

Obwohl diese trendig erscheinen mögen, hat das W3C tatsächlich implizit seine Etikettenbeispiele gezeigt.
Hauptvorteile: Einfach
Code:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;}

Kontaktformular

Name E-Mail Choices (Radio) – umwickeltes Etikett Auswahlmöglichkeiten (Kontrollkästchen) – nicht umbrochenes Etikett, Rand zurückgesetzt

Choices (Kontrollkästchen) – umbrochen, harter Zeilenumbruch Frage Option 2 ;Option 3 Nachricht

Ergebnis ausführen:
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin- Unten: 10 Pixel; Es wird eine unorthodoxe, aber schnelle und einfache Methode (getrennte Tags mit Zeilenumbrüchen) verwendet. Es funktioniert, aber es beeinträchtigt Ihre CSS-Fähigkeiten, da Sie kein CSS benötigen, um es zu implementieren.

Hauptvorteile
: Schnell
Code:

Kontaktformular

Name E-Mail Auswahlmöglichkeiten (Radio) Wahl 1 Wahl 2 Wahl 3 Auswahlmöglichkeiten (Kontrollkästchen) Wahl 1 Wahl 2 Wahl 3 Frage Option 1 Option 2 Option 3 Nachricht

运行结果：                                                #p#
                       网页设计之5中简单的XHTML网页表单.             技术3:语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码.既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切.
主要好处： 结构化
代码：
ol { Listenstil: keiner; padding-left: 0; }

Kontaktformular

1. Name
2. E-Mail
3. Auswahlmöglichkeiten (Radio) Wahl 1 Wahl 2 Wahl 3
4. Auswahlmöglichkeiten (Kontrollkästchen) Wahl 1 Wahl 2 Wahl 3
5. Frage Option 1 Option 2 Option 3
6. Nachricht

运行结果：
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4:分而治之
Welches Formular ist erforderlich, wenn Sie ein horizontales Formular verwenden? In vielen Situationen (Kunden) sind horizontale Formulare erforderlich. Wir können uns auf unseren alten Freund p verlassen und das Formular einfach in Spalten aufteilen. Dies können wir ganz einfach mit der Label-Sandwich-Methode erreichen.
Hauptvorteile: Platznutzung
Code:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;} .form-column { Breite: 150px; Höhe: 250px; padding-left: 20px; border-left: 1px solid #ccc; schweben: links; }

Kontaktformular

Name E-Mail Choices (Radio) Choice 3

Choices (Radio) Choices (Kontrollkästchen) Frage Option 2 ;Option 3

Ergebnis ausführen:
#Example4 label, #Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {margin- Unten: 10 Pixel; 150px;
Höhe: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
Technologie 5: wie ein alter Gelehrter Der Faule
Wenn Sie sich nicht mit CSS herumschlagen wollen, es eilig haben und nicht vorhaben, Browsertests durchzuführen, sollten Sie sich einen neuen Job suchen. Nur ein Scherz, das hier ist für dich.

Hauptvorteile
: Intuitiv
Code:

Kontaktformular

Name E-Mail Auswahlmöglichkeiten (Radio) Wahl 1 Wahl 2 Wahl 3

Auswahlmöglichkeiten (Kontrollkästchen) Wahl 1 Wahl 2 Wahl 3 Frage Option 1 Option 2 Option 3

Message

运行结果：