作家
登录

网页设计之5种简单的XHTML网页表单

作者: 来源:www.28hudong.com 2012-11-19 13:56:39 阅读 我要评论

网页设计之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 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;} 技术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 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> 运行结果: 上一页12 下一页

  推荐阅读

  W3C教程(5):W3C XML 活动

XML 被设计用来描述、存储、传送及交换数据。XML 1.0 是 XML 的最新版本。 XML 被设计用来描述、存储、传送及交换数据。 XML 1.0 是 XML 的最新版本。 XML >>>详细阅读


本文标题:网页设计之5种简单的XHTML网页表单

地址:http://www.17bianji.com/kaifa2/XML/15778.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)