用户名: 密码: 验证码:           网站地图  高级搜索  RSS订阅  收藏本站
您的位置:主页 > 网页制作 > DIV+CSS >

用css制作表单并体验亲和力 (1)

[ 来源:中国设计秀 | 作者: | 更新日期:2008-3-10 09:38:02 | 人气: | 评论 0 条 ]

对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也碰到过。我现在要介绍一个用<fieldset></label>标签制作漂亮而且具体亲和力的表单的方法。

文章来源于www.hot007.com

基本的xHTML: 文章来源于www.jc567.cn

<h3>已注册用户登录</h3>
<form action="" method="post" name="apLogin" id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
<input name="login791" type="submit" class="buttom" value="登录" />

文章来源于www.hot007.com

</div>
<div class="forgotpass"><a href="#">您忘记密码?</a></div>
</fieldset>
</form>
jc567.cn

看了代码,发现标单描述文字都在<label></label>中,只要让<label></label>标签浮动左对齐,fieldset包含的<div>清除浮动,就可以实现我们常见的那类布局。
www.hot007.com


Tags:用css制作表单并体验亲和力,(1)
您的评论
用户名: 新注册) 密码: 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为