<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>นส.นิตยา ทาชาติ</title> <!-- Bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center " > <a class="navbar-brand" href="#">FROM AND MODEL</a> </nav> <div class="container mt-3"> <div class="row"> <div class="col-lg-4"> <div class="card border-success"> <div class="card-body"> <h4 class="card-title">Sracked (full-width)from</h4> <form action="/action_page.php" class="was-validated"> <div class="form-group"> <label for="email ">Username</label> <input type="email" class="form-control" id="email" required > <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" required > <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="login" class="btn btn-success">login</button> </form> </div> </div> <div class="card border-success mt-3"> <div class="card-body"> <h4 class="card-title">Example of model</h4> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"> Member Login </button> </div> </div> </div> <div class="col-lg-8"> <div class="card border-success"> <div class="card-body "> <h4 class="card-title">Inline from</h4> <form class="form-inline" action="/action_page.php"> <label for="email" class="mr-sm-2">Firstname:</label> <input type="email" class="form-control mb-2 mr-sm-2" id="email"> <label for="pwd" class="mr-sm-2">Lastname:</label> <input type="password" class="form-control mb-2 mr-sm-2" id="pwd"> <button type="submit" class="btn btn-success mb-2">Submit</button> </form> </div> </div> <div class="card border-success mt-3"> <div class="card-body "> <h4 class="card-title">Bootstrap Input from</h4> <form action="/action_page.php"> <div class="form-group"> <label for="email">ID Card:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Name:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="form-group"> <label for="comment">Address:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> <div class="form-group"> <label for="comment">Sex:</label> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Male </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Female </label> </div> </div> <div class="form-group"> <label for="comment">Programming ability:</label> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Bootstrap </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">PHP </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>ASP.net </label> </div> </div> <div class="form group"> <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>10,000-20,000 Bath</option> <option>20,000-30,000 Bath</option> <option>30,000-40,000 Bath</option> <option>40,000-50,000 Bath</option> </select> </div> </div> <div class="form group"> <label for="sel1">Programming Skill:</label> <input type="range" class="form-control-range"> </div> <div class="form group"> <input type="file" class="form-control-file border"> </div> <div class="form group mt-3 text-right"> <button type="submit" class="btn btn-success ">Submit</button> </div> </form> </div> </div> </div> </div> </div> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- The Modal --> <div class="modal" id="myModal2"> <div class="modal-dialog "> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Email address</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <form action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </div> <div class="form-group"> <label for="pwd">Password:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-key" aria-hidden="true"></i></span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more