title: Place error message inside a Bootstrap input
body: <p>I have a PHP that validates if a input is empty if it is an error message is displayed e.g Email required, I am using Bootstrap for my form. Originally the message is displayed under the input (which I don't want).</p>
  
  <p>Code im currently using:</p>
  
  <pre><code>&lt;label&gt;Number Of Rooms: &lt;/label&gt;                                            
  &lt;input type="number" class="form-control input-sm" max="10" name="Rooms" value="&lt;?php echo $RoomErr;?&gt;"&gt;
  &lt;span class="error"&gt;* &lt;br&gt;&lt;?php echo $RoomErr;?&gt;&lt;/span&gt;
  </code></pre>
  
  <p>here is the link to the website <a href="https://tadzik9634.000webhostapp.com/lest-sidebar.php" rel="nofollow noreferrer">website</a></p>
  
  <p>I want to display the error message inside the text input i tried assigning the error to the value of the input: </p>
  
  <pre><code>&lt;label&gt;Number Of Rooms: &lt;/label&gt;                                            
  &lt;input type="number" class="form-control input-sm error" max="10" name="Rooms" value="&lt;?php echo $RoomErr;?&gt;"&gt;
  </code></pre>
  
  <p>The following does not work. </p>
  
  <p>My CSS just assigns the error to color red</p>
  
  <pre><code>.error{
  color:red;
  }
  </code></pre>
  
  <p>I can't find much stuff about this.</p>