Was ist zu ersetzen <span> in <form> mit? „In XHTML 1.1 den Tag <form> nicht enthält Tag <span>

Question

Ich bin ein Anfänger in html ich ein Login-Modul von yootools bin mit:.?

Was <span> mit ersetzen Ich habe XHTML 1.1 Strict doctype (wechselnde Übergangsbehebungen es) und ich bekommen Fehler:

„In XHTML 1.1 den Tag <form> nicht Tag <span>

enthalten Dies ist neben Benutzer/Pass-Box aufgereiht sie auf der gleiche Linie. Was kann ich mit diesen Spannen ersetzen, damit es sich nicht beschwert?

Danke!

Maria

Edit: jetzt diese Aufgeräumt. Also muss ich nur einen Weg finden, <span class="username"> durch etwas zu ersetzen.

<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

Ich denke, der einzige Unterschied zwischen diesen Spannweiten aufweisen und sie nicht, ist, dass mit Spannweiten automatisch inline angezeigt werden, während divs und viele andere Elemente (wie Eingänge) automatisch angezeigt werden, „Block“. Versuchen Sie also einfach, display : inline; für die zwei Textfelder zum CSS hinzuzufügen.

Answer 2

Versuchen Sie stattdessen:

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

Wenn Ihr spans gibt es nur für Styling, gelten diese Klassen auf die Elemente selbst statt.

Answer 3

Einfach einen <div>-Tag unmittelbar nach dem <form> Tag und einen </div>-Tag unmittelbar vor dem </form>-Tag, und Sie pflegen müssen bei allen Spannweiten ändern.

Answer 4

Im Schema http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

Der Tag-Formular nur Block-Elemente enthalten können, versuchen Sie stattdessen:

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