网页设计之5种简单的XHTML网页表单_HTML/Xhtml_网页制作

网页设计之5中简单的XHTML网页表单。             技术1：标签三明治 将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label
                       网页设计之5中简单的XHTML网页表单。             技术1：标签三明治
将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。
每种情况都在下面展示了。

当这些看起来比较时髦的时候，W3C 事实上已经含蓄地展示了他们的 label 例子。
主要好处：简单
代码：
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 Option 3 Message

运行结果：
#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;}
技术2：懒人
许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。
主要好处：快速
代码：

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：分而治之
假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 p，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。
主要好处：空间的利用
代码：
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 Option 3

运行结果：
#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;
}
技术5：老学究似的懒人
如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。
主要好处：直观
代码：

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

运行结果：