What to replace <span> in <form> with? "In XHTML 1.1 the tag <form> cannot contain tag <span>

Question

Hello Folks,

I am a beginner in html. I am using a login module from yootools:

What to replace <span> in with? I have XHTML 1.1 strict doctype (changing transitional fixes it) and I get error:

"In XHTML 1.1 the tag <form> cannot contain tag <span>

This is user/pass box lined up next to each other on the same line. What can I replace these spans with so it doesnt complain?

Thanks!

Maria

Edit: Cleaned up to this now. So I just need to find a way to replace <span class="username"> with something.

<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

I think the only difference between having those spans and not having them is that spans are automatically displayed inline, while divs and many other elements (like inputs) are automatically displayed "block." So try just adding display : inline; to the CSS for the two text fields.

Answer 2

Try this instead:

<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>

If your spans are only there for styling, apply those classes to the elements themselves instead.

Answer 3

Just put a <div> tag immediately after the <form> tag and a </div> tag immediately before the </form> tag, and you wont need to change your spans at all.

Answer 4

In the schema http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

The Form Tag can only contain block elements, try this instead:

<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>