¿Qué reemplazar <span> en <form> con? "En XHTML 1.1, la etiqueta <form> no puede contener la etiqueta <span>

Question

Soy un principiante en html Estoy utilizando un módulo de inicio de sesión desde YOOtools:.?

Lo que hay que sustituir <span> con Tengo XHTML 1.1 estricto tipo de documento (cambiando arreglos transitorios ella) y me sale error:

"en XHTML 1.1 <form> la etiqueta no puede contener la etiqueta <span>

Esto se alinea carpeta de usuario/pase uno al lado del otro en la misma línea. ¿Con qué puedo reemplazar estos tramos para que no se queje?

Gracias!

María

Editar: Se ha limpiado a esto ahora. Así que solo necesito encontrar una manera de reemplazar <span class="username"> con algo.

<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

Creo que la única diferencia entre tener esos tramos y no tenerlos es que vanos se muestran automáticamente en línea, mientras que divs y muchos otros elementos (como insumos) se muestran automáticamente "bloque". Intente simplemente agregar display : inline; al CSS para los dos campos de texto.

Answer 2

probar este lugar:

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

Si su spans están allí sólo para el peinado, aplicar esas clases a los propios elementos en su lugar.

Answer 3

sólo hay que poner una etiqueta <div> inmediatamente después de la etiqueta y una etiqueta de <form></div> inmediatamente antes de la etiqueta </form>, y usted no necesita cambiar sus tramos en absoluto.

Answer 4

En el esquema http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

la etiqueta FORM sólo puede contener elementos de bloque, probar este lugar:

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