title: maxlength not working in html form input field with bootstrap
body: <p>I am using bootstrap and currently created form with 5 tabs in it. I have a form field called layer time in which I have 3 input fields namely hours, minutes,seconds. I want to set the maxlength of 2 for each field.But it is not working when I specify it. Please help me out with this. Following is my code for bootstrap form.</p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
      &lt;li class="active"&gt;&lt;a href="#basic-layer-tab" data-toggle="tab"&gt;&lt;b&gt;Basic Layer Data&lt;/b&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="#basic-calcuations-tab" data-toggle="tab"&gt;&lt;b&gt;Basic Calculations&lt;/b&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="#doping-N2-tab" data-toggle="tab"&gt;&lt;b&gt;Doping-Nitrogen&lt;/b&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="#doping-Al-tab" data-toggle="tab"&gt;&lt;b&gt;Doping-Aluminium&lt;/b&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="#other-calcuations-tab" data-toggle="tab"&gt;&lt;b&gt;Other Calculations&lt;/b&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;form action="insertlayer.php" id="newlayerform" role="form" method="post" class="form-horizontal" &gt;
  
          &lt;div class="tab-content"&gt;
  
              &lt;div class="tab-pane active" id="basic-layer-tab"&gt;
  
                 &lt;div class= "panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
  
                          &lt;div class="container-fluid"&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label for="layer_time" class="col-sm-2 control-label" style="color:red"&gt;Layer Time&lt;/label&gt;
                                  &lt;div class="col-sm-4"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;input type="number" class="form-control" name="layer_time_hours" id="layer_time_hours" maxlength="2"&gt;
                                          &lt;div class="input-group-addon"&gt;&lt;b&gt;hh&lt;/b&gt;&lt;/div&gt;
                                          &lt;input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2"&gt;
                                          &lt;div class="input-group-addon"&gt;&lt;b&gt;mm&lt;/b&gt;&lt;/div&gt;
                                          &lt;input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2"&gt;
                                          &lt;div class="input-group-addon"&gt;&lt;b&gt;ss&lt;/b&gt;&lt;/div&gt;
                                      &lt;/div&gt;&lt;!--end of input group--&gt; 
                                  &lt;/div&gt;&lt;!--end of column class--&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;&lt;!--end of container-fluid--&gt;
  
                      &lt;/div&gt;&lt;!--end of panel body--&gt;
                  &lt;/div&gt;&lt;!--end of panel default--&gt;
  
              &lt;/div&gt;&lt;!--end of tab-pane basic-layer-tab--&gt;
  
  &lt;/form&gt; &lt;!--end of form--&gt;  
  </code></pre>
  
  <p>For ease of understanding, I have just provided only information in one tab and one form field in the first tab. However there are 5 tabs in my form and each tab has many form fields.</p>