网页设计之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 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>
运行结果: #p#
网页设计之5中简单的XHTML网页表单。 技术3:语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表,那么有序列表用在这里就非常贴切。
主要好处: 结构化
代码:
ol { list-style: none; padding-left: 0; } <form> <fieldset> <legend>Contact Form</legend> <ol> <li> <label for="name">Name</label> <input id="name" name="name" size="20" /></li> <li> <label for="email">Email</label> <input id="email" name="email" size="20" /></li> <li> <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</li> <li> <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</li> <li> <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></li> <li> <label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea></li> <li> <input type="submit" value="send it" /></li> </ol> </fieldset> </form>
运行结果:
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4:分而治之
假如你采取将横向表单,需要何种形式?很多情况(客户)会要求横向表单。我们可以依赖的是老伙伴 div,只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。
主要好处:空间的利用
代码:
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; } <form> <fieldset> <legend>Contact Form</legend> <div class="form-column"> <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</div> <!-- /form-column --> <div class="form-column"> <label for=" Choices3"> Choices (radio)</label> <input name=" Choice2" type="radio" /> Choice 1 <input name=" Choice2" type="radio" /> Choice 2 <input name=" Choice2" type="radio" /> Choice 3 <label for=" Choices3"> Choices (checkbox)</label> <input name=" Choice2" type="checkbox" /> Choice 1 <input name=" Choice2" type="checkbox" /> Choice 2 <input name=" Choice2" 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> <input type="submit" value="send it" /></div> <!-- /form-column --> </fieldset> </form>
运行结果:
#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,非常匆忙,并且不打算做浏览器测试,你应该另外找个新工作。玩笑而已,这个是为你准备的。
主要好处:直观
代码:
<form> <fieldset> <legend>Contact Form</legend> <table border="0"> <tbody> <tr><!-- column one --> <td><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</td> <!-- column two --> <td><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></td> <!-- column three --> <td><label for="message">Message</label> <input type="submit" value="send it" /></td> </tr> </tbody></table> </fieldset> </form>

原创文章,作者:admin,如若转载,请注明出处:https://www.laofox.com/web/html-tutorial/145.html

(0)
上一篇 2022年7月3日 上午10:45
下一篇 2022年7月3日 上午10:45

相关推荐

  • 入门:HTML的基本标签和属性简单介绍

    HTML是由标志和属性构成的,它们一起被用来告诉浏览器应该如何显示一页文档。标志用来引用一段文字或是一幅图片等文档部件,属性是标志的选项,在标志中修饰,如颜色,对齐方式,高度和宽度...

    html 2022年7月3日
    7300
  • Firefox下英文字母不换行的解决方案

    文本的排版依据语言的不同会有一些格式上的要求,比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头,对于英文来讲就是一个完整单词不会 在两行显示,浏览器会依据类似这样的原则来...

    html 2022年7月3日
    11100
  • HTML 文本转义小窍门

    今天在CSDN看到一种HTML文本转义的小窍门,很简便。 1、用dom的功能。先作为innerTEXT传给一个dom对象,再取innerHTML属性,就可以取到转义后的文本了。 例...

    html 2022年7月3日
    11000
  • 关于超链接的一些问题

    本次薯片会我们总共讨论了三个议题:A、 如何让“用户”更容易识别超链接?B、 超链接是否一定要带有“下划线”?C、 是按钮还是链接?一、 如何让“用户”更容易识别超链接?感觉都像链...

    2022年7月3日
    13000
  • W3C教程(16):其他的W3C活动

    本节概况了其他一些重要和有趣的 W3C 活动。 本节概况了其他一些重要和有趣的 W3C 活动。 Web Accessibility Initiative (WAI) WAI 定义了...

    html 2022年7月3日
    7900
  • 制作主流邮箱能正常显示的HTML邮件的技巧

    发送html邮件的建议:用style写内联的CSS;少用图片;用table实现左右布局或者更复杂的布局;用background元素设置背景图片等。 几乎每个会员制网站都需要通过后台...

    html 2022年7月3日
    7900
  • 作用相似html标记:strong与em、q、cite、blockquote

    在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们...

    html 2022年7月3日
    7200
  • 用js互相调用iframe页面内的js函数

    最近,天天搞论文开题报告,一时技痒,再次设计Web,一下子就碰到一个问题,以前设计WEB页的时候都是在IE里面跑的,从来没有考虑过firefox 更别提chrome了,可是现在不同...

    2022年7月4日
    10800
  • html 基底网址标记

    它的作用就是定一个全局的样式。那你后面的相对路径会以这个为基准: <img src="logo.gif" />会变成 <img src="https://www....

    html 2022年7月3日
    10000
  • 总结XHTML代码常见的应用问题

    一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,...

    html 2022年7月3日
    7300

发表评论

您的电子邮箱地址不会被公开。