>

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

    توسط 16 مهر, 1393 7367 اضافه کردن دیدگاه جدید

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

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

    طراحی فرم برای هر وب سایتی جزو اصلی ترین بخش ها می باشد که بدلیل همه گیر شدن سیستم های مدیریت محتوا کاربران نیازی به کد نویسی و طراحی این صفحات ندارند . معمولا با نصب یک ماژول این کدها در جای مشخص شده نمایش داده می شوند. ولی اگر بخواهید قالب را خودتان طراحی کنید یا شکل شاهری کد را تغییر بدهید باید با تگهای تشکلی دهنده فرم آشنایی داشته باشید .
    در ادامه من یک فرم ساده برای ورود را با 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

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »
    © 2015 Your Company. All Rights Reserved. Designed By JoomShaper

    Please publish modules in offcanvas position.

    تک وب دیزاین-قالب فارسی جوملا