Xzx2 में <form> में प्रतिस्थापित करने के लिए क्या करें? "एक्सएचटीएमएल 1.1 में टैग <form> में टैग <span> नहीं हो सकता है

Question

मैं एचटीएमएल में एक नौसिखिया हूँ। मैं yootools से लॉगिन मॉड्यूल का उपयोग कर रहा हूं:

<span> को किसके साथ प्रतिस्थापित करना है? मेरे पास एक्सएचटीएमएल 1.1 सख्त डॉक्ट टाइप (संक्रमणशील इसे बदल रहा है) और मुझे त्रुटि मिलती है:

"एक्सएचटीएमएल 1.1 में टैग <form> में टैग नहीं हो सकता xxx144

यह उपयोगकर्ता/पास बॉक्स एक दूसरे के बगल में स्थित है एक ही पंक्ति। मैं इन स्पैनों को प्रतिस्थापित कर सकता हूं, इसलिए यह शिकायत नहीं करता है?

धन्यवाद!

मारिया

संपादित करें: अब तक साफ़ किया गया है। इसलिए मुझे <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; 
} 

Answer 1

मुझे लगता है कि उन फैला होने और उन्हें नहीं होने के बीच फर्क सिर्फ इतना है कि फैला स्वचालित रूप से इनलाइन प्रदर्शित किए जाते हैं, जबकि divs और कई अन्य तत्वों (आदानों की तरह) स्वचालित रूप से प्रदर्शित किए जाते हैं कि "ब्लॉक।" इसलिए दो टेक्स्ट फ़ील्ड के लिए सीएसएस में display : inline; जोड़ने का प्रयास करें।

Answer 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 केवल वहाँ स्टाइल के लिए कर रहे हैं, बजाय खुद को तत्वों के उन वर्गों लागू होते हैं।

Answer 3

बस <form> टैग और </form> टैग से पहले एक </div> टैग के ठीक बाद तुरंत एक <div> टैग रखा, और आप अभ्यस्त सब पर अपने फैला बदलने की जरूरत है।

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