该如何替换<form>中的<span>标签？在XHTML 1.1中，<form>标签不允许包含<span>标签。

Question

我是一个HTML的初学者。我正在使用yootools提供的登录模块：

我需要替换其中的<span>标签。我使用的是XHTML 1.1 strict doctype（转换到transitional可以解决问题），但是会出现以下错误：

“在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;
}

- MariaKeys

---

Maria，你的声望还不足以进行点赞，但你应该接受最符合你问题的答案，就像这种情况下Alochi先回答了和我一样的答案，所以最好接受那个答案。 - Mauro

我该怎么做，Mauro？我尝试了点赞，但像你说的那样没有起作用。我没有看到任何“接受此答案”的选项。 - MariaKeys

Maria，找到答案后将鼠标悬停在灰色的勾号上，直到它变成绿色，然后点击它。 - Mauro

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> 

- Mauro

---

谢谢你，Mauro！愿上帝保佑你！ - MariaKeys

Answer 2

只需在 <form> 标签后面立即放置一个 <div> 标签，在 </form> 标签前面立即放置一个 </div> 标签，您就不需要更改您的 spans。

- Alohci

---

谢谢你，Alochi！上帝保佑你！ - MariaKeys

这个地方真是太棒了！我问了3个问题，每次都有人帮我节省了很多时间。而且每次在我搜索和尝试了6个小时之后才来提问！你们这些人真是专家。Alochi、Mario、Dori、MatrixFrog... 非常感谢你们所有人。这里是否有社区捐赠或类似的东西？ - MariaKeys

Answer 3

尝试使用这个替代方案：

<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`只是用来样式化的，那么应该将这些类直接应用于元素本身。

- Dori

---

Dori，我已经整理了原始帖子，现在不需要那么多的跨度了。 - MariaKeys

似乎没有起作用。而且，现在我得到了“在XHTML 1.1中，标签< form>不能包含标签< input>”！如果没有输入，那么表单有什么用呢？ - MariaKeys

Answer 4

我认为拥有这些span和没有它们之间唯一的区别是，span会自动以内联方式显示，而

div

和许多其他元素（如输入框）则会自动以“块”形式显示。因此，请尝试将 display: inline; 添加到两个文本字段的 CSS 中。

- Tyler

---

谢谢。我知道这个。但是我可以用什么替换所有这些span类呢？它们有不同的格式。 - MariaKeys