Topic: Form labels not functioning
Expected behavior I am using the md-form inputs, and labels. I am trying to get them to work as they do in examples where the labels float to the top when active. Actual behavior The labels don't move at all, they change color when selected but that's all. When you type something into the textbox the text shows behind the label. I created a snippet that works as expected and then copied it into my project and it doesn't work. I have other components working as expected, the forms seem to be the one thing don't function as they should. I am using MDB 5 pro. Here is a sample directly from my code. when you click into the text box, it hightlights as it should but the label itself is static. i have warnings in the css file, but no errors in the project or chrome dev tools. I'm at a loss. Resources (screenshots, code snippets etc.)
<div class="md-form mb-0">
<input type="text" id="senderLast" class="form-control">
<label for="senderLastName">Last Name</label>
</div>
The ID of <input> has to match the value of your for="" attribute.
Andrew Ford pro priority commented 7 months ago
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
To associate the with an element, you need to give the an id attribute. The then needs a for attribute whose value is the same as the input's id.
Tomek Makowski staff commented 7 months ago
@Andrew Ford thats right. @bsteinrock.dev, is the problem still present?
Answered
- User: Free
- Premium support: No
- Technology: jQuery
- MDB Version: 4.19.1
- Device: Laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No