Text Field does not support implicit label association · google/material-design-lite#1737

(4 评论) (0 反应) (0 负责人)HTML (32,173 star) (4,926 fork)batch import

Textfieldhelp wantedresearch

描述

The HTML spec allows for an implicit association between a label and an input by making the input a descendant of the label. This avoids the need for an associating for attribute, which can be problematic when generating dynamic markup because element identifiers must be unique across the entire page. Using an implicit association avoids the need for id or for attributes altogether. You can work around this by generating a unique identifier when generating the markup - but that's a little inconvenient.

So instead of:

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample1" />
  <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

It would be convenient to be able to do this:

<div class="mdl-textfield mdl-js-textfield">
  <label class="mdl-textfield__label"><input class="mdl-textfield__input" type="text" /> Text...</label>
</div>

http://www.w3.org/TR/html5/forms.html#the-label-element

The MDL textfield does not appear to support this arrangement.

贡献者指南

技术栈: htmlcssjavascript
领域: frontendaccessibility
议题类型: feature
难度: 3
预计时间: 1-3 hours
活动状态: stale
清晰度: clear
前置要求: HTML label elementCSS for positioningJavaScript event handling
新手友好度: 60
研究方向: Investigate the existing Text Field component implementation in material design lite, specifically the JavaScript and CSS that handle the label and input elements. Look for how the `for` attribute is currently used and how to support implicit association when input is nested inside label. Check comments on issue #1737 for any prior discussion or attempted solutions. The HTML spec reference is provided; ensure the implementation aligns with it.