<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test\</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/sweetalert2/dist/sweetalert2.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body>
<!-- เนื่องจาก Codingground ไม่สนับสนุน Plug-In ของ Bootstrap4 โปรดก็อปโค๊ดนี้ใส่ Visual Studio Code แล้วรันผ่าน Browser ของอาจารย์เถิดครับ -->
<!---- source content -->
<script src="node_modules/jquery/dist/jquery.min.js">\</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js">\</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">\</script>
<script src="node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>
<!-- navbar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-success justify-content-center">
<a class="navbar-brand text-center" href="#">
Form 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="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" 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" placeholder="Enter password" name="pswd" 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" name="remember" required> Remember me
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" 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 modal</h4>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Basic Modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<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="#myModal2">
Modal with form
</button>
<!-- 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">Member Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<a>Email</a>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-envelope"></i></span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
<a>Password</a>
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="text" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group form-check">
<label class="form-check-label mr-sm-2">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Summit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="card border-success">
<div class="card-body">
<h4 class="card-title">Inline form</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 Form</h4>
<div class="form-group">
<label for="uname">ID Card:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
</div>
<div class="form-group">
<label for="Name">Name:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
</div>
<div class="form-group">
<label for="comment">Address:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<label for="Sex" 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 class="mt-3">
<label for="pwd" class="mr-sm-2">Programing Ability:</label>
</div>
<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 class="form-group mt-3">
<label for="sel1">Saraly:</label>
<select class="form-control" id="sel1">
<option>10000-20000 Bath</option>
<option>20001-30000 Bath</option>
<option>30001-40000 Bath</option>
<option>40001-50000 Bath</option>
</select>
</div>
<input type="range" class="form-control-range mt-3">
<input type="file" class="form-control-file border mt-3">
<div class="text-right mt-3">
<button type="button" class="btn btn-success">Summit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
