5 Simple XHTML Web Forms for Web Pages

Simple XHTML web form in Web Design 5. Technology 1: Label Sandwich

Include the input box, selection box and text box into the label element and set all as block-level elements. Set radio buttons and multi-check display to inline to facilitate their appearance on the same line. If you prefer label and radio buttons/multi-check boxes appear on different lines, you can choose not to include it in label, or use hard line wrapping.

Each situation is shown below.

When these look more stylish, W3C has actually implicitly shown their label examples.

Code:

label, input, select, textarea {display: block;}label {margin-bottom: 10px;}input[type=radio], input[type=checkbox] {display: inline;}<form> <fieldset><legend>Contact Form</legend><label for=name>Name</label><input id=name name=name size=20 /><label for=email>Email</label><input id=email name=email size=20 /><label for=choices> Choices (radio) — <em>wrapped label</em></label><input name= Choice type=radio /> Choice 1<input name= Choice type=radio /> Choice 2<input name= Choice type=radio /> Choice 3<label style=margin-bottom: 0pt; for= Choices2> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label><input name= Choice2 type=checkbox /> Choice 1<input name= Choice2 type=checkbox /> Choice 2<input name= Choice2 type=checkbox /> Choice 3<div style=height: 10px;><!-- just to split the demo up --></div><label for= Choices3> Choices (checkbox) — <em>wrapped, hard line-break</em></label><input name= Choice3 type=checkbox /> Choice 1<input name= Choice3 type=checkbox /> Choice 2<input name= Choice3 type=checkbox /> Choice 3<label for=dropdown>Question</label><select id=dropdown> <optgroup label=Group of Options></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><label for=message>Message<textarea cols=36 rows=12 name=message></textarea></label><input type=submit value=send it /></fieldset></form>

#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}

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

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

Technology 2: Lazy

Many developers have adopted this unorthodox but quick and easy method (marked with line break partitions). Although it can run, it is harmful to your css capabilities because you don't need any css to implement it.

Code:

<form> <fieldset><legend>Contact Form</legend><label for=name>Name</label><input id=name name=name size=20 /> <label for=email>Email</label><input id=email name=email size=20 /> <label for=Choices> Choices (radio)</label><input name=Choice type=radio /> Choice 1<input name=Choice type=radio /> Choice 2<input name=Choice type=radio /> Choice 3<label for= Choices3> Choices (checkbox)</label><input name= Choice3 type=checkbox /> Choice 1<input name= Choice3 type=checkbox /> Choice 2<input name= Choice3 type=checkbox /> Choice 3<label for=dropdown>Question</label><select id=dropdown> <optgroup label=Group of Options></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><label for=message>Message</label><textarea cols=36 rows=12 name=message></textarea><input type=submit value=send it /></fieldset></form>