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

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

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

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

 

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

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:05

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

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

«
  • 1
  • 2
  • 3
»