Reports a form element (input
, textarea
, or select
) without an associated label. Suggests creating a new label. Based on WCAG 2.0: H44.
Suppress an inspection in the editor
-
Position the caret at the highlighted line and press Alt+Enter or click
.
-
Click the arrow next to the inspection you want to suppress and select the necessary suppress action.
Last modified: 13 May 2022
Code Inspection: Missing PHPDoc comment Code Inspection: Missing augmentation import
Let’s say I have an HTML file:
<form mat-dialog-content [formGroup]="addressForm">
<div class="u-flex fields-wrapper">
<mat-form-field>
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" />
</mat-form-field>
<button mat-raised-button (click)="submitName()">
Submit
</button>
</form>
And I’m on WebStorm developing Angular, I will always get this warning: Missing associated label
asked Dec 24, 2020 at 16:42
3
Because Angular Material uses mat-label
instead of label
. WebStorm inspection relates to it as a warning.
As a workaround, in WebStorm you can go to Preferences | Inspections | HTML | Accessibility
-> Missing associated label
and uncheck it.
Note:
When you are unchecking this checkbox, you will not get a warning also when you are working on inputs that are not mat-input
and don’t have an associated label
.
answered Dec 25, 2020 at 10:49
Уже весь интернет облазил…. Не могу никак отключить оповещения о:
1. missing associated label
2. cannot resolve direstory (особо достала)
Как и где это отключить, подскажите?
PS искал в Fle/Settings/Intentions и в Fle/Settings/Language Intentions
нет там такого)
Версия 2019.1.2
-
Вопрос заданболее трёх лет назад
-
677 просмотров
What is the exact error/warning message that Pycharm reports?
Missing associated label
So, like I said, if sequence didn’t matter, I would not have bothered to post this. But apparently it does.
Can you be more specific about how it matters?
Sure. Lots of times, you can put together a string of attributes or method calls and the sequence in which you write them does not matter. A good example would be chaining filters in Django:
The order of filter() and select_related() chaining isn’t important, https://docs.djangoproject.com/en/4.0/ref/models/querysets/#select-related
Do you just mean that it matters to Pycharm?
Yes, clearly that’s true. But what I mean is that the sequence of operations matters when the first alters state such that the second either won’t work, or won’t work as expected because it needed or expected the state which the first one received, i.e., before mutation, or a syntax error.
Or do you mean it affects how the label is displayed?
No. Not talking about that at all.
The sequence / syntax of ‘label’ and ‘input’ on this page is the reverse of the sequence on this page:
developer.mozilla.org/en-US/docs/Web/HTML/Element/form#examplesExactly which code examples do you mean?
I see that you gave more than one response, and in the second you reference the code I am talking about.
The examples at the top of that page don’t use the
for
attribute. So in that case, the way to associate thelabel
with aninput
is make theinput
element a child of thelabel
. Right?
Right.
The examples later on in that page use
for
attribute. So in that case, there is no need to make theinput
a child of thelabel
; instead thelabel
can be anywhere at all in the document.
So that all looks fine.
So is the inconsistency that one page has this:
<label for="name">Enter your name: </label> <input type="text" name="name" id="name" required>
…while the other has this?
<input type="checkbox" id="horns" name="horns"> <label for="horns">Horns</label>
…that is, in one case, the
label
element precedes theinput
element, while in the other case thelabel
element
follows theinput
element?
Yes.
It’s completely valid for the input element to not be inside the label element — as long as the label element has a for >attribute.
Ok. I did not know it was the for attribute that makes the difference.
Note that PyCharm still complains even with the for attribute:
24 <li><label for="apple pie">apple pie</label>
25 <input type="checkbox" name="apple pie"></li>
26 <li><input type="checkbox" name="applesauce"></li>
27 <label for="applesauce">applesauce</label>
Lines:
(24) No complaint
(25) Missing associated label ( even though 24 & 25 are wrapped in the same list tag)
(26) Missing associated label
(27) Element label is not allowed here
But if I do this:
26 <li><input type="checkbox" name="applesauce">
27 <label for="applesauce">applesauce</label></li>
Now, with 26 and 27 wrapped in the same list tag, PyCharm’s warning about label on 27 disappears, but the ‘missing associated label’ is there for every case where input precedes label even with the for. (It is a much longer list than I have posted).
FYI, I decided to look this up at W3:
https://www.w3.org/WAI/WCAG21/Techniques/html/H44
Note that the label is positioned after input elements of type=»checkbox» and type=»radio».
Well, thanks, I guess that clears this up for me. I am grateful for the time, because I am always learning something. I don’t consider myself a front end person. I’m not closing this issue in case you wanted to add anything.
I’m trying out the program the first time and I get errors and warnings that should not be there. because the page loads up just fine. I have screenshots.
categories.php
Undefined variable '$connection'
Path 'inc/header.php' not found
Path 'inc/nav.php' not found
Path 'inc/footer.php' not found
are the ones I’m talking about
cat.php screenshot
db.php screenshot
the warrings are valid code.
db.php screenshot
header.php is valid too
header.php screenshot
Refactoring seems to be not working I provided a screenshot
Refactoring screenshot
and is there a way to fix a code typo automatically or to see how it should be spelled?
asked Jan 30, 2021 at 15:02
1
I’ll take a stab at some of the issues in your cat.php screenshot of C:wamp64wwwCMSadmincategories.php
- line 5 (path not found) The relative path in your include resolves to
C:wamp64wwwCMSadminincnav.php
since «categories.php» is in the «admin» directory. And phpStorm is correct: that
file does not exist. Change line 5 to sayinclude __DIR__ . '/../inc/nav.php
I suspect that is the same issue with the header include on line 1 and the href links yourheader.php
file. - line 15 (wrong attribute value) — method should be «post» or «get» (typically)
- line 18 (missing associated label) — Add an
id=cat-title
attribute to your<input>
tag. - I don’t have enough info to comment on the other issues
answered Jun 3, 2021 at 22:13
1