Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> <title>Bootstrap Form - Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/0frameworks/css_frameworks/bootstrap-3.1.1/dist/css/bootstrap.min.css"> </head> <body style="padding-top:25px"> <div class="container"> <form action="#" method="POST" enctype="application/x-www-form-urlencoded" class="form-horizontal"> <div class="form-group"> <label for="t" class="col-sm-2 control-label">Normal:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="help-block">Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-success"> <label for="t" class="col-sm-2 control-label">Success:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="help-block">Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-warning"> <label for="t" class="col-sm-2 control-label">Warning:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="help-block">WARNING: Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-error"> <label for="t" class="col-sm-2 control-label">Error:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="help-block">ERROR: Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-error"> <label for="sel" class="col-sm-2 control-label">Select sa has-warning:</label> <div class="col-sm-2"> <select name="sel" id="sel" class="form-control"> <option value="1">jedan</option> <option value="2" selected>dva</option> <option value="3">trica</option> <option value="4">četiri</option> <option value="5">petak</option> </select> <span class="help-block">Ovo je nekakav help blok ispod select polja!</span> </div> </div> <!-- has-feedback --> <div class="form-group has-feedback"> <label for="t" class="col-sm-2 control-label">Normal:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Pretraži ..." class="form-control"> <button type="submit" class="glyphicon glyphicon-search form-control-feedback"></button type="submit"> <span class="help-block">Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-success has-feedback"> <label for="t" class="col-sm-2 control-label">Success:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="help-block">Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-warning has-feedback"> <label for="t" class="col-sm-2 control-label">Warning:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="help-block">WARNING: Ovo je nekakav help blok ispod input polja!</span> </div> </div> <div class="form-group has-error has-feedback"> <label for="t" class="col-sm-2 control-label">Error:</label> <div class="col-sm-5"> <input type="text" name="t" id="t" placeholder="Unesi text" class="form-control"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> <span class="help-block">ERROR: Ovo je nekakav help blok ispod input polja!</span> </div> </div> </form> </div> </body> </html>
Pregled stranice:
Pogledaj stranicu
../css/bootstrap/primjeri/170form_validation.html
.