ساخت قالب صفحه ورود در html

ساخت قالب صفحه ورود

بعد از مدتی وقفه در کنار شما هستیم تا با آموزش طراحی و اجرای یک قالب ساده برای صفحه‌ی ورود به سایت در کنار شما هستیم. این قالب به صورت شخصی تنها برای اشتراک برای شما طراحی شده و در چند رنگ مختلف آماد‌ه‌ی استفاده‌ی شما است.

قبل از ارائه‌ی کدها می‌توانید دموی این قالب را ببنید:

دموی قالب ورود به سایت

برای استفاده از این قالب‌ها تنها کد مورد نظر خود را دریافت کرده و در فایلی با پسوند .html قرار دهید و آن را استفاده کنید.

قالب صفحه ورود به سایت (آبی: #۳۳۵a9a)

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#335a9a;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

قالب صفحه ورود به سایت (قرمز: #۳۳۵a9a)

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#cf000f;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

قالب صفحه ورود به سایت (سبز: #۲۶a65b)

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#26a65b;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

قالب صفحه ورود به سایت (زرد: #f9bf3b)

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#f9bf3b;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

اما شاید بگید من رنگ خاصی را مد نظر دارم، حالا چیکار کنم؟!

راه حل: خب در ششم کدهای بالا بخش خاصیت‌های تگ body را مشاهده کنید؛ سپس خاصیت background را با رنگ دلخواه خود البته به صورت هگزا دسیمال پر کنید.

کد مورد نظر:

body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:/*Your Color Hex Code*/;}

برای بدست آوردن رنگ‌های خاص و کد رنگ آن‌ها می‌توانید از این سایت هم استفاده کنید.

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

حجازی گفت:

در

با سلام، اگر بخوایم یک رمز و یا یوزر خاصی رو بزاریم باید با کدام قسمت انجام بدیم؟

پاسخ
- امیر گفت:
  
  در
  
  برای اون کار نیاز به برنامه نویسی وب دارید و این آموزش صرفا ساخت قالب صفحه ای هست که کاربر توی اون میتونه اطلاعاتش رو وارد کنه و اصطلاحا front end هست.
  
  پاسخ