5 Simple XHTML Web Forms for Web Design_HTML/Xhtml_Web Page Production

Simple XHTML web form in Web Design 5.                   ​ Technique 1: Label Sandwich Include the input box, selection box and text box into label elements and set them all as block-level elements. Set the radio button and checkbox display mode to inline so that they appear on the same line. If you prefer label
​                   ​ ​ ​ 5 simple XHTML web forms in web design.                   ​ Technique 1: Label Sandwich
Include all input boxes, selection boxes and text boxes into label elements, and set them all as block-level elements. Set the radio button and checkbox display mode to inline so that they appear on the same line. If you prefer that the label and the radio button/multi-select box appear on different lines, you can choose not to include it in the label, or use hard line breaks.
Each scenario is demonstrated below.

While these may seem trendy, the W3C has actually implicitly shown their label examples.
Main benefits: Simple
Code:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;}

Contact Form

Name Email Choices (radio) — wrapped label Choice 1 Choice 2 Choice 3 Choices (checkbox) — non-wrapped label, margin reset Choice 1 Choice 2 Choice 3

Choices (checkbox) — wrapped, hard line-break Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Message

Run result:
#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 person
Many developers adopt This unorthodox but quick and easy method (separate tags with newlines) is used. It works, but it's detrimental to your css capabilities because you don't need any css to implement it.
Main Benefits: Fast
Code:

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3 Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3 Message

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

Contact Form

1. Name
2. Email
3. Choices (radio) Choice 1 Choice 2 Choice 3
4. Choices (checkbox) Choice 1 Choice 2 Choice 3
5. Question Option 1 Option 2 Option 3
6. Message

运行结果：
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4：分而治之
If you use a horizontal form, what form is required? Many situations (clients) will require horizontal forms. We can rely on our old friend p and just split the form into columns. We can easily achieve this using the label sandwich method.
Main benefits: Space utilization
Code:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;} .form-column { width: 150px; height: 250px; padding-left: 20px; border-left: 1px solid #ccc; float: left; }

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3

Choices (radio) Choice 1 Choice 2 Choice 3 Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1 Option 2

Run result:
#Example4 label, #Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {margin- bottom: 10px;}
#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;}
#Example4 .form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
Technology 5: like an old scholar The lazy person
If you don’t want to mess with CSS, are in a hurry, and don’t plan on doing browser testing, you should find a new job. Just kidding, this one is for you.
Main Benefits: Intuitive
Code:

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3

Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3

Message

运行结果：