网页设计之5种简单的XHTML网页表单
导读：收集整理的这篇文章主要介绍了网页设计之5种简单的XHTML网页表单，觉得挺不错的，现在分享给大家，也给大家做个参考。 网页设计之5中简单的XHTML网页表单。...
收集整理的这篇文章主要介绍了网页设计之5种简单的XHTML网页表单，觉得挺不错的，现在分享给大家，也给大家做个参考。 网页设计之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; } 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 1input name=" Choice" type="radio" /> Choice 2input name=" Choice" type="radio" /> Choice 3label style="margin-bottom: 0pt; " for=" Choices2"> Choices (checkbox) — em> non-wrapped label, margin reset/em> /label> input name=" Choice2" type="checkbox" /> Choice 1input name=" Choice2" type="checkbox" /> Choice 2input name=" Choice2" type="checkbox" /> Choice 3div 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 1input name=" Choice3" type="checkbox" /> Choice 2input name=" Choice3" type="checkbox" /> Choice 3label 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"> Messagetextarea 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; }
技术2：懒人
许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。
主要好处：快速
代码：
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 1input name=" Choice" type="radio" /> Choice 2input name=" Choice" type="radio" /> Choice 3label for=" Choices3"> Choices (checkbox)/label> input name=" Choice3" type="checkbox" /> Choice 1input name=" Choice3" type="checkbox" /> Choice 2input name=" Choice3" type="checkbox" /> Choice 3label 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>
运行结果： 上一页12 下一页 阅读全文
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 网页设计之5种简单的XHTML网页表单
本文地址： https://pptw.com/jishu/587567.html