Material input box text not moving up when clicked

So I made a form with material input fields.  When I click on them the text does not move up like in the example.  It causes the text being written to clash with the placeholder. Code: <form id="loginForm" method="POST" action="/accounts/login/" novalidate="novalidate"> <input type="hidden" name="csrfmiddlewaretoken" value="ABCLcWqiMxxw1vFERnKQhunYdVZTfjRtYHIqWuAHW1jxlNBvi5WvJiUdiOZFE4Ib"> <div class="md-form"> <i class="far fa-user prefix"></i> <input type="text" class="form-control" id="username" name="login" value="" required=""> <label for="username">Username</label> <a class="green-text float-right" href="/accounts/signup/">Need to register?</a> </div> <div class="md-form"> <i class="far fa-key prefix"></i> <input type="password" class="form-control" id="password" name="password" value="" required=""> <label for="password">Password</label> <a href="/accounts/password/reset/" class="float-right green-text">Forgot Password?</a> </div> <div class="md-form form-check"> <input type="checkbox" class="form-check-input" id="remember"> <label class="form-check-label" for="remember">Remember me</label> </div> <button type="submit" class="text-center btn primary-color rounded center"> Login </button> </form>

---