هلدینگ وهام



فرم ورود با طراحی متریال با استفاده از jQuery و CSS


Rate this sourcecode

ساخت و طراحی فرم ورود داینامیک با استفاده از jQuery و CSS و php ، کدنویسی فرم ثبت نام و ورود کاربران به وب سایت ، فرم ثبت اطلاعات کاربر ، طراحی متریال توسط گوگل ایجاد و طراحی شده است و از آن برای ارائه انیمیشن های جالب و پاسخگویی به یک صفحه وب استفاده می شود و مانند یک الگو عمل می کند که فقط باید نام کلاس را مشخص کنید و بقیه موارد توسط متریال دیزاین JS و فایل CSS انجام می شود.

طراحی متریال شامل انیمیشن، سایه‌ها، جلوه‌های سه‌بعدی، تجسم حرکت، اجزای داخلی، واکنش‌گرا، انتقال CSS، پالت‌های رنگی و الگوهایی مانند ژست، صفحه لمسی، اثر انگشت و کشیدن انگشت برای تازه‌سازی و غیره است.

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

برای فرم ورود به طراحی متریال فقط دو مرحله طول می کشد:

  1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید.
  2. یک فایل CSS بسازید و یک استایل تعریف کنید.

مرحله 1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید

یک فایل HTML می سازیم و با نام login.html ذخیره می کنیم.

				
					<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<link href="login_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</head>
<body>
<div id="wrapper">

<div id="login_div">
<form method="post">

<div class="input-field">
<i class="mdi-social-person-outline prefix"></i>
<input class="validate" id="email" type="email">
<label for="email" data-error="wrong" data-success="right" class="center-align">Enter Your Email</label>
</div>

<div class="input-field">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password">
<label for="password">Password</label>
</div>
        
<div class="input-field">
<input type="checkbox" id="remember-me"/>
<label for="remember-me">Remember me</label>
</div>

<div class="input-field">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</div>

<p>
<a href="#" id="register">Register Now!</a>
<a href="#" id="forgot">Forgot password?</a>
</p>

<br>
<br>
</form>
</div>

</div>
</body>
</html>
				
			

در این مرحله ما یک نشانه گذاری ساده برای ایجاد یک فرم ورود ایجاد می کنیم و برای افزودن انیمیشن ها و افکت ها طبق طراحی متریال به نشانه گذاری های خود کلاس اضافه می کنیم.

برای نمایش انیمیشن در ورودی باید از .input-field div استفاده کنید که ورودی و برچسب خود را بسته بندی می کند.

شما می توانید تمام انیمیشن ها و سایر اجزای طراحی متریال را در materializecss.com مشاهده کنید.

مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید

یک فایل CSS می سازیم و با نام login_style.css ذخیره می کنیم.

				
					body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 background-color:#21610B;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#login_div
{
 background-color:white;
 padding:20px;
 max-width:300px;
 margin-left:345px;
}
#login_div button
{
 margin-top:20px;
 height:40px;
 width:100%;
}
#login_div #register
{
 margin-top:20px;
 float:left;
}
#login_div #forgot
{
 margin-top:20px;
 float:right;
}
				
			

این همه چیز است، این نحوه ایجاد فرم لاگین طراحی متریال با استفاده از jQuery و CSS است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.

دسته بندی پروژه :



دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *