<!DOCTYPE html> <html> <head> <title>Bootstrap Forms</title> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form action="" method="post"> <div class="cotainer-fluid"> <div class="col-sm-6"> <h4>Input Forms</h4> <input type="text" class="form-control input-lg" placeholder="Large input"><br> <input type="text" class="form-control" placeholder="Default input"><br> <input type="text" class="form-control input-sm" placeholder="small input"><br> <div class="clearfix"></div> <h4>Disabled Form</h4> <input type="text" class="form-control" placeholder="Disabled input" disabled><br> <div class="clearfix"></div> <h4>Readonly Form</h4> <input type="text" class="form-control" placeholder="Readonly Form" readonly="readonly"><br> <div class="clearfix"></div> <h4>Textarea</h4> <textarea class="form-control" cols="" rows="4" placeholder="Sample Message"></textarea> </div> <div class="col-sm-6"> <h4>Select Boxes</h4> <select class="form-control input-lg"> <option value="">Please Select One</option> <option value="Sample-1">Sample-1</option> <option value="Sample-2">Sample-2</option> <option value="Sample-3">Sample-3</option> </select><br> <select class="form-control"> <option value="">Default select</option> <option value="">Please Select One</option> <option value="Sample-1">Sample-1</option> <option value="Sample-2">Sample-2</option> <option value="Sample-3">Sample-3</option> </select><br> <select class="form-control input-sm"> <option value="">Please Select One</option> <option value="Sample-1">Sample-1</option> <option value="Sample-2">Sample-2</option> <option value="Sample-3">Sample-3</option> </select><br> <div class="clearfix"></div> <h4>Disabled Select Box</h4> <select class="form-control" disabled> <option value="">Default select</option> <option value="">Please Select One</option> <option value="Sample-1">Sample-1</option> <option value="Sample-2">Sample-2</option> <option value="Sample-3">Sample-3</option> </select><br> <div class="clearfix"></div> <h4>Mutiple Select list</h4> <select multiple class = "form-control"> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> <option>Bootstrap</option> <option>PHP</option> </select><br> <div class="clearfix"></div> <h4>Input with help text</h4> <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> <span id="helpBlock" class="help-block">This is a sample helping text paragraph.</span> </div> </div> <hr /> <div class="col-md-12"> <label class="checkbox-inline"> <input type="checkbox" name="one" value="One"> One </label> <label class="checkbox-inline"> <input type="checkbox" name="two" value="Two"> Two </label> <label class="checkbox-inline"> <input type="checkbox" name="three" value="Three"> Three </label> <br /><br /> <label class="radio-inline"> <input type="radio" name="radio" value="One"> One </label> <label class="radio-inline"> <input type="radio" name="radio" value="Two"> Two </label> <label class="radio-inline"> <input type="radio" name="radio" value="Three"> Three </label> </div> </form> </body> </html>
Output :
Topic :
Bootstrap Forms
