آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
برنامه نویسی وکدنویسی طراحی فرم ثبت نام و ورود با استفاده از زبان های برنامه نویسی HTML5 و انیمیشن jQuery برای صفحه وب سایت قالب اختصاصی … HTML5 آخرین نسخه زبان نشانه گذاری وب HTML است که ویژگی های زیادی را معرفی کرده است که به ایجاد یک برنامه وب بهتر و ایجاد تعاملی تر و ایمن تر کردن نشانه گذاری ما کمک می کند و همچنین استفاده از کتابخانه های خارجی را به دلیل نشانه گذاری های از پیش تعریف شده آن که وجود نداشت، به حداقل می رساند.
در این آموزش به شما نشان می دهد که چگونه با استفاده از jQuery فرم ورود و ثبت نام HTML5 را با ایجاد انیمیشن کنید. همچنین ممکن است فرم لاگین با افکت لرزش انیمیشن را دوست داشته باشید.
برای ایجاد فرم ورود و ثبت نام HTML5 با انیمیشن فقط دو مرحله طول می کشد:
مرحله 1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید
یک فایل HTML می سازیم و با نام form.html ذخیره می کنیم.
<html>
<head>
<link href="form_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function show_signup()
{
$("#login_div").fadeOut('fast', function() {
$("#register_div").fadeIn();
});
}
function show_login()
{
$("#register_div").fadeOut('fast', function() {
$("#login_div").fadeIn();
});
}
</script>
</head>
<body>
<div id="wrapper">
<section id="login_div">
<form action="" autocomplete="on">
<h1>LOG IN</h1>
<p><input name="username" required="required" type="email" placeholder="Enter Your Email"/></p>
<p><input name="password" required="required" type="password" placeholder="************" /></p>
<p><input type="submit" value="DO LOGIN"/></p>
<p class="change_link">Not a member yet ?<input type="button" onclick="show_signup();" value="Join us"></p>
</form>
</section>
<section id="register_div">
<form action="" autocomplete="on">
<h1>SIGN UP</h1>
<p><input name="username" required="required" type="text" placeholder="Enter Your Name"/></p>
<p><input name="email" required="required" type="email" placeholder="Enter Your Email"/></p>
<p><input name="password" required="required" type="password" placeholder="*********"/></p>
<p><input name="password_confirm" required="required" type="password" placeholder="*********"/></p>
<p><input type="submit" value="DO SIGN UP"/></p>
<p class="change_link">Already a member ?<input type="button" onclick="show_login();" value="Log in"></p>
</form>
</section>
</div>
</body>
</html>
در این مرحله از تگ “section” HTML5 استفاده می کنیم، این تگ مانند “div” عمل می کند، همچنین می توانید از “div” به جای “section” استفاده کنید.
ما تگ دو بخش برای ورود و فرم ثبت نام ایجاد می کنیم.
ما از برخی از تگ‌های HTML5 استفاده می‌کنیم که در فرم‌هایی مانند autocomplete=”on”، “input type=”email” و require=”required” استفاده می‌شوند که به تازگی در HTML5 معرفی شده‌اند.
همچنین ممکن است دوست داشته باشید فرم ورود و ثبت نام پاسخگو ایجاد کنید.
مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید.
یک فایل CSS می سازیم و با نام form_style.css ذخیره می کنیم
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#21610B;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#register_div
{
display:none;
}
section
{
background-color:white;
width:300px;
box-sizing:border-box;
margin:10px;
margin-left:347px;
padding-bottom:10px;
box-shadow:0px 0px 10px 0px #122A0A;
}
#wrapper section h1
{
color:#21610B;
font-size:30px;
margin:0px;
background-color:#CEF6CE;
height:60px;
line-height:65px;
}
section input[type="text"]
{
width:220px;
height:40px;
padding-left:5px;
font-size:15px;
}
section input[type="email"]
{
width:220px;
height:40px;
padding-left:5px;
font-size:15px;
}
section input[type="password"]
{
width:220px;
height:40px;
padding-left:5px;
font-size:15px;
}
section input[type="submit"]
{
width:220px;
height:40px;
background-color:#088A08;
border:none;
color:white;
font-weight:bold;
}
section .change_link
{
color:#21610B;
}
section .change_link input[type="button"]
{
background:none;
border:none;
text-decoration:underline;
color:#2E64FE;
font-size:15px;
cursor:pointer;
}
همیشه قبل از ارسال به پایگاه داده، داده های خود را اعتبارسنجی کنید، می توانید فرم اعتبارسنجی ما را با استفاده از آموزش jQuery برای جلوگیری از تزریق sql مشاهده کنید.
این همه چیز است، این نحوه ایجاد فرم ورود و ثبت نام HTML5 با انیمیشن با استفاده از jQuery است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.