<!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
