Question

我是html的初学者。我正在使用yootools的登录模块：

用<span>代替什么？我有XHTML 1.1严格的doctype（更改过渡修复它），我得到错误：

“在XHTML 1.1中，代码<form>不能包含代码<span>

这是在同一行上彼此相邻排列的用户/传递框。我有什么可以替换这些跨度，所以它不抱怨？

谢谢！

玛利亚

编辑：现在已经清理过了。所以我只需要找到一种方法来替换<span class="username">。

<li class="login">
    <form action="/cgi-bin/login" method="post" name="Login">

        <span class="username">
        <input type="text" name="username" size="18"  value="Username"  />
        </span>

        <span class="password">
        <input type="password" name="passwd" size="10" value="Password" />
        </span>

        <span class="login-button">
        <button value="Login" name="Submit" type="submit" title="L">L</button>
        </span>

    </form>
</li>





a:focus { outline: none; }

span.username,
span.password {
    width: 74px;
    height: 16px;
    padding: 6px 5px 2px 25px;
    float: left;
    overflow: hidden;
    margin-right: 0px; 

}



span.username input,
span.password input {
    padding: 0px;
    width: 100%;
    background: none;
    border: none;
    outline: none;
    float: left;
    color: #646464;
    font-size: 11px;
}



span.login-button {
    margin: 2px 5px 2px 0;
    width: 50px;
    height: 20px;
    float: left;
    overflow: hidden;
}



span.login-button button {
    display: block;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    font-size: 11px;
    line-height: 20px;
    color: #646464;
}




.login {
    float:right; 
    margin:5px 0 0 0;
    height: 24px;
    display: block;

}


.login span.username {
    background: url(img/username_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

.login span.password {
    background: url(img/password_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

.login span.username:hover {
    background: url(img/username_bg.png) 0 -24px no-repeat;
}

.login span.password:hover {
    background: url(img/password_bg.png) 0 -24px no-repeat;
}



.login span.username input:hover,
.login span.password input:hover,
.login span.username input:focus,
.login span.password input:focus {
    color: #F2AD29;
}

.login span.login-button {
    background: url(img/button_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

.login span.login-button:hover {
    background: url(img/button_bg.png) 0 -20px no-repeat;
}



.login span.login-button button:hover {
    color: #F2AD29;
}

Answer 1

在架构http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

中

表单标记只能包含块元素，请尝试使用：

<li class="login"> 
    <form action="/cgi-bin/login" method="post" name="Login"> 
        <div>
        <span class="username"> 
        <input type="text" name="username" size="18"  value="Username"  /> 
        </span> 

        <span class="password"> 
        <input type="password" name="passwd" size="10" value="Password" /> 
        </span> 

        <span class="login-button"> 
        <button value="Login" name="Submit" type="submit" title="L">L</button> 
        </span> 
        </div>     
    </form> 
</li>

Answer 2

只需在<div>标记后面加<form>标记，在</div>标记之前放置</form>标记即可，您根本不需要更改跨度。

Answer 3

我认为拥有这些跨度与没有跨度之间的唯一区别是跨距自动显示为内联，而div和许多其他元素（如输入）会自动显示为“阻止”。因此，请尝试将display : inline;添加到两个文本字段的CSS中。

Answer 4

请改为尝试：

<li class="login-black">
    <form action="/cgi-bin/login" method="post" name="Login">
        <input type="text" name="username" size="10" value="Username" class="username niftyquick y-login login" />
        <input type="password" name="passwd" size="10" value="Password" class="password niftyquick y-login login" />
        <input type="hidden" name="remember" value="yes" />
        <button value="Login" name="Submit" type="submit" title="L" class="login-button niftyquick y-login login">Log</button>
    </form>
</li>

如果您的spans仅用于样式，请将这些类应用于元素本身。

用<form>替换<span>的内容是什么？ “在XHTML 1.1中，标签不能包含标签<span> </span> </form> </span>

4 个答案: