Заголовок появляется при зависании входного текста

Question

Я пытаюсь сделать входной текст, чтобы иметь заголовок, как вы можете сделать с помощью div ... Это можно сделать?

Это то, что я пробовал, но мне кажется, что это не работает ... HTML:

<label> 
    <input type="checkbox" class="promote_checkbox">Promote with</input> 
    <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote">Points</input> 
</label> 

И у меня есть еще одна проблема с этим ярлыком: если вы пытаетесь введите что-то в текстовое поле, вы не можете, потому что флажок будет проверен ... не могли бы вы рассказать мне, почему это происходит?

http://jsfiddle.net/2xw32q80/

Answer 1

Смотреть разметку, вы не закрыть <input> теги! Это работает для меня в Опере:

<label> 
 
    <input type="checkbox" class="promote_checkbox" />Promote with 
 
    <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote" />Points 
 
</label>

Результат:

Answer 2

В HTML, то <input> тег не имеет закрывающего тега, тогда как в XHTML она должна быть закрыта, подобный это <input />.

<label> тег определяет метку в <input> элемента, так что вам нужно обернуть каждый <input> со своими <label> тегами, как так:

<label>Label for checkbox 
 
    <input type="checkbox" class="promote_checkbox"> 
 
</label> 
 
<label>Label for points 
 
    <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote"> 
 
</label>

ИЛИ иметь атрибут на каждом for<label>, который соответствует атрибуту id его <input>

<label for="box">Label for checkbox</label> 
 
<input type="checkbox" id="box"><br> 
 
<label for="points">Label for points</label> 
 
<input type="text" id="points" maxLength="3" title="you need minimum 5 points to promote">