Использование атрибута «для», чтобы связать пользовательский элемент

Я создал плагин JQuery, который трансформировать формы HTML, как этотИспользование атрибута «для», чтобы связать пользовательский элемент

<form> 
    <input type="checkbox" id="checkbox_01" value="1"/> 
    <label for="chexkbox_01"></label> 
</form>

В форме, как, что:

<form> 
    <input type="checkbox" id="checkbox_01" value="1" aria-hidden="true" /> 
    <span role="checkbox" id="aria-checkbox_01" aria-checked="false" tabindex="0"></span> 
    <label for="aria-chexkbox_01"></label> 
<form>

Правомерно изменить атрибут for, чтобы связать пользовательский элемент?

источник

2016-10-17 John

набор <метка для = "checkbox_01"> связать свой входной элемент. Вы этого хотите? – mymotherland

Нет, я хочу, чтобы сохранить исходный флажок, чтобы сохранить ответ пользователя, но я хочу использовать стилизованный элемент (sapn), имеющий интерфейс. – John

К сожалению: нет, я хочу сохранить собственный флажок, чтобы сохранить ответ пользователя, но я хочу использовать стилизованный элемент (span) в качестве интерфейса. – John

Номер

Если указан атрибут, значение атрибута должно быть Идентификатор labelable элемента в том же документе в качестве элемента этикетки.

- https://www.w3.org/TR/html5/forms.html#attr-label-for

Некоторые элементы, не все из них форм-ассоциированных, классифицируются как labelable элементов. Это элементы, которые могут быть связаны с элементом метки.

ввода Кнопка (если атрибут типа не в скрытом состоянии) кейген измеритель выходной прогресс выберите текстовое поле

- https://www.w3.org/TR/html5/forms.html#category-label

Промежуток не labelable элементом.

источник

2016-10-17 09:16:21 Quentin

Вам просто нужно проверить свой код.

Как вы можете видеть, атрибут for потерял свою фоноконтактность, если вы нажмете на метку, этот флажок не выбран.

Таким образом, вы должны иметь такой же for и id атрибут в вашем label/input

<input type="checkbox" id="checkbox_01" value="1" aria-hidden="true" /> 
 
<span role="checkbox" id="aria-checkbox_01" aria-checked="false" tabindex="0"></span> 
 
<label for="aria-chexkbox_01">Click on label must check the checkbox</label>

источник

2016-10-17 09:16:38 Alexis

Спасибо Alexis, я сделал это изменение из-за скрытого атрибута атрибута флажка, акцент был сделан на javascript при нажатии на ярлык. Я должен переосмыслить свой плагин ... – John

Nota: Проблема здесь не в том, что щелчок на ярлыке не проверяет флажок non native (который отлично может быть выполнен с использованием скрипта), но тот факт, что фокусировка этого элемента 'role = checkbox' не извлекает доступного описания элемент. – Adam

Вы должны использовать aria-labelledby, чтобы достичь того, чего вы хотите:

<form> 
<span role="checkbox" aria-labelledby="aria-label" aria-checked="false" tabindex="0"></span> 
<span id="aria-label">Label</label> 
</form>

В label элемент зарезервирован для некоторых родных элементы формы:

buttoninput (если атрибут типа не в скрытом состоянии) keygenmeteroutputprogressselecttextarea

источник

2016-10-17 12:19:29 Adam

Использование атрибута «для», чтобы связать пользовательский элемент

ответ

Смежные вопросы