آموزش طراحی فرم Login با استفاده از HTML و CSS

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

7 آموزش طراحی فرم Login با استفاده از HTML و CSSیکی از اصلی ترین بخش های وب سایت پویا یا داینامیک ، فرم ثبت نام و ورود کاربران می باشد . هیچ وب سایتی داینامیکی وجود ندارد که دارای فرم ثبت نام نباشد مگر اینکه دارای انجمن باشد .  فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . در این مطلب آموزشی بر خلاف دیگر مقالات می خواهم فایل و کدهای مربوط به ظاهر قالب که در CSS تایپ می شود را در خود فایل index.html در قالب style ذخیره کنم. بد نیست با این روش نیز آشنا شوید .

قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( 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' />

 

 

با توجه به توضیحات بالا اگر بخواهید فرمی ایجادکنید که بازدید کننده در آن متنی را تایپ کند باید از text استفاده کنید یا اگر بخواهید چند گزینه برای انتخاب بازدید کننده قرار بدهید باید از Radio استفاده کنید.

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 action="" method="post">

 

3. فرم از سه قسمت تشکیل شده است . بخش اول نام کاربری همراه با ایمیل و رمز عبور
بخش دوم انتخاب یکی از سوالهای امنیتی
بخش سوم توضیحات . دو بخش بالا را در فرم ثبت نام اضافه کرده ام تا راحت تر بتوانید با انواع تگ های ایجاد فرم آشنا شوید .  سعی کنید هر سوالی که برایتان پیش آمد را قبل از ارسال تیکت در بخش آموزش مطالعه نمایید . در مورد تگ ها و نحوه کار آنها در بخش مقدماتی توضیح داده شده است . من ابتدا هر سه قسمت را ایجاد میکنم و هر کجا که بدانم  ممکن است برای شما سوال ایجاد شود را به صورت کامل پایخ میدهم .

بخش اول فرم مربوط می شود به سه کارد ثبت نام . پس ابتدا تگ های

 

<form action="" method="post">
</form>

 را درون تگ body تایپ میکنم. سپس به سراغ تگ های سه کادر مورد نظر میروم . 

برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد.تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد .
تگ <label> برای المان <input> یک برچسب تعریف می کند
تگ <strong> یک تگ تعریفی است و متن مهم را تعریف می کند.
با توجه به این توضیحات من کد قسمت اول فرم را به شکل زیر تایپ میکنم 

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Form</title>
</head>
<body>
    <form action="" method="post">
        <!-- ============================== بخش ابتدای ثبت نام  ============================== -->
        <fieldset>
            <legend>ثبت نام در سایت آسارایان:</legend>
                <label for="input-one" class="float"><strong>نام کاربری:</strong></label><br />
                <input class="inp-text" name="input-one-name" id="input-one" type="text" size="30" /><br />
                <label for="input-two" class="float"><strong>ایمیل:</strong></label><br />
                <input class="inp-text" name="input-two-name"  id="input-two" type="text" size="30" /><br />
                <label for="input-two" class="float"><strong>رمز عبور:</strong></label><br />
                <input class="inp-text" name="input-pass"  id="input-two" type="text" size="30" />
        </fieldset>
        <!-- ============================== بخش پایانی ثبت نام ============================== -->
    </form>
</body>
</html>

 



 

از تصویر زیر نیز می توانید کمک بگیرید

1 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

خروجی تا به این قسمت باید در مرورگر به این شکل باشد . متنی که داخل کادر تایپ شده برای نمونه می باشد

 

2 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

حالا بخش دوم . در این قسمت از تگ type="checkbox" استفاده میکنم

 

<!-- ============================== بخش ابتدای قسمت دوم فرم  ============================== -->
        <fieldset>
            <legend>از چه طریقی با سایت آسارایان آشنا شده اید ؟ </legend>
                <label for="option1"><input class="choose" name="option[]" id="option1" type="checkbox" value="1" /> &nbsp; تبلیغات</label><br />
                <label for="option2"><input class="choose" name="option[]" id="option2" type="checkbox" value="2" /> &nbsp; بخش آموزش</label><br />
                <label for="option3"><input class="choose" name="option[]" id="option3" type="checkbox" value="3" /> &nbsp; فروشگاه</label><br />
                <label for="option4"><input class="choose" name="option[]" id="option4" type="checkbox" value="4" /> &nbsp; موتور جستجوی گوگل</label><br />
                <label for="option5"><input class="choose" name="option[]" id="option5" type="checkbox" value="5" /> &nbsp; شبکه های اجتماعی</label>
        </fieldset>
<!-- ============================== بخش انتهایی قسمت دوم فرم  ============================== -->

 

شکل کلی کد همانند تصویر زیر می باشد

3 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

خروجی تا به این قسمت باید در مرورگر به این شکل باشد

4 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

نوبت به بخش پایانی میرسد .

 

<!-- ============================== بخش ابتدایی قسمت سوم فرم  ============================== -->
        <fieldset>
            <legend>توضیحات:</legend>
            <textarea name="textarea-name" id="message" cols="30" rows="5" title="Note or message"></textarea><br />
            <label class="spam-protection" for="protection">جواب سوال روبرو  را در کادر وارد کنید: <strong>6&nbsp;+&nbsp;5&nbsp;=</strong></label><br />
            <input class="answer" type="text" name="antispam" id="protection" size="5" />
        </fieldset>
<!-- ============================== بخش انتهایی قسمت سوم فرم ============================== -->
<p><input class="submit-button" type="submit" alt="SUBMIT" name="Submit" value="ثبت نام" /></p>

 

  شکل کلی کد همانند تصویر زیر می باشد

5 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

خروجی تا به این قسمت باید در مرورگر به این شکل باشد

6 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

حالا باید تگ هایی که مربوط به ظاهر قالب می شود را بین تگ <style type="text/css"> قرار بدهیم . این تگ ما بین تک Head نوشته می شود . 
تگ style از دو بخش تشکیل شده یکی به صورت کلی و دیگری برای مرورگر اینترنت اکسپلورر

تگ های Css  را می توانید در بخش مقدماتی به صورت کامل بررسی کنید .

در مرحله پایانی کافیست کد زیر را بین تگ head  قرار بدهید

 

<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; font-size: 62.5% }
body {direction:rtl; height: 100%; background-color: #FFFFFF; font: 1.2em tahoma; }
/* ==================== Form style sheet ==================== */
form { margin: 25px 0 0 29px; width: 450px; padding-bottom: 30px; }
fieldset { margin: 0 0 22px 0; border: 1px solid #095D92; padding: 12px 17px; background-color: #DFF3FF; }
legend { font-size: 1.1em; background-color: #095D92; color: #FFFFFF; font-weight: bold; padding: 4px 8px; }
label.float { float: right; display: block; width: 100px; margin: 4px 0 0 0; clear: left; }
label { display: block; width: auto; margin: 0 0 10px 0; }
label.spam-protection { display: inline; width: auto; margin: 0; }
input.inp-text, textarea, input.choose, input.answer { border: 1px solid #909090; padding: 3px; }
input.inp-text { width: 300px; margin: 0 0 8px 0; }
textarea { width: 400px; height: 150px; margin: 0 0 12px 0; display: block; }
input.choose { margin: 0 2px 0 0; }
input.answer { width: 40px; margin: 0 0 0 10px; }
input.submit-button { font: 1.4em Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; display: block; margin: 23px 0 0 0; }
form br { display: none; }
/* ==================== Form style sheet END ==================== */
</style>
<!--[if IE]>
<style type="text/css">
/* ==================== Form style sheet for IE ==================== */
fieldset { padding: 22px 17px 12px 17px; position: relative; margin: 12px 0 34px 0; }
legend { position: absolute; top: -12px; left: 10px; }
label.float { margin: 5px 0 0 0; }
label { margin: 0 0 5px 0; }
label.spam-protection { display: inline; width: auto; position: relative; top: -3px; }
input.choose { border: 0; margin: 0; }
input.submit-button { margin: -10px 0 0 0; }
/* ==================== Form style sheet for IE end ==================== */
</style>
<![endif]-->

 



 

خروجی کد در مرورگر باید به این شکل نمایش داده شود . در پایان می توانید فایل را دانلود و هر کجا که اشکالی داشتید از فایل تمرینی استفاده کنید

7 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

دمو فرم ثبت نام (کلیک کنید) 

 

لینک دانلود فرم

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

نوشتن دیدگاه

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

دیدگاه‌ها   

+1 #3 Mohammad Azadkerdeh 1395-01-02 15:36
سلام مرسی از این آموزش خوبتون!
حالا چیکار کنیم که اطلاعات وارد شده به جمیل ما ارسال بشه؟!؟ وبعد از وارد کردن این اطلاعات )اگر صحیح بود( وارد صفحه اصلی سایت بشه؟
نقل قول کردن
0 #2 deaf 1394-08-26 23:52
باسلام
برنامه تان عالیس واقعا ممنونت، کاش فیلم آموزش html و Css رو میگذاشت
نقل قول کردن
0 #1 how to delete 1394-05-10 09:09
Meanwhile, each of the links and content you
post will offer your SEO a good start within Google
search results. Use a source link when adding your site content to
Google Plus. Placing your energy and attention there may only disperse the productive, new
patient getting strategies that have been employed by years now.
نقل قول کردن

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

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا