Чем заменить <span>в <form>на?«В XHTML 1.1 тег <form>не может содержать тег <span>

Question

Я новичок в 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;
}

Answer 1

В схеме 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> 

Answer 2

Просто поместите тег <div> сразу после тега <form> и тег </div> непосредственно перед тегом </form>, и вам вообще не нужно менять интервалы.

Answer 3

Попробуйте вместо этого:

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

Я думаю, что единственное различие между наличием этих промежутков и их отсутствием состоит в том, что промежутки автоматически отображаются встроенными, в то время как элементы div и многие другие элементы (например, входные данные) автоматически отображаются как «блок».Поэтому попробуйте просто добавить display : inline; в CSS для двух текстовых полей.