จำนวนคนเข้าดู: 4,404

FreeTemplate.10 Form Login bootstrap 4 + CSS + HTML

ฟอร์ม จะ save เป็น html หรือ php ก็ได้นะครับ
จะใช้เป็น bootstrap 4
ที่มา: bootsnipp.com

Code

<?php session_start();?>
<!DOCTYPE html>
<html>
	<head>
		<title>Login Page</title>
		<!--Made with love by Mutiullah Samim -->
		<!--Bootsrap 4 CDN-->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<!--Fontawesome CDN-->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
		<!--Custom styles-->
		<link rel="stylesheet" type="text/css" href="styles.css">
		<style type="text/css">
			/* Made with love by Mutiullah Samim*/
		@import url('https://fonts.googleapis.com/css?family=Numans');
		html,body{
		background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
		font-family: 'Numans', sans-serif;
		}
		.container{
		height: 100%;
		align-content: center;
		}
		.card{
		height: 300px;
		margin-top: 100px;
		margin-bottom: auto;
		width: 400px;
		background-color: rgba(0,0,0,0.5) !important;
		}
		.social_icon span{
		font-size: 60px;
		margin-left: 10px;
		color: #FFC312;
		}
		.social_icon span:hover{
		color: white;
		cursor: pointer;
		}
		.card-header h3{
		color: white;
		}
		.social_icon{
		position: absolute;
		right: 20px;
		top: -45px;
		}
		.input-group-prepend span{
		width: 50px;
		background-color: #FFC312;
		color: black;
		border:0 !important;
		}
		input:focus{
		outline: 0 0 0 0  !important;
		box-shadow: 0 0 0 0 !important;
		}
		.remember{
		color: white;
		}
		.remember input
		{
		width: 20px;
		height: 20px;
		margin-left: 15px;
		margin-right: 5px;
		}
		.login_btn{
		color: black;
		background-color: #CACFD2;
		width: 170px;
		}
		.login_btn2{
		color: black;
		background-color: #CACFD2;
		width: 170px;
		}
		.login_btn:hover{
		color: black;
		background-color: white;
		}
		.links{
		color: white;
		}
		.links a{
		margin-left: 4px;
		}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="d-flex justify-content-center h-100">
				<div class="card">
					<div class="card-header">
						<span class="glyphicon glyphicon-lock"> </span>
						<h3>Form Login</h3>
						<div class="d-flex justify-content-end social_icon">
							<a href="https://www.facebook.com/devtai.com2019/?" target="_blank"><span><i class="fab fa-facebook-square"></i></span></a>
							<a href="https://devtai.com/" target="_blank"><span><i class="fab fa-google-plus-square"></i></span></a>
							<a href="https://www.youtube.com/channel/UCeJ1ZmVB969fLWqqbwRZ89Q?" target="_blank"><span><i class="fab fa-twitter-square"></i></span></a>
						</div>
					</div>
					<div class="card-body">
						<form ame="formlogin" action="chklogin.php" method="POST" id="login" class="form-horizontal">
							<div class="input-group form-group">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="fas fa-user"></i></span>
								</div>
								<input type="text" name="username" class="form-control" placeholder="username">
								
							</div>
							<div class="input-group form-group">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="fas fa-key"></i></span>
								</div>
								<input type="password" name="password" class="form-control" placeholder="password">
							</div>
							<div class="row align-items-center remember">
								<input type="checkbox">Remember Me
							</div>
							<div class="form-group">
								
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="rrrrr.php"><input type="button" value="สมัครสมาชิก" class="btn float-left login_btn2"></a>
								<input type="submit" value="เข้าสู่ระบบ" class="btn float-Right login_btn">
							</div>
							
						</form>
					</div>
					
				</div>
			</div>
		</div>
	</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<?php session_start();?>

<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

/* Made with love by Mutiullah Samim*/

@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{

background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');

background-size: cover;

background-repeat: no-repeat;

height: 100%;

font-family: 'Numans', sans-serif;

}

.container{

height: 100%;

align-content: center;

}

.card{

height: 300px;

margin-top: 100px;

margin-bottom: auto;

width: 400px;

background-color: rgba(0,0,0,0.5) !important;

}

.social_icon span{

font-size: 60px;

margin-left: 10px;

color: #FFC312;

}

.social_icon span:hover{

color: white;

cursor: pointer;

}

.card-header h3{

color: white;

}

.social_icon{

position: absolute;

right: 20px;

top: -45px;

}

.input-group-prepend span{

width: 50px;

background-color: #FFC312;

color: black;

border:0 !important;

}

input:focus{

outline: 0 0 0 0 !important;

box-shadow: 0 0 0 0 !important;

}

.remember{

color: white;

}

.remember input

{

width: 20px;

height: 20px;

margin-left: 15px;

margin-right: 5px;

}

.login_btn{

color: black;

background-color: #CACFD2;

width: 170px;

}

.login_btn2{

color: black;

background-color: #CACFD2;

width: 170px;

}

.login_btn:hover{

color: black;

background-color: white;

}

.links{

color: white;

}

.links a{

margin-left: 4px;

}

</style>

</head>

<body>

<h3>Form Login</h3>

</div>

</div>

</div>

</div>

</div>

<input type="checkbox">Remember Me

</div>

</div>

</form>

</div>

</body>

</html>

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

bootstrap4 css Form Login FREETEMPLATE HTML

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

FreeTemplate.10 Form Login bootstrap 4 + CSS + HTML

Share this:

Related

วัยวุฒิ ชุมเมืองปัก