经典论坛 » WEB标准化专栏 » 登陆区域你们怎么写？

samjohn 发表于 2008-8-28 13:08

登陆区域你们怎么写？

div页面中的登录区域，我是这样写的：是不是太麻烦!大家有好点的方法么？
<div id=user>
<div class="1">用户名</div>
<div class="2"><input type="text" name="textfield" /></div>
<div class="1">密码</div>
<div class="2"><input  type="text" name="textfield" /></div>
<div class="3"><input name="Input" type="submit" value="登陆" /></div>
<div class="4"><input name="Input" type="submit" value="注册" /></div>
<div class="3"><input name="Input" type="checkbox" value="" />记住密码</div>  
<div class="4"><a href="#">忘记密码?</a></div>
</div>

feigege 发表于 2008-8-28 13:27

我看到好多好多的div啊=   =|||
表单中不是有个标签叫lable吗
另外你的忘记密码本身就有个a标签了，我个人就不会在外面再套个div标签。

samjohn 发表于 2008-8-28 14:03

table不太好，因为列的宽度不一样，例如：上面的两行的列左侧统一，右侧统一，但是下面放按钮的行应该居中，所以还不能和他们用一个表格里面分出来的列来做。

feigege 发表于 2008-8-28 14:13

[quote]原帖由 [i]samjohn[/i] 于 2008-8-28 14:03 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4183417&ptid=2882325][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
table不太好，因为列的宽度不一样，例如：上面的两行的列左侧统一，右侧统一，但是下面放按钮的行应该居中，所以还不能和他们用一个表格里面分出来的列来做。 [/quote]
[color=Red][b][u]lable[/u][/b][/color]
楼主你近视？

samjohn 发表于 2008-8-28 14:34

sorry，真是看错了！！！:)

marsvip 发表于 2008-8-28 14:35

<ul class="">
                        <li>
                                <label class="item">Email 地址</label>
                                <input type="text" class="" />
                        </li>
                        <li>
                                <label class="item">密码</label>
                                <input type="password" class="" />
                        </li>
                        <li>
                                <input type="checkbox" id="chkCookie" name="chkCookie" />
                                <label for="chkCookie">在这台电脑上记住我</label>
                        </li>
                        <li>
                                <input type="submit" value="登录" />
                           
                        </li>
                    </ul>
这样控制label和input便于维护，代码也简洁、

weams 发表于 2008-8-28 14:37

[html]<form>
    <fieldset>
    <label>用户名</label>
    <input type="text" name="textfield" />
    <label>密码</label>
    <input  type="text" name="textfield" />
    <input name="Input" type="submit" value="登陆" />
    <input name="Input" type="submit" value="注册" />
    <input name="Input" type="checkbox" value="" />
    <label>记住密码</label>
    <a href="#">忘记密码?</a>
    </fieldset>
    <form>[/html]
俺是这样写的。

thelucky 发表于 2008-8-28 15:08

登陆区域建议用7楼的结构
6楼的用ul不太合适

feigege 发表于 2008-8-28 15:16

[quote]原帖由 [i]thelucky[/i] 于 2008-8-28 15:08 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4183656&ptid=2882325][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
登陆区域建议用7楼的结构
6楼的用ul不太合适 [/quote]
不了解不要乱说。
6楼和7楼的布局方式是用在不同的场合，又请问怎么个不合适？
我建议不同的情况不同的方式解决。
比如拿6楼的布局，我们可以在以一列为样式的登录情况下使用。
比如7楼，我们可以在一行中情况下使用。
我觉得6楼写的不错，很清晰明了，结构一目了然。

samjohn 发表于 2008-8-28 15:49

问题是我想要的效果是[url]http://mail.163.com/[/url]这种排列方式的。用六楼的能实现么？:confused:

Elking 发表于 2008-8-28 16:36

table 表单有优势....你上面的163 也是table的!!3列对齐无疑也是table
用其他的要写多少CSS啊!!不划算!

261509559 发表于 2008-8-28 16:50

[url]http://bbs.blueidea.com/thread-2715374-1-1.html[/url]

samjohn 发表于 2008-8-28 17:08

12楼提供的好文章啊！谢谢！

yylt 发表于 2008-8-28 20:07

<ul class=" ">
<li>
<label for="signupname">用户名</label>
</li>
<li>
<input type="text" name="Name" id="signupname" value="" />
<li>
.......
<ul>
我觉得这样更灵活 不用修改xhtml  修改css 变化很多  以后修改方便

flashpig 发表于 2008-8-29 19:29

<p>
    <label>Username:</label>
    <input type="text" />
  </p>
  <p>
    <label>Password:</label>
    <input  type="password" />
  </p>
  <p>
    <label>Password(again):</label>
    <input  type="password" />
  </p>
  <p>
    <label>E-mail:</label>
    <input type="text" />
  </p>

ppmouse009 发表于 2008-8-30 10:12

很多时候用table反而可以用更少的代码实现更好的效果。在追求标准化的今天，我认为可以只要能够达到优化，用table也不会就代表着不标准的。

yylt 发表于 2008-8-31 17:09

[quote]原帖由 [i]ppmouse009[/i] 于 2008-8-30 10:12 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4186473&ptid=2882325][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
很多时候用table反而可以用更少的代码实现更好的效果。在追求标准化的今天，我认为可以只要能够达到优化，用table也不会就代表着不标准的。 [/quote]
嗯 同意   table 应该也是标准的一部分
与其它的标签一样 用的适当就好

wyysf 发表于 2008-8-31 17:32

我想说的是只要你写的符合规则
代码清晰就行吧一定说那个就是最好的
其实在做登录界面方面table的优势很大
并不是说css就要放弃table只是说部要滥用table罢了！

alex306 发表于 2008-8-31 18:57

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单</title>
<style type="text/css" media="screen">
body {
font-family:Verdana, "宋体";
font-size:12px;
color:#555;
margin:0;
padding:0;
}
input {
font-family: Tahoma, "宋体";
font-size: 12px;
}
ul {
margin:0 auto;padding:0;list-style:none;text-align: left;width:400px
}
ul li label {
line-height: 28px;
width: 80px;
text-align: right;
}
</style></head>
<body><div><ul><li>
<label> first name：
<input name="text" type="text" /></label></li>
<li><label>last name：<input name="text" type="text" /></label></li>
<li><label>brity：<input name="text" type="text" /> <em>&nbsp;(1986/5/3)</em></label></li>
<li><label>add：<input name="text" type="text" /></label></li>
</ul></div></body>
</html>[/html]


WEB标准的的目的是用DIV排版 TABLE做真正的表格
TABLE不是不能用 而是不能用来布局
上面的代码 加上CSS很容易实现LZ要的

snowshade 发表于 2008-9-1 11:22

不同的页面用不同的标签吧，没有一个固定的模式吧，我是根据不同的项目来看要用什么标签的，当然要复杂的话感觉还是用table比较简单，也不会违背web标准，因为那本来就是一个表格。
提供多一种方法，用dl dt dd

[code]<dl>
    <dt>用户名：</dt>
    <dd><input type="text" /></dd>
    <dt>密码：</dt>
    <dd><input type="text" /></dd>
</dl>
<p><input type="button" /></p>[/code]

bleuidea 发表于 2008-9-1 11:35

遵循标准情况下，怎么方便怎么来。。要不多累啊。。

huanglongcn 发表于 2008-9-1 15:47

十二楼,

nui963 发表于 2008-9-2 16:31

我习惯表单用table实现，方便多了

touzhao 发表于 2008-9-2 17:08

<fieldset>对表单分组 语意十足:D

rainoxu 发表于 2008-9-2 17:26

做表单觉得table更划算....

查看完整版本: 登陆区域你们怎么写？