We use Tabs to make large forms easier to fill out rather than have multiple forms. Now, it's possible to use multiple forms, and work around that (if your architecture allows for such), but you shouldn't force people to use multiple forms as some languages/frameworks won't work well with it.

I should add, using multiple tabs with one <form> inside each tab you will still see this issue.

Is there a fix coming?

Hi,
You can not do a form that has both tabs.
This is the solution for the labels:

if($('#password').val() || $('#password').attr('placeholder')) {
  if(!$('#password').siblings('label').hasClass('active')) {
    $('#password').siblings('label').addClass('active');
  }
}

https://codepen.io/mirekmts/pen/aLbQgZ
Regards,

SOLUTION
Check the solution written on codepen.io
Don't  look at styles because this is MDB Free version

https://codepen.io/mirekmts/pen/aLbQgZ

Edit:
I'm going to write a solution with an incorrect label show when the text is inside.

I focused on tabs and missed the labels

Edit 2:
In codepen.io you have got a working solution (tabs and input)

Hi Miroslav,

Here are the tab-content panel classes on each tab press with your script:

Initial:

first-panel: tab-pane fade in show active
second-panel: tab-pane fade

After pressing Second:

first-panel: tab-pane fade in show
second-panel: tab-pane active

After pressing First:

first-panel: tab-pane in show active
second-panel: tab-pane

Regards
Ben

<script>
 $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var href = e.relatedTarget.getAttribute("href");
  if($(href).hasClass('active')) {
   $(href).removeClass('active');
  }
 });
</script>

Hi,

You have got a few bugs in your code.
Why would you want all tabs to be in form, not just where you have input?
You forgot to add a fade class.

<ul class="nav nav-tabs md-pills pills-ins" role="tablist">
 <li class="nav-item">
  <a id="general-tab" class="nav-link active" data-toggle="tab" href="#first-panel" role="tab">First</a>
 </li>
 <li class="nav-item">
  <a id="uas-tab" class="nav-link" data-toggle="tab" href="#second-panel" role="tab">Second</a>
 </li>
</ul>
<div class="tab-content">
 <div class="tab-pane fade in show active" id="first-panel" role="tabpanel">
  <form>
   <p>First tab contents</p>
   <div class="md-form">
    <input type="text" name="password" id="password" class="form-control">
    <label for="password">Password</label>
   </div>
  </form>
 </div>
 <div class="tab-pane fade" id="second-panel" role="tabpanel">
  <p>Second Tab Contents</p>
 </div>
</div>

Regards,