Place error message inside a Bootstrap input - php

Question

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).
Code im currently using:
<label>Number Of Rooms: </label>
<input type="number" class="form-control input-sm" max="10" name="Rooms" value="<?php echo $RoomErr;?>">
<span class="error">* <br><?php echo $RoomErr;?></span>
here is the link to the website website
I want to display the error message inside the text input i tried assigning the error to the value of the input:
<label>Number Of Rooms: </label>
<input type="number" class="form-control input-sm error" max="10" name="Rooms" value="<?php echo $RoomErr;?>">
The following does not work.
My CSS just assigns the error to color red
.error{
color:red;
}
I can't find much stuff about this.

Answer 1

You can try like this, because it is working as a placeholder.
<input type="number" class="form-control input-sm error" max="10" name="Rooms" placeholder="<?php echo $RoomErr;?>">

Answer 2

Please try this. I am using position:absolute; And manage this
label {
display: inline-block;
margin-left: 20px;
width: 135px;
}
.error {
color: red;
}
.form-group .error {
left: 165px;
position: absolute;
top: 5px;
}
.form-group{position:relative;}
.form-inline .form-control{display: inline-block;
vertical-align: middle;
width: auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-9">
<div class="container-form">
<p><span class="error">* required field.</span></p>
<form id="EmailForm" class="form-horizontal" action="" method="post">
<div class="form-inline">
<div class="form-group" style="position: relative;">
<label for="first_name">Name: </label>
<input class="form-control input-sm" name="first_name" type="text">
<span class="error">*Name is required</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="last_name">SurnameName: </label>
<input class="form-control input-sm" name="last_name" type="text">
<span class="error">*</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="email">Email: </label>
<input class="form-control input-sm" name="email" type="text">
<span class="error">* Email is required</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Number Of Rooms: </label>
<input class="form-control input-sm" max="10" name="Rooms" value="Mininum number of Hours : 3" type="number">
<span class="error">* Mininum number of Hours : 3</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label> Number hours: </label>
<input class="form-control input-sm" min="3" name="Hours" type="number">
<span class="error">* Mininum number of Hours : 3</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="description">Description of the House: </label>
<textarea name="description" rows="auto" class="form-control input-sm" cols="55"></textarea>
<span class="error">* Description is required</span>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="radio" style="margin-left:70px">
<input name="ironing" id="radiobtn" value="Yes" type="radio">
Yes
</div>
<div class="radio">
<input name="ironing" id="radiobtn" value="No" type="radio">
No
</div>
<span class="error">* Ironing is Required</span>
<span class="help-block" style="margin-left:50px">Would Like Ironing?</span>
</div>
</div>
<input class="btn btn-info btn-lg" name="submit" value="Submit" type="submit">
</form>
</div>
</div>