纯语义化XHTML+CSS设计表单方法

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

　　很多CSS爱好者不喜欢HTML表格，尤其是在制作表单的时候，虽然现在已经是XHTML+CSS的年代，但表单的设计大多还在采用table来布局。那么，有没有更好的使用纯语义化XHTML+CSS设计表单方法呢？今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧！

　　在这里网页教学网要说，并不是要完全摒弃table的使用，它有它的语义化布局作用，尤其是在存储数据的时候。我在大多数情况下会使用纯CSS来设计表单，但是，我也很喜欢表格，只要我们能在正确的地方使用正确的元素就可以了，不要太过追求所谓的DIV+CSS。直接使用table要比使用CSS来”模拟”(display:table;)表格更方便更快速。下面网页教学网将分享一种使用纯CSS代替HTML表格元素设计表单的方法。

CSS-表单

您可以下载源代码并使用在自己的网站项目中。

下载源代码

第一步:HTML代码

创建一个新页面index.html，然后拷贝并粘贴以下代码到<body>标签内。

<div id=”stylized” class=”myform”>
   <form id=”form” name=”form” method=”post” action=”index.html”>
   <h1>Sign-up form</h1>
   <p>This is the basic look of my form without table</p>

   <label>Name
     <span class=”small”>Add your name</span>
     </label>
     <input type=”text” name=”name” id=”name” />

   <label>Email
   <span class=”small”>Add a valid address</span>
   </label>
   <input type=”text” name=”email” id=”email” />

   <label>Password
   <span class=”small”>Min. size 6 chars</span>
   </label>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS网页布局学习之Font-size的妙用下一篇: CSS解决方案：IE6中遇到png兼容性

关于纯语义化XHTML+CSS设计表单方法的所有评论

随机推荐