<!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>Sirichanya Prakotasung</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">Stacked (full-width) form</h4> <form action="#" class="was-validated"> <div class="form-group"> <label for="email">Username:</label> <input type="email" class="form-control" id="Username" placeholder="username" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">กรุณากรอก Username.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="password" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">กรุณากรอก Password.</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-success">Login</button> </form> </div> </div> <br> <div class="card border-success"> <div class="card-body"> <h4 class="card-title">Example of model</h4> <div class="form"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mo1"> Open modal </button> <!-- The Modal --> <div class="modal" id="mo1"> <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> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mo2"> Model with Form </button> <!-- The Modal --> <div class="modal" id="mo2"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Member Login</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <label for="name">Email address:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-envelope"></i></span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <label for="name">Email address:</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-key"></i></span> </div> <input type="text" class="form-control" placeholder="Username"> </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="button" class="btn btn-primary" data-dismiss="modal">Submit</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-8"> <div class="card border-success"> <div class="card-body"> <h4 class="card-title">Inline form</h4> <!-- ต่อเป็นแถวยาว --> <form class="form-inline" action="#"> <label for="email" class="mr-sm-2">Firstname:</label> <input type="email" class="form-control mb-2 mr-sm-2" id="Firstname"> <label for="pwd" class="mr-sm-2">Lastname:</label> <input type="password" class="form-control mb-2 mr-sm-2" id="Lastname"> <div class="form-check mb-2 mr-sm-2"> </div> <button type="submit" class="btn btn-success mb-2">Submit</button> </form> </div> </div> <br> <div class="card border-success"> <div class="card-body"> <h4 class="card-title">Bootstrap Inline form</h4> <form action="#"> <div class="form-group"> <label for="id">ID Card:</label> <input type="text" class="form-control" id="id"> </div> <div class="form-group"> <label for="name">Name:</label> <input type="password" class="form-control" id="name"> </div> <div class="form-group"> <label for="comment">Address:</label> <textarea class="form-control" rows="5" id="Address"></textarea> </div> <div class="form-group"> <label class="mr-sm-2">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 class="mr-sm-2">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="">ASP.net </label> </div> </div> <div class="form-group"> <label for="sel1">Salary:</label> <select class="form-control" id="sel1" name="sellist1"> <option>10,000-20,000 Baht</option> <option>20,000-30,000 Baht</option> <option>30,000-40,000 Baht</option> <option>40,000-50,000 Baht</option> </select> </div> <div class="form-group"> <label for="sel1">Programming skill:</label> <input type="range" class="form-control-range" name="range"> </div> <div class="form-group"> <input type="file" class="form-control-file border" name="file"> </div> <div class="form-group text-right"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> <br> </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