طراحی فرم ها در صفحات HTML

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

نحوه استفاده

هر فرم از اجزای مختلفی تشکیل شده است که همگی آنها داخل تگ <form> قرار می گیرند. مهمترین attribute این تگ method می باشد که نحوه عملکرد فرم را مشخص کرده و می توان یکی از مقادی زیر را به آن نسبت داد.

  • GET: فرم هایی که اطلاعات دریافتی از سرور را نمایش می دهند.
  • POST: فرم هایی که اطلاعات جمع آوری شده را به سرور ارسال می کنند.

تگ های قابل استفاده در فرم ها

برای طراحی هر فرم، بنا به نیاز می توانید از تگ های زیر استفاده نمایید.

Label: از این تگ برای نمایش متن در فرم ها استفاده می شود.

<label>First Name : </label>

Input: دریافت اطلاعاتی از قبیل نام، نام خانوادگی و ...

<input type="text" />

select: انتخاب یک گزینه از بین گزینه های موجود.

<select>
  <option>دیپلم</option>
  <option>فوق دیپلم</option>
  <option>لیسانس</option>
  <option>فوق لیسانس</option>
</select>

Radio: انتخاب یک گزینه از بین گزینه های موجود.

<input type="radio" name="gender" /> مرد

<input type="radio" name="gender" /> زن

در صورتی که قصد داشته باشید radio ها بصورت یک مجموعه عمل کنند و با انتخاب یکی، گزینه های دیگر از حالت انتخاب خارج شوند، می بایست name آنها را یکسان تعیین کنید و متنی که در کنار radio قرار می گیرد نیز باید بعد از تگ بسته باشد.

Checkbox: امکان انتخاب بیش از یک گزینه از بین گزینه های موجود.

<input type="checkbox" /> کتاب
<input type="checkbox" /> سفر
<input type="checkbox" /> فیلم

File: انتخاب فایل جهت آپلود در سرور.

<input type="file" />

Button: اجرای دستورات برنامه نویسی. این گزینه به دو شکل قابل استفاده می باشد.

<input type="bututon" value="Sign In" />
<button>Sign In </button>

Submit: همانند button می باشد، با این تفاوت که اطلاعات وارد شده در فرم را بصورت اتوماتیک به سرور منتقل می نماید.

مثال: یک فرم ثبت نام طراحی کنید.

برای چیدمان این فرم از table استفاده خواهیم نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>آکادمی بنو</title>
  </head>
  <body>
    <form method="POST">
      <table>
        <tr>
          <td>
            <label>First name : </label>
          </td>
          <td>
            <input type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label>Last name : </label>
          </td>
          <td>
            <input type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label>Email : </label>
          </td>
          <td>
            <input type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label>Password : </label>
          </td>
          <td>
            <input type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label>Gender : </label>
          </td>
          <td>
            <input type="radio" name="g" />Male
            <input type="radio" name="g" />Female
          </td>
        </tr>
        <tr>
          <td>
            <label>Favorite : </label>
          </td>
          <td>
            <input type="checkbox" />Book <input type="checkbox" />Travel
            <input type="checkbox" />Movies
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" value="Register" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

از آنجا که هدف از طراحی این فرم ارسال اطلاعات به سمت سرور می باشد، خاصیت method را برابر POST قرار داده ایم.

در صورتیکه کدها فوق را صحیح وارد کرده باشید، فرمی به شکل زیر نمایش داده خواهد شد.

فرم-html

اعتبارسنجی فرم ها

یکی از موارد مهم در طراحی فرم ها، اعتبار سنجی آنها می باشد. منظور از اعتبار سنجی، بررسی صحت اطلاعات ورودی می باشد که شامل چندین مرحله می باشد. به لطف attribute های اضافه شده در HTML5 تا حد مناسبی امکان اعتبارسنجی اطلاعات توسط خود تگ ها وجود دارد و سایر موارد را می توان با استفاده از جاوا اسکریپت، جی کوئری و ... انجام داد.

تعداد کاراکترهای ورودی

در یک پروژه واقعی که حاوی دیتابیس می باشد، به ازای هر فرم در صفحات وب، یک جدول در پایگاه داده وجود دارد که اطلاعات فرم به آن منتقل شده و درون آن ذخیره می شود. یکی از مهمترین مواردی که در طراحی فرم ها حائز اهمیت است، تطابق تعداد کاراکترهای دریافتی از فرم و تعداد کاراکترهای مجاز برای درج در جدول پایگاه داده می باشد. برای مثال اگر در پایگاه داده تعداد کاراکترهای مجاز برای first name معادل 20 کاراکتر باشد، وارد کردن 21 کاراکتر موجب بروز خطا می شود. اگر قصد داشته باشید تعداد کاراکترهای ورودی در input را محدود کنید می توانید از خاصیت maxlength استفاده کنید.

<tr>
  <td>
    <label>First name : </label>
  </td>
  <td>
    <input type="text" maxlength="20"/>
  </td>
</tr>

الزامی بودن فیلد

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

<tr>
  <td>
    <label>Email : </label>
  </td>
  <td>
    <input type="text" required />
  </td>
</tr>
<tr>
  <td>
    <label>Password : </label>
  </td>
  <td>
    <input type="text" required />
  </td>
</tr>

ساختار اطلاعات

در مرحله قبل نحوه الزامی بودن فیلد آموزش داده شد، حال فرض کنید کاربر برای آدرس ایمیل خود عبارتی مانند "تهران" را وارد کند! بنابراین الزامی بودن یک فیلد، لزوماً به معنی صحت آن نیست و برای برخی از فیلدهای خاص امکان بررسی ساختار اطلاعات نیز وجود دارد. اگر فیلدی وجود داشته باشد که کاربر می بایست در آن حتما یک آدرس ایمیل وارد نماید می توان type آن را به جای text به email تغییر داد.

<tr>
  <td>
    <label>Email : </label>
  </td>
  <td>
    <input type="email" required />
  </td>
</tr>

یکی دیگر از گزینه های قابل استفاده برای خاصیت type، مقدار password می باشد که استفاده از آن باعث نمایش دایره به جای اطلاعات وارد شده می شود که برای فیلدهایی مانند رمز عبور که امنیت آنها اهمیت زیادی دارد می تواند مفید باشد.

<tr>
  <td>
    <label>Password : </label>
  </td>
  <td>
    <input type="password" required />
  </td>
</tr>

متن پیش فرض

یکی دیگر از تنظیمات مفیدی که جهت دریافت اطلاعات صحیح از کاربر مورد استفاده قرار می گیرد، خاصیت placeholder می باشد که یک متن پیش فرض را درون input ها نمایش داده و به محض ورود اولین کاراکتر توسط کاربر، متن پیش فرض پاک می شود.

<tr>
  <td>
    <label>Email : </label>
  </td>
  <td>
    <input type="text" required placeholder="example@beno.biz" />
  </td>
</tr>

بنابراین کد تکمیل شده فرم ثبت نام با اعمال محدودیت های مناسب به شکل زیر خواهد بود.

<form method="POST">
  <table>
    <tr>
      <td>
        <label>First name : </label>
      </td>
      <td>
        <input type="text" maxlength="20" placeholder="please enter your first name"
        />
      </td>
    </tr>
    <tr>
      <td>
        <label>Last name : </label>
      </td>
      <td>
        <input
          type="text" maxlength="20" placeholder="please enter your last name"
        />
      </td>
    </tr>
    <tr>
      <td>
        <label>Email : </label>
      </td>
      <td>
        <input type="text" required placeholder="example@beno.biz" />
      </td>
    </tr>
    <tr>
      <td>
        <label>Password : </label>
      </td>
      <td>
        <input type="password" required />
      </td>
    </tr>
    <tr>
      <td>
        <label>Gender : </label>
      </td>
      <td>
        <input type="radio" name="g" />Male
        <input type="radio" name="g" />Female
      </td>
    </tr>
    <tr>
      <td>
        <label>Favorite : </label>
      </td>
      <td>
        <input type="checkbox" />Book <input type="checkbox" />Travel
        <input type="checkbox" />Movies
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" value="Register" />
      </td>
    </tr>
  </table>
</form>