Run
<!doctype html> <html lang="en"> <head> <title>Bootstrap Form Add Feedback Icons to Form input</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Bootstrap Form Add Feedback Icons to Form input</h2> <form> <div class="form-group has-success has-feedback"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" name="name" id="name" placeholder="Name"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="help-block">Enter text only</span> </div> <div class="form-group has-warning has-feedback"> <label for="Username" class="control-label">Username</label> <input type="email" class="form-control" name="username" id="email" placeholder="Email"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="help-block">Enter a valid email id</span> </div> <div class="form-group has-error has-feedback"> <label for="Password" class="control-label">Password</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> <span class="help-block">Enter numbers and text only</span> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </body> </html>
Go to
Tutorialdeep Homepage