5 einfache XHTML -Webformulare für Webseiten

Einfacher XHTML -Webformular in Webdesign 5. Technologie 1: Etikettsandwich

Geben Sie das Eingabefeld, das Auswahlfeld und das Textfeld in das Beschriftungselement ein und stellen Sie alle als Elemente auf Blockebene ein. Stellen Sie Optionsschaltflächen und Multi-Check-Displays so ein, dass sie das Erscheinungsbild in derselben Zeile ermöglichen. Wenn Sie bevorzugen, dass Beschriftungen und Optionszahlen/Mehrfach-Schecks in verschiedenen Zeilen angezeigt werden, können Sie es nicht in die Beschriftung einbeziehen oder Hard Line-Wraping verwenden.

Jede Situation ist unten gezeigt.

Wenn diese stilvoller aussehen, hat W3C ihre Beispiele implizit implizit gezeigt.

Code:

Beschriftung, Eingabe, Select, textArea {Anzeige: Block;} label {margin-bottom: 10px;} Eingabe [type = radio], input [type = checkbox] {display: inline;} <Form> <fieldset> <legend> Kontaktformular </legend> <label für = name> name </label> </label> </lag. Size = 20 /> <Label für = Choices> Auswahl (Radio)-<em> Wraped Label < /em> < /label> <Eingabename = Auswahltyp = Radio /> Auswahl 1 <Eingabename = Auswahltyp = Radio /> Auswahl 2 <Eingabename = Auswahltyp = Radio /> Auswahl 3 <Label Style = Margin-Bottom: 0PT; Für = Choices2> Choices (Kontrollkästchen)-<em> Nicht umwickelter Label, Rand-Reset < /em> < /label> <Eingabename = Auswahl2 Typ = Kontrollkästchen /> Auswahl 1 <Eingabename = Auswahl2 Typ = CheckBox /> Auswahl 2 <Eingabename = Auswahl2 Typ = Kontrollkästchen /> Auswahl 3 <Divx = Höhe: 10px;> <! <em> Wracked, Hard Line-Break </em> </label> <Eingabename = Auswahl3 Typ = Kontrollkästchen/> Auswahl 1 <Eingabename = Auswahl3 Typ = Kontrollkästchen/> Auswahl 2 <Eingabename = Auswahl3 Typ = CheckBox/> Auswahl 3 < <option> Option 3 </option> </select> <label für = message> message <textarea cols = 36 rows = 12 name = message> </textarea> </label> <Eingabe type = value = Senden Sie es/> </fieldset> </form>

#Expamle1 Label,#Expamle1 -Eingabe,#Expamle1 Select,#expamle1 textArea {display: block;}

#expamle1 label {margin-bottom: 10px;}

#expamle1 input [type = "radio"],#expamle1 input [type = "checkBox"] {display: inline;}

Technologie 2: Faul

Viele Entwickler haben diese unorthodoxe, aber schnelle und einfache Methode (markiert mit Line Break -Partitionen) übernommen. Obwohl es ausgeführt werden kann, ist es für Ihre CSS -Funktionen schädlich, da Sie kein CSS benötigen, um es zu implementieren.

Code:

<form> <Fieldset> <Legend> Kontaktformular < /legend> <Label für = Name> Name < /Label> <Eingabe -ID = Name Name = Name Größe = 20 /> <Label für = E -Mail> E -Mail < /Label> <Eingabe -ID = E -Mail -Name = E -Mail -Size = 20 /> <Label für = Auswahlmöglichkeiten> Auswahl (Radio) < /label> <Eingabe Name = Radio = Radio = Radio = Radio = Radio -Auswahl -Typ. Auswahl 3 <Label für = Choices3> Auswahl (Kontrollkästchen) </Label> <Eingabename = Auswahl3 Typ = Kontrollkästchen/> Auswahl 1 <Eingabename = Auswahl3 Typ = Kontrollkästchen/> Auswahl 2 <Eingabename = Auswahl3 Typ = CheckBox/> Auswahl 3 < <option> Option 3 </option> </select> <label für = message> message </label> <textarea cols = 36 rows = 12 name = message> </textarea> <Eingabe typ