By GokiSoft.com|
20:40 25/10/2023|
Học JS
[Examination] Bài Thi Thực Hành HTML/CSS/JS
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![Le Duc Viet [community,C2010L]](https://www.gravatar.com/avatar/3b533532c7ace3144eccd4cbb3436d9b.jpg?s=80&d=mm&r=g)
Le Duc Viet
2021-02-18 14:27:48
#bai1.css
body {
background-color: #FFFFCC;
}
body h3 {
color : #0000CC;
font : Arial;
}
body label {
color : #000066;
font : Arial;
font-weight: bold;
}
input {
float: right;
margin-left: 5px;
}
.photo {
}
.content {
padding-left: 5px;
display: flex;
}
.form {
display: block;
margin-top: 18px;
margin-left: 20px;
}
.form1 {
margin-top: 20px;
}
.button {
padding-left: 203px;
}
#bai1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bai1.css">
</head>
<body>
<h3>ĐĂNG NHẬP HỆ THỐNG</h3>
<div class="content">
<div class="photo">
<img src="photos/login.png" height="100px;">
</div>
<form>
<div class="form">
<div class="form1">
<label> Tài Khoản</label>
<input required="true" type="text" name="tai_khoan">
</div>
<div class="form1">
<label> Mật Khẩu</label>
<input required="true" type="password" name="mat_khau">
</div>
</div>
</div>
<div class="button">
<button type="submit">Đăng nhập</button>
<button type="reset">Nhập lại</button>
</div>
</form>
</body>
</html>
![Vũ Trung Kiên [C2009I]](https://www.gravatar.com/avatar/abf994de48c0204239812f8d9a7dcf8c.jpg?s=80&d=mm&r=g)
Vũ Trung Kiên
2021-01-07 09:41:26
#EX1.html
<!DOCTYPE html>
<html>
<head>
<title>Giải phương trình bậc 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style type="text/css">
.Box
{
margin: 0px auto;
width: 500px;
background-color: #ffec80;
padding: 15px 0 20px 20px;
}
.FlexBlock
{
display: flex;
margin-top: 20px;
}
.LockImg
{
height: 80px;
margin-right: 30px;
}
label
{
margin-right: 20px;
}
button
{
border: solid 1px;
outline: none !important;
border-radius: 5px;
}
input
{
outline: none !important;
}
</style>
</head>
<body>
<div class="container">
<div class="Box">
<b style="color: #0328fc">ĐĂNG NHẬP HỆ THỐNG</b>
<div class="FlexBlock">
<div class="LeftBox">
<img class="LockImg" src="img/login.png">
</div>
<div class="RightBox">
<form method="post" id="LoginFormId">
<label style="margin-right: 20px">Tài khoản:</label>
<input required type="text" name="Acc">
<br>
<br>
<label style="margin-right: 20px">Mật khẩu:</label>
<input required type="password" name="Password">
<br>
<br>
<button type="submit" style="margin-left: 95px" id="LoginId">Đăng nhập</button>
<button type="reset">Nhập lại</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#LoginFormId').submit(function ()
{
alert('Đăng nhập thành công')
})
</script>
</body>
</html>
#EX2.html
<!DOCTYPE html>
<html>
<head>
<title>Giải phương trình bậc 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style type="text/css">
.container
{
background-color: #ffffcc;
padding-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
input
{
outline: none;
height: 25px;
}
select
{
outline: none;
}
button
{
outline: none;
background-color: #cccccc;
}
.Top
{
display: flex;
margin-bottom: 10px;
}
.Bet
{
display: flex;
}
body
{
font-family: arial;
}
.Right b
{
color: #0000cc;
}
.LeftBox p
{
color: #000066;
}
.Left img
{
height: 80px;
}
.Right
{
padding-top: 30px;
margin-left: 20px;
}
form
{
margin-left: 20px;
line-height: 39px;
}
</style>
</head>
<body>
<div class="container">
<div class="Top">
<div class="Left">
<img src="img/regis.png">
</div>
<div class="Right">
<b>Phiếu mượn sách</b>
</div>
</div>
<div class="Bet">
<div class="LeftBox">
<p>Mã sinh viên</p>
<p>Họ và tên</p>
<p>Loại sách</p>
<p>Tên sách</p>
<p>Ngày mượn</p>
<p>Ngày trả</p>
</div>
<div class="RightBox">
<form method="post">
<input type="text" name="SVCode">
<br>
<input type="text" name="Name">
<br>
<select>
<option>-- Chọn loại sách --</option>
<option>Loại I</option>
<option>Loại II</option>
</select>
<br>
<input type="text" name="BookName">
<br>
<input type="text" name="DayOut">
<br>
<input type="text" name="DayBack">
<br>
<br>
<button>
<img src="img/log_in.png">
Đăng Ký
</button>
<button>
<img src="img/cancel.png">
Nhập lại
</button>
</form>
</div>
</div>
</div>
</body>
</html>
![Triệu Văn Lăng [T2008A]](https://www.gravatar.com/avatar/1348e3562c6492c26f796cb1f45982a1.jpg?s=80&d=mm&r=g)
Triệu Văn Lăng
2020-11-16 10:09:13
#cancel.png
https://res.cloudinary.com/wegoup/image/upload/v1605521335/bkwol11ccec8fm2n4hwh.png
#log_in.png
https://res.cloudinary.com/wegoup/image/upload/v1605521340/i9xllf4ahct4fna5wgh5.png
#login.png
https://res.cloudinary.com/wegoup/image/upload/v1605521347/u0rw15hsnfaxhjqaijiq.png
#regis.png
https://res.cloudinary.com/wegoup/image/upload/v1605521351/zqjr5qndooetnp0veao9.png
![Nguyên Phấn Đông [T2008A]](https://www.gravatar.com/avatar/c9c4f8f79ce35b9224637b6cc5fbe5c4.jpg?s=80&d=mm&r=g)
Nguyên Phấn Đông
2020-11-16 10:08:28
#exam.html
<!DOCTYPE html>
<html>
<head>
<title>Building Next Generation Websites</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325779/icon_qokvwu.png" rel="icon">
</head>
<style type="text/css">
.container{
background-color: #FFFFCC;
}
.login{
height: 300px;
width: 100%;
margin-left: 15px;
}
.tittle h2{
font-family: arial;
color: #0000CC;
}
.login_main {
display: flex;
padding: 10px;
}
.login_main label{
color: #000066;
font-size:16px;
font-family: arial;
font-weight: bold;
}
</style>
<body>
<div class="container">
<div class="login">
<div class="tittle">
<h2>Đăng nhập hệ thống</h2>
</div>
<div class="login_main" >
<img src="login.png">
<form class="form" style="margin-top: 20px;" name="contactForm" action="" onsubmit="return validateForm()" method="post">
<table>
<tr >
<td><label>Tài Khoản</label></td>
<th><input type="text" id="fname" name="name" class="form-control" value required></th>
</tr>
<tr >
<td><label style="padding-right: 50px;">Mật Khẩu</label></td>
<th><input type="password" name="password" class="form-control" style="margin-top: 20px;" id="password" required></th>
</tr>
</table>
<div style="float: right; margin-top: 20px;">
<button type="submit" style="margin-right: 5px;" onclick="dangnhap()"> Đăng nhập</button>
<button type="reset" > Nhập lại</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var fname = $('#fname').val();
var fpassword = $('#password').val();
function dangnhap(){
if ( fname == '' ) {
alert("xin nhập tài khoản");
}
else{
alert('đăng nhập thành công');
}
}
</script>
</html>
![Nguyên Phấn Đông [T2008A]](https://www.gravatar.com/avatar/c9c4f8f79ce35b9224637b6cc5fbe5c4.jpg?s=80&d=mm&r=g)
Nguyên Phấn Đông
2020-11-16 10:08:27
#exam.html
<!DOCTYPE html>
<html>
<head>
<title>Building Next Generation Websites</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325779/icon_qokvwu.png" rel="icon">
</head>
<style type="text/css">
.container{
background-color: #FFFFCC;
}
.login{
height: 300px;
width: 100%;
margin-left: 15px;
}
.tittle h2{
font-family: arial;
color: #0000CC;
}
.login_main {
display: flex;
padding: 10px;
}
.login_main label{
color: #000066;
font-size:16px;
font-family: arial;
font-weight: bold;
}
</style>
<body>
<div class="container">
<div class="login">
<div class="tittle">
<h2>Đăng nhập hệ thống</h2>
</div>
<div class="login_main" >
<img src="login.png">
<form class="form" style="margin-top: 20px;" name="contactForm" action="" onsubmit="return validateForm()" method="post">
<table>
<tr >
<td><label>Tài Khoản</label></td>
<th><input type="text" id="fname" name="name" class="form-control" value required></th>
</tr>
<tr >
<td><label style="padding-right: 50px;">Mật Khẩu</label></td>
<th><input type="password" name="password" class="form-control" style="margin-top: 20px;" id="password" required></th>
</tr>
</table>
<div style="float: right; margin-top: 20px;">
<button type="submit" style="margin-right: 5px;" onclick="dangnhap()"> Đăng nhập</button>
<button type="reset" > Nhập lại</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var fname = $('#fname').val();
var fpassword = $('#password').val();
function dangnhap(){
if ( fname == '' ) {
alert("xin nhập tài khoản");
}
else{
alert('đăng nhập thành công');
}
}
</script>
</html>
![Nguyễn Anh Vũ [T2008A]](https://www.gravatar.com/avatar/8863d24ed74b396082becbc4db8331fd.jpg?s=80&d=mm&r=g)
Nguyễn Anh Vũ
2020-11-16 10:07:55
#baithi2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style type="text/css">
body {
background-color: rgb(255,255,240);
}
textarea {
scrollbar-3dlight-color: #C0C0C0;
scrollbar-shadow-color: silver;
scrollbar-arrow-color: black;
scrollbar-face-color: gray;
width: 90%;
}
.imgHelp {
cursor: pointer;
color: blue;
background-color: #DDFFEE;
right: 25%;
position: absolute;
}
.EmailEditor {
background-color: #FFFFDD;
border: solid grey 1px;
}
#main {
width: 400px;
background-color: #DDFFEE;
padding-left: 10px;
padding-right: 10px;
margin: 0px auto;
}
#help {
/*position: absolute;*/
width: 500px;
height: 420px;
top: 10px;
background-color: #cfc;
padding-left: 10px;
padding-right: 10px;
display: none;
border: solid #E4E7E7 2px;
color: #303030;
margin: 0px auto;
}
.Close {
text-align: right;
color: blue;
cursor: pointer;
}
ul {
list-style-image: url('photos/bullet.jpg');
list-style-type: square;
list-style-position: inside;
}
.row {
width: 100%;
display: flex;
margin-bottom: 15px;
}
input {
width: 90%;
}
.col-md-4 {
width: 33.33%;
float: left;
text-align: right;
padding-right: 10px;
}
.col-md-8 {
width: 66.67%;
float: left;
padding-right: 10px;
}
button {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS Tutorial</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<form action="status.html" method="post">
<h2>Phiếu mượn sách</h2>
<div class="row">
<div class="col-md-4">Mã Sinh Viên:</div>
<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
</div>
<div class="row">
<div class="col-md-4">Họ và tên:</div>
<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
</div>
<div class="row">
<div class="col-md-4">Loại sách:</div>
<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
</div>
<div class="row">
<div class="col-md-4">Tên sách:</div>
<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
</div>
<div class="row">
<div class="col-md-4">Ngày mượn:</div>
<div class="col-md-8">
<textarea rows="5" class="EmailEditor"></textarea>
</div>
<div class="row">
<div class="col-md-4">Ngày trả:</div>
<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<button>Đăng kí</button>
<button>Nhập lại</button>
</div>
</div>
</form>
</div>
</script>
</body>
</html>
</body>
</html>
![hainguyen [T2008A]](https://www.gravatar.com/avatar/32855ce6db55d60134d830aee06b41e5.jpg?s=80&d=mm&r=g)
hainguyen
2020-11-16 10:07:26
#home.html
<!DOCTYPE html>
<html>
<head>
<title>Bai Thi Thuc Hanh</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<style type="text/css">
.form{
margin-left: 150px;
}
.form-tk{
margin-top: -100px;
}
.form-mk{
margin-top: 20px;
}
.button{
margin-top: 10px;
}
label{
color: #000066;
}
</style>
</head>
<body style="background: #FFFFCC;">
<div>
<h1 style="color: #0000CC; text-transform: uppercase; font-size: 20px;">Đăng Nhập hệ Thống</h1>
<div>
<img src="login.png">
<form method="post" class="form">
<div class="form-tk">
<label>Tài Khoản :</label>
<input type="text" name="s" required id="taikhoan">
</div>
<div class="form-mk">
<label>Mật Khẩu :</label>
<input type="password" name="s" required id="matkhau" style="margin-left: 3px;">
</div>
<button class="button" onclick="User()">Đăng Nhập</button>
<button class="button" onclick="Resert()">Nhập Lại</button>
</form>
</div>
</div>
<script type="text/javascript">
function User() {
alert('Dang nhap thanh cong')
}
</script>
</body>
</html>
#home2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<style type="text/css">
h1{
color: #0000CC;
text-transform: uppercase;
font-size: 20px;
margin-left: 150px;
margin-top: -80px;
}
.form-control{
width: 50%;
display: inline-block;
margin-left: 20px;
}
</style>
</head>
<body style="background: #FFFFCC;" >
<div>
<img src="regis.png">
<h1>Phiếu Mượn Sách</h1>
</div>
<form method="post" style="margin-top: 50px;">
<div class="form-group">
<label>Mã sinh viên </label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Họ và tên </label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Loại sách </label>
<select style="margin-left: 35px;">
<option>--Chọn loại sách--</option>
</select>
</div>
<div class="form-group">
<label>Tên sách </label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Ngày mượn </label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Ngày trả </label>
<input type="text" class="form-control" required>
</div>
<button style="margin-left: 100px;">
<img src="log.png">
Đăng ký
</button>
<button>
<img src="cancel.png">
Nhập lại
</button>
</form>
</body>
</html>
![Đỗ Minh Quân [T2008A]](https://www.gravatar.com/avatar/fa40264d7c4b4209c87a9e9451d2b9f0.jpg?s=80&d=mm&r=g)
Đỗ Minh Quân
2020-11-16 10:06:51
<!DOCTYPE html>
<html>
<head>
<title>phieumuonsach</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #FFFFCC;
}
h2{
color: #0000CC;
font: arial;
padding-left: 100px
}
</style>
</head>
<body>
<h2>Phiếu mượn sách</h2>
<form class="form-inline">
<label>Mã sinh viên </label>
<input style="margin-left: 49px" type="text" class="form-control">
<br><br>
<label>Họ và tên </label>
<input style="margin-left: 67px" type="text" class="form-control"><br><br>
<label>Loại sách </label>
<input style="margin-left:67px" type="text" class="form-control"><br><br>
<label>Tên sách </label>
<input style="margin-left: 69px" type="text" class="form-control"><br><br>
<label>Ngày mươn </label>
<input style="margin-left: 51px" type="text" class="form-control"><br><br>
<label >Ngày Trả </label>
<input style="margin-left: 67px" type="text" class="form-control"><br><br>
<button style="margin-left: 150px" type="submit">Đăng kí </button>
<button type="submit">Nhập lại</button>
</body>
</html>
![Trần Văn Lâm [T2008A]](https://www.gravatar.com/avatar/cfc15c8cb7781ad669b013e01f9f1a6b.jpg?s=80&d=mm&r=g)
Trần Văn Lâm
2020-11-16 10:06:27
#baithi2.html
<!DOCTYPE html>
<html>
<head>
<title>Exercise 2</title>
<meta charset="utf-8">
<style type="text/css">
form {
background-color: #FFFFCC;
}
h4 {
color: #0000CC;
}
</style>
</head>
<body>
<div class="main">
<form method="post">
<div>
<img src="https://img.lovepik.com/photo/50035/4817.jpg_wh860.jpg" style="width: 200px;"><h4>PHIẾU MƯỢN SÁCH</h4>
</div>
<div>
<div>
<label>Mã Sinh Viên</label>
<input type="text" name="">
</div>
<div>
<label>Họ Và Tên</label>
<input type="text" name="">
</div>
<div>
<label>Loại Sách</label>
<input type="text" name="">
</div>
<div>
<label>Tên Sách</label>
<input type="text" name="">
</div>
<div>
<label>Ngày Mượn</label>
<input type="text" name="">
</div>
<div>
<label>Ngày Trả</label>
<input type="text" name="">
</div>
</div>
</form>
</div>
</body>
</html>
![Đặng Trần Nhật Minh [T2008A]](https://www.gravatar.com/avatar/ee8dc5a777ad26f3a962e86c233437cf.jpg?s=80&d=mm&r=g)
Đặng Trần Nhật Minh
2020-11-16 10:06:16
#TEST_01_Nhat_Minh.html
<!DOCTYPE html>
<html>
<head>
<title>Dang Nhap He Thong</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/18bc5ffef0.js" crossorigin="anonymous"></script>
<style type="text/css">
.bgcolor {
background-color: #FFFFCC;
}
.fontfam {
font-family: arial;
font-weight: bold;
}
h3 {
color: #0000CC;
font-weight: bold;
}
ul {
list-style-type: none;
margin-top: 5px;
}
input {
size: 100%
}
p {
margin-top: 10px;
color: #000066
}
button {
background-color: #CCCCCC
}
</style>
</head>
<body>
<div class="container bgcolor fontfam p-2" style="width: 50%">
<h3>Đăng Nhập Hệ Thống</h3>
<div class="row">
<div class="col-md-4">
<img src="login.png">
</div>
<div class="col-md-3">
<p>Tài Khoản</p>
<p>Mật Khẩu</p>
</div>
<div class="col-md-5">
<p><input type="text" value="" name=""></p>
<p><input type="text" value="" name=""></p>
<button type="button" class="btn btn-light" id="namee" onclick="check_suc()">Đăng Nhập</button>
<button type="button" class="btn btn-light" id="passs" onclick="del()">Nhập Lại</button>
</div>
</div>
</div>
<script type="text/javascript">
function check_suc() {
var name = document.getElementById('namee').value;
var pass = document.getElementById('passs').value;
if ((name == '') || (pass == '') {alert('Login Failed!')}
else {alert('Login Success!')}
}
function del () {
location.reload();
}
</script>
</body>
</html>
#TEST_02_Nhat_Minh.html
<!DOCTYPE html>
<html>
<head>
<title>Phieu Muon Sach</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/18bc5ffef0.js" crossorigin="anonymous"></script>
<style type="text/css">
.bgcolor {
background-color: #FFFFCC;
}
.fontfam {
font-family: arial;
font-weight: bold;
}
h3 {
color: #0000CC;
font-weight: bold;
}
ul {
list-style-type: none;
margin-top: 5px;
}
input, select {
size: 100%;
margin-top: 10px;
}
p {
margin-top: 10px;
color: #000066
}
</style>
</head>
<body>
<div class="container bgcolor fontfam p-5" style="width: 50%">
<div class="row">
<div class="col-md-4">
<img src="regis.png" style="max-width: 100px; max-height: 100px;">
</div>
<div class="col-md-8 mt-4">
<h3>Phieu Muon Sach</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Ma Sinh Vien</p>
<p>Ho Va Ten</p>
<p>Loai Sach</p>
<p>Ten Sach</p>
<p>Ngay Muon</p>
<p>Ngay Tra</p>
</div>
<div class="col-md-8">
<input type="text" name=""><br>
<input type="text" name=""><br>
<select><option>---Chon loai sach---</option></select><br>
<input type="text" name=""><br>
<input type="text" name=""><br>
<input type="text" name=""><br>
<br><br>
<button style=""><img src="log_in.png" style="size: small">Dang ky</button>
<button style=""><img src="cancel.png" style="size: small">Nhap Lai</button>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
#cancel.png
https://res.cloudinary.com/wegoup/image/upload/v1605521167/qxvihdy4tp99mrzudknb.png
#log_in.png
https://res.cloudinary.com/wegoup/image/upload/v1605521167/eud4wiin1yxv6rudyxwo.png
#login.png
https://res.cloudinary.com/wegoup/image/upload/v1605521168/mhcmv5i1doobcobtvagg.png
#regis.png
https://res.cloudinary.com/wegoup/image/upload/v1605521169/vzbv3y8obeb3lpuem7oh.png