首页 > 开发 > CSS > 正文

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

2024-07-11 08:24:13
字体:
来源:转载
供稿:网友

错新站长站将分享一种使用纯CSS代替HTML表格元素设计表单的方法。
  很多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>
<input type=”text” name=”password” id=”password” />
<button type=”submit”>Sign-up</button>
<div class=”spacer”></div>
</form>
</div>

  通过上面的代码,你是否能看出它的视觉样式呢?下面是我们的CSS表单结构图示:
CSS-表单-教程
  我为每个input元素使用了<label>标签,并使用<span>标签包含简短的描述。所有的label和input元素都是用了CSS的float属性,值为left。第二步:CSS代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表