ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

آموزش طراحی فرم ورود به سایت با Html و Css مطلب ویژه

توسط 16 مهر, 1393 7664 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

فرم ورود به بخش آموزش

طراحی فرم برای هر وب سایتی جزو اصلی ترین بخش ها می باشد که بدلیل همه گیر شدن سیستم های مدیریت محتوا کاربران نیازی به کد نویسی و طراحی این صفحات ندارند . معمولا با نصب یک ماژول این کدها در جای مشخص شده نمایش داده می شوند. ولی اگر بخواهید قالب را خودتان طراحی کنید یا شکل شاهری کد را تغییر بدهید باید با تگهای تشکلی دهنده فرم آشنایی داشته باشید .
در ادامه من یک فرم ساده برای ورود را با Html و Css طراحی میکنم . سطح این آموزش مقدماتی و متوسط می باشد .  فرم ورود ما دارای یک باکس ایمیل و یک باکس برای وارد کردن رمز عبور می باشد . در ادامه هم یک کلید برای ارسال یا همان ورود و تائید اطلاعات قرار میدهم .  قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم. فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

تگ input در form

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

 

<input type='button' />
<input type='checkbox' />
<input type='hidden' />
<input type='password' />
<input type='submit' />
<input type='text' />

 1. ابتدا نرم افزار دریم ویور را باز کنید شما می توانید از نوت پد خود ویندوز هم استفاده کنید .  من از نرم افزار Note ++ استفاده میکنم .

1.1. کدهای ابتدایی و تشکیل دهنده یک صفحه Html  را ابتدا تایپ کرده و فایل را با نام Index.html ذخیره میکنم .

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>آموزش طراحی فرم ورود</title>
</head>
     <body>
     </body>
</html>

 2. برای ایجاد فرم باید از تگ form داخل تگ body استفاده شود .

 

<form class='name'  action=''  method='post'  name='name'> </form>

 

3. در این مرحله من کدهای تشکیل دهنده فرم را بین کدهای HTML تایپ میکنم

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title> آموزش طراحی منو با ابعاد متفاوت </title>
   </head>
<body >
<div>
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>ورود به بخش آموزش</legend>
        <label for="email">ایمیل</label>
        <input id="email" type="email" placeholder="Email">
                    <label for="password">رمز عبور</label>
                    <input id="password" type="password" placeholder="Password">
                                 <label for="remember" class="pure-checkbox">
                                 <input id="remember" type="checkbox"> مرا به خاطر بسپار
        </label>
        <button type="submit" class="pure-button pure-button-primary">ورود</button>
    </fieldset>
</form>
</body>
</html>

 



 شما می توانید برای تغییر ظاهری فرم از کدهای css استفاده کنید . من یک نمونه برای شما قرار میدهم

body {
    background-color: wheat;
    direction: rtl;
    font-family: b yekan;
    padding: 300px;
    width: 600px;
}

 

فرم ورود به بخش آموزش

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در چهارشنبه, 18 شهریور 1394 ساعت 10:05
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا