用啥替换 <form> 中的 <span>？ “在 XHTML 1.1 中，标签 <form> 不能包含标签 <span>

Posted 2023-02-19

【中文标题】用啥替换 <form> 中的 <span>？ “在 XHTML 1.1 中，标签 <form> 不能包含标签 <span>

【英文标题】：What to replace <span> in <form> with? "In XHTML 1.1 the tag <form> cannot contain tag <span>用什么替换 <form> 中的 <span>？ “在 XHTML 1.1 中，标签 <form> 不能包含标签 <span>

【发布时间】：2011-04-04 01:55:38

【问题描述】：

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

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

"在 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;

【问题讨论】：

玛丽亚，你还没有足够的声望来投票，但你应该接受与你的具体答案最接近的答案，在这种情况下，Alochi 首先回答的和我一样，所以最好接受这个答案.

我该怎么做那个毛罗？我试过upvoting，没有像你说的那样工作。我没有看到任何“接受此答案”。

玛丽亚，只需找到答案并将鼠标悬停在灰色的复选标记上，使其显示为绿色并单击它。

【参考方案1】：

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

【讨论】：

谢谢。我知道。但是我可以用什么来替换所有这些跨度类？他们使用不同的格式。

【参考方案2】：

试试这个：

<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，我清理了原帖，现在不需要那么多span了。

似乎没有用。此外，现在我得到“在 XHTML 1.1 中，标签

【参考方案3】：

只需在<form> 标记之后立即放置一个<div> 标记并在</form> 标记之前立即放置一个</div> 标记，您根本不需要更改跨度。

【讨论】：

谢谢sssssssssssss Alochi！上帝保佑你！

这个地方很壮观！我问了 3 个问题，每次有人把我从这么多时间中拯救出来。每次我在花了 6 个小时搜索和尝试后提出这个问题！你们就是这样的专家。 Alochi、Mario、Dori、MatrixFrog……非常感谢你们。我这里有社区捐赠或类似的东西吗？

【参考方案4】：

在架构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> 

【讨论】：

谢谢sssssssssssss毛罗！上帝保佑你！