طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد.

در ادامه مطلب همراه من باشید.

برای ایجاد فرم در HTML از تگی به نام form استفاده می شود. فرم در انتقال داده ها به سمت سرور نقش اساسی را ایفا می کند، در داخل فرم می توان از تگ های input جهت دریافت ورودی از کاربران استفاده کرد. با استفاده از خصوصیت type در تگ input می توان ورودی مورد نظر را به طرق مختلف از کاربر دریافت کرد.

خصوصیات مهم تگ form:

method: برای ارسال اطلاعات به سمت سرور توسط پروتکل HTTP معمولا دو متداستفاده می شود: متد GET و POST.

متد GET درخواست را از طریق URL اسال می کند در صورتی که متد POST درخواست را از طریق بدنه پیام پروتکل HTTP که قابل رویت در URL نیست ارسال می کند.

تفاوت های عمده بین این دو روش:

1. درخواست های GET قابل Cache شدن هستند در صورتی که درخواستهای POST قابل Cache شدن نیستند. (Cache مقدار حافظه ای است در اختیار مرورگر برای ذخیره اطلاعاتی همچون فایل های HTML، CSS، Javascript و تصاویر که علاوه بر صرفه جویی در دانلود، سرعت بارگذاری را کاهش دهد)
2. درخواست های GET در History مرورگر قابل ذخیره شدن هستند در صورتی که درخواست های POST این قابلیت را دارا نیستند.
3. درخواست های GET در مرورگر قابل Bookmark شدن می باشند در صورتی که درخواست های POST قابل Bookmark شدن نیستند.
4. درخواست های GET دارای محدودیت اندازه برروی داده ها هستند در صورتی که درخواست های POST هیچ نوع محدودیتی بر اندازه داده ها ندارند.
5. داده های ارسالی توسط روش GET در URL قابل مشاهده هستند اما در روش POST داده ها در URL قابل رویت نیستند.

با توجه به توضیحات بالا می توان دریافت که روش GET از امنیت کمتری نسبت به روش POST برخوردار است، زیرا داده های ارسالی قابل ذخبره شدن در History مرورگر و یا قابل رویت در URL می باشند. از این رو برای ارسال داده های مهمی همچون گذرواژه ها و داده های حساس دیگر از این متد استفاده نمی شود.

action: با استفاده از این خصوصیت مشخص می شود که داده های فرم پس از ارسال به کجا هدایت شوند.(یک فایل موجود در سرور).

enctype: این خصوصیت هنگام ارسال داده های فرم به سمت سرور تعیین می کند که داده ها باید توسط روشی مشخص کد گذاری شوند.

حال به معرفی برخی از نوع های مختلف تگ input قابل استفاده در فرم های HTML می پردازیم:

input type = text: یک ورودی یک خطی برای دریافت رشته های متنی. به طور مثال:

<input type="text" name="username">
<span>نام کاربری</span>

input type = password: یک فیلد جهت دریافت گذرواژه ایجاد می کند که کاراکترهای ورودی را به صورت دایره های تو پر مشکی نمایش می دهد.

<input type="password" name="password">
<span>گذرواژه</span>

input type = submit: یک دکمه جهت ارسال داده های فرم به آدرسی که در خصوصیت action موجود در تگ فرم وارد شده است ایجاد می کند.

<form method="post" action="login.php">
    <input type="text" name="username">
    <span>نام کاربری</span><br>
    <input type="password" name="password">
    <span>گذرواژه</span><br>
    <input type="submit" value="ورود">
</form>

input type = radio: یک دکمه رادیویی را ایجاد می کند، از این نوع ورودی برای انتخاب یک گزینه از بین گزینه های موجود استفاده می شود.

<form method="get" action="demo.php">
    <input type="radio" name="type" value="software" checked>
    <span>نرم افزار</span><br>
    <input type="radio" name="type" value="hardware">
    <span>سخت افزار</span><br>
    <input type="submit" value="ارسال">
</form>

input type = check: یک دکمه چک را ایجاد می کند، از این نوع ورودی برای انتخاب یک یا چند گزینه از بین گزینه های موجود استفاده می شود.

<form method="get" action="demo.php">
   <span>گوشی هوشمند</span>
   <input type="checkbox" name="device" value="smart_phone" checked><br>
   <span>تبلت</span>
   <input type="checkbox" name="device" value="tablet"><br>
   <input type="submit" value="ارسال">
</form>

input type = button: یک دکمه را ایجاد می کند.

<input type="button" value="Remove">

علاوه بر انواع مختلف input، می توان از تگ های پرکاربرد و معمول دیگری مثل textarea و select استفاده کرد:

textarea: یک فیلد متنی چند خطی ایجاد می کند.

<textarea name="comment"></textarea>

select: با استفاده از این تگ یک فیلد ورودی به صورت کشویی ایجاد می شود که item های موجود در آن را می توان با تگ option و مقدار ارسالی به سمت سرور را توسط خصوصیت value موجود در تگ option مشخص کرد.

<select name="programming_language">
   <option value="php">PHP</option>
   <option value="java">Java</option>
</select>

گاهی اوقات لازم است با استفاده از خصوصیت ها برخی محدودیت ها را در دریافت ورودی اعمال کنیم که برخی از مهم ترین آنها در زیر آمده است:

disabled: این خصوصیت باعث غیرفعال شدن ورودی می شود، مثال:

<input type="text" disabled>

maxlength: حداکثر تعداد کاراکتر ورودی را مشخص می کند.

<input type="text" maxlength="25">

readonly: این خصوصیت مشخص می کند که فیلد فقط قابل خواندن است و نمی توان آن را تغییر داد.

<input type="text" name="product_code" value="512" readonly>

value: یک مقدار پیش فرض را برای ورودی در نظر می گیرد.

<input type="text" value="ایمیل شما">

من برای طراحی قسمت ثبت نام و ورود کاربران از تگ های form، table و input استفاده کردم. table برای نظم بخشیدن به فیلدهای ورودی فرم بسیار کارآمد است.

هر یک از صفحات را جداگانه ایجاد کردم بدین صورت که دو فایل HTML با نام های login.html و signup.html را در کنار فایل اصلی index.html قرار دادم. همچنین یک فایل CSS به نام login-sign.css در پوشه style برای کدهای css این دو صفحه ایجاد کردم. کدهای CSS این دو صفحه شبیه هم هستند زیرا در هر دوی آنها یک جدول، یک فرم و تگ های ورودی قرار دارند و می توان با تخصیص یک گزینشگر به دو عنصر متفاوت ویژیگی های مورد نظر را در CSS تغییر داد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Advertising</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/login-sign.css">
</head>
<body>
<div class="top">
    <img src="images/icon.png">
    <ul>
        <li><a>درباره ما</a></li>
        <li><a href="login.html">ورود</a></li>
    </ul>
</div>
<div class="content">
    <div>
        <form method="post" action="signup.php">
            <table class="input-fields">
                <tr><td><input type="text" name="username"></td><td><span>نام کاربری:</span></td></tr>
                <tr><td><input type="password" name="password"></td><td><span>رمز عبور:</span></td></tr>
                <tr><td><input type="password" name="repassword"></td><td><span>تکرار رمز عبور:</span></td></tr>
                <tr><td><input type="submit" value="ثبت نام"></td></tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

همانطور که در بالا مشاهده می کنید، فایل CSS مورد نظرم را ضمیمه صفحه کردم و ویژیگی های برخی از تگ ها را تغییر دادم. نکته حائز اهمیت دیگر اضافه کردن خصوصیت href به تگ a موجود در قسمت top می باشد.

href: با استفاده از این خصوصیت و مقدار تخصیص یافته به آن یک لینک به آدرس مورد نظر ایجاد می کنیم.

<a href="login.html">ورود</a>

حال باید این خصوصیت را به صورت زیر در صفحه index.html به تگ a موجود در قسمت top اضافه کنیم:

<div class="top">
   <img src="images/icon.png">
   <ul>
      <li><a>درباره ما</a></li>
      <li><a href="login.html">ورود</a></li>
   </ul>
</div>

پس از اختصاص دادن مقدار به خصوصیت href به صورت خودکار یک زیر خط به تگ اضافه شده و رنگ آن تغییر پیدا می کند با استفاده از CSS این حالات را تغییر می دهم و با استفاده از کلاس کاذب hover: هنگامی که نشانه گر ماوس روی عنصر قرار گرفت رنگ نوشته را تغییر می دهم، کدهای CSS را به صورت زیر در فایل style.css می نویسم:

a{
   text-decoration: none;
   color: #131313;
}
a:hover{
   color: #ff332c;
   cursor: pointer;
}

همانطور که در بالا مشاهده می کنید قبل از کلاس های کاذب علامت : یا single colon قرار می گیرد در زیر توضیح کلاس های کاذب دیگر را مشاهده می کنید:

active: لینکی که کاربر بر روی آن کلیک کرده.

checked: عناصر input که انتخاب یا checked شده اند.

disabled: عناصری که غیر فعال هستند.

empty: عناصر با محتوای خالی.

enabled: عناصری که فعال هستند.

first-child: اولین فرزند پدر.

focus: عناصری که focus روی آن قرار دارد.(نشانه گری که هنگام کلیک روی تگ ورودی در آن قرار می گیرد)

hover: عناصری که نشانه گر ماوس روی آن قرار دارد.

last-child: آخرین فرزند پدر.

حال که صفحه signup.html را ایجاد کردیم و آدرس فایل login.html را در خصوصیت href تگ a قرار دادیم باید صفحه login را ایجاد کنیم، کدهای صفحه login:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Advertising</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/login-sign.css">
</head>
<body>
<div class="top">
    <img src="images/icon.png">
    <ul>
        <li><a>درباره ما</a></li>
        <li><a href="login.html">ورود</a></li>
    </ul>
</div>
<div class="content">
    <div>
        <form method="post" action="login.php">
            <table class="input-fields">
                <tr><td><input type="text" name="username"></td><td><span>نام کاربری:</span></td></tr>
                <tr><td><input type="password" name="password"></td><td><span>رمز عبور:</span></td></tr>
                <tr><td><input type="submit" value="ورود"><a href="signup.html">ثبت نام</a></td></tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

همانطور که در کد صفحه های signup و login مشاهده می کنید یک فرم با دو خصوصیت method و action ایجاد  کردم و در داخل آن یک جدول که تگ های input برای نظم بیشتر در داخل آن قرار گرفته است. به جدول، گزینشگر input-fields که به صورت class در فایل CSS ایجاد شده است را اختصاص و با استفاده از کدهای زیر برخی از ویژیگی های تگ ها را تغییر دادم:

.input-fields{
   margin: 0 auto;
}
.input-fields td{
   padding-bottom: 15px;
}
.input-fields td span{
   float: right;
   direction:rtl;
}
.input-fields td input[type=text], .input-fields td input[type=password]{
   width: 180px;
}
.input-fields td a{
   float: right;
   margin-top: 3px;
}

حال برای پردازش داده های ارسالی به سمت سرور نیاز به یک زبان سمت سرور داریم که در قسمت بعد زبان PHP را دقیق تر بررسی، و فایل های مورد نظر را ایجاد می کنیم.

مطالب مرتبط

مشاهده

طراحی ناحیه کاربری HTML و CSS

مشاهده

طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

مشاهده

طراحی صفحه اول سایت تبلیغات CSS