В настоящее время я работаю над веб-сайтом, который включает в себя стилизованные входные данные, например, с помощью <label> -элемента для стилевого оформления :
<label class="checkbox">
<input type="checkbox">
<span></span>
</label>
И где стандарт <input> типы просто не могут быть надежно стилизованы. Мы воссоздали необходимую функциональность с другими типами элементов, например <input type="range"> был заменен следующим (и немного JavaScript):
<div class="rangeinput">
<div class="rangeinput-thumb></div>
<div class="rangeinput-slider"></div>
</div>
Теперь вопрос заключается в том, как семантически добавить метки к этим элементам.
Для обычных вводов элемент <label> будет работать, но для предоставленных примеров ни <label>, ни<div> разрешено содержимое <label>.
. Флажок-флажок может быть решен путем назначения идентификатора для флажка и использования for -атрибута элемента label, так чтоэто не должно быть помещено вокруг другого лейбла.Но это не работает для любых пользовательских элементов, так как они не labelable , и было бы предпочтительно использовать одно решение для каждого ввода .
В настоящее время яобертывание каждого элемента, подобного вводу, в <fieldset> с <legend>, но это больше похоже на взлом, чем на самом деле помогает семантике:
<fieldset>
<legend>A styled rangeinput:</legend>
<div class="rangeinput">
<div class="rangeinput-thumb></div>
<div class="rangeinput-slider"></div>
</div>
</fieldset>
Этот вопрос не о переходе по клику-фокусный эффект элемента, а точнее, как семантически связать короткий описательный текст с элементом, который принимает пользовательский ввод.