آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
ساخت و طراحی فرم ورود داینامیک با استفاده از jQuery و CSS و php ، کدنویسی فرم ثبت نام و ورود کاربران به وب سایت ، فرم ثبت اطلاعات کاربر ، طراحی متریال توسط گوگل ایجاد و طراحی شده است و از آن برای ارائه انیمیشن های جالب و پاسخگویی به یک صفحه وب استفاده می شود و مانند یک الگو عمل می کند که فقط باید نام کلاس را مشخص کنید و بقیه موارد توسط متریال دیزاین JS و فایل CSS انجام می شود.
طراحی متریال شامل انیمیشن، سایه‌ها، جلوه‌های سه‌بعدی، تجسم حرکت، اجزای داخلی، واکنش‌گرا، انتقال CSS، پالت‌های رنگی و الگوهایی مانند ژست، صفحه لمسی، اثر انگشت و کشیدن انگشت برای تازه‌سازی و غیره است.
در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از طراحی متریال یک فرم ورود ساده ایجاد کنید. همچنین ممکن است فرم ورود به سیستم را با انیمیشن لرزش با استفاده از جی کوئری دوست داشته باشید.
یک فایل 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 مشاهده کنید.
یک فایل 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 است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.