آموزش فریم‌ورک Foundation-بخش۷-فرم سفارشی
آموزش فریم‌ورک Foundation-بخش7-فرم سفارشی » در این مقاله، طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن را آموزش می دهیم و نحوه سفارشی کردن فرم تماس با ما را بیان می کنیم و تمام المان های فرم مانند: سوئیچ ها، select ، checkbox و غیره را بررسی می کنیم.

آموزش فریم‌ورک Foundation-بخش۷-فرم سفارشی

بخش هفتم: فرم های سفارشی (Custom Forms)

فرم های سفارشی (Custom Forms)

 

طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن

 

در مقاله قبل، المان های دکمه (button) و لیست بازشو (DropDown List) را بررسی کردیم.

پس از بررسی و سفارشی سازی دکمه ها در فریم ورک فاندیشن، در ادامه این سری از مقالات، می خواهیم نحوه سفارشی سازی فرم ها و المان های مربوط به آن را بررسی کنیم. در این آموزش، روی یک فرم تماس با ما (contact us form)، کار خواهیم کرد. تصویر زیر را مشاهده کنید:

 

طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن

 

معمولا دیزاین و شخصی سازی فرم ها و همخوانی آن با سایر بخش های وب سایت می تواند مشکل و چالش انگیز باشد. اما فریم ورک فاندیشن (foundation) این امکان را به طراحان می دهد تا با افزودن پلاگین جاوااسکریپت مربوط به فرم ها، براحتی بتوانید المان های فرم دلخواه تان را طراحی و استایل دهی کنید.

به منظور استفاده از امکان شخصی سازی فرم ها، باید فایل foundation.forms.js را به صفحه وب سایت خود اضافه کنید.

طریقه کارکرد این پلاگین بدین صورت است که المان های فرم اولیه را مخفی (hidden) می کند و توسط div و anchor tag و … المان های دلخواه را ایجاد می کند و بین المان های جدید و اولیه فرم، تعاملی ایجاد می کند تا در عملکرد فرم تاثیری نگذارد.

 

فرم تماس با ما (The Contact Form):

در دنیای وب، مرسوم ترین فرمی که می تواند در یک وب سایت وجود داشته باشد، فرم تماس با ما است. مانند تگ فرم استاندارد html، یک تگ فرم بنویسید و برای سفارشی سازی آن، کلاس custom را برای آن تعریف کنید. برای اینکه مطابق تصویر فوق، دو ستون در یک سطر داشته باشیم، نیاز است در یک div با کلاس row، دو تا div با کلاس large-6 columns تعریف شود. کد زیر را مشاهده کنید:

<form class="custom">

  <div class="row">

    <div class="large-6 columns">

    </div>

    <div class="large-6 columns">

    </div>

  </div>

</form>

 

اکنون با ستون سمت چپ شروع می کنیم. ابتدا لطفا تصویر زیر را ملاحظه کنید:

فرم تماس با ما (The Contact Form)

 

در سطر اول، برای خوش آمدگویی به کاربر، جنسیت کاربر (Mr. یا Mrs.) را از طریق یک لیست بازشو (dropdown) از کاربر می پرسیم و در مقابل آن، کاربر باید نام خود را وارد کند. در سطر بعدی، ایمیل کاربر را داریم و سپس یک لیست بازشو برای انتخاب نحوه آشنایی با ما آمده است. کد html این قسمت بصورت زیر است:

<div class="row collapse">

  <div class="large-3 small-3 columns">

    <select>

      <option>Mr.</option>

      <option>Mrs.</option>

      <option>Miss.</option>

      <option>Ms.</option>

      <option>Dr.</option>

    </select>

  </div>

  <div class="large-9 small-9 columns">

    <input type="text" placeholder="Name" />

  </div>

</div>

<input type="email" placeholder="Email" />

<select id="contactDropdown">

  <option DISABLED>How did you find us?</option>

  <option>Google</option>

  <option>A friend told me</option>

  <option>Not sure, where am I?</option>

</select>

 

باید مطمئن شوید که المان select (لیست بازشو) دارای id باشد. برای ادغام این بخش با بقیه فرم، باید آنرا در یک div با کلاس large-6 تعریف کنیم. سپس به سراغ بخش سمت راست می رویم. تصویر زیر را برای این بخش در نظر بگیرید:

 

سمت راست فرم تماس با ما

 

کد زیر مربوط به بخش سمت راست فرم (تصویر بالا) می باشد:

<textarea placeholder="Message"></textarea>

<div class="row">

  <div class="large-6 small-6 columns">

    <label>Send me spam&nbsp;&nbsp;

      <input type="checkbox" CHECKED style="display:none" />

    </label>

  </div>

  <div class="large-3 small-3 columns">

    <label>CC me?</label>

  </div>

  <div class="large-3 small-3 columns end">

    <div class="switch tiny">

      <input id="x" name="switch-x" type="radio" checked>

      <label for="x" onclick="">No</label>

      <input id="x1" name="switch-x" type="radio">

      <label for="x1" onclick="">yes</label>

      <span></span>

    </div>

  </div>

</div>

<input class="button small large-12" type="submit" value="Send Message" />

 

سوئیچ ها (Switches):

برای روشن/خاموش کردن (on/off) فیلدی در فرم بصورت ویژوالی بکار می رود. با یک div شروع می شود که کلاس switch دارد و سپس می توان اندازه آنرا تعریف کرد. در این مثال tiny در نظر گرفتیم. شما می توانید small و یا large را نیز برای سایز سوئیچ تعریف کنید. برای گرد شدن اطراف این المان، می توانید کلاس rounded را به آن اضافه کنید. در ساختار سوئیچ، از دو input بهمراه دو برچسب (label) استفاده شده است. برای هر حالت (state) یک input و label. کد زیر را ملاحظه کنید:

 

<div class="switch tiny">

  <input id="x" name="switch-x" type="radio" checked>

  <label for="x" onclick="">No</label>

 

همانطور که مشاهده می شود، هر input یک id یکتا دارد که در اتریبیوت for برای label مربوط به آن، همین آیدی یعنی x را تعریف کرده ایم.

 

سایر المان های فرم (Other form elements):

برای داشتن دکمه رادیویی (radio button) باید سه input با نوع radio با نام های یکسان تعریف کنید و در هریک، بصورت inline استایل display:none را بنویسید. مانند کد زیر:

<input name="radio1" type="radio" style="display:none;" CHECKED />

<input name="radio1" type="radio" style="display:none;" />

<input name="radio1" type="radio" disabled style="display:none;">

 

برای داشتن یک بخشی بنام پیشوند (prefix)، بصورت زیر می توانید کد خود را تعریف کنید:

<div class="row collapse">
    <div class="large-9 small-9 columns">
        <span class="prefix">http://webdesign.tutsplus</span>
    </div>
    <div class="large-3 small-3 columns">
        <select>
            <option>.com</option>
            <option>.co</option>
            <option>.ca</option>
        </select>
    </div>
</div>

 

در مثال فوق، ابتدا در div با کلاس large-9 المان prefix تعریف شده و سپس یک select در large-3 می آید که می توان پسوند سایت را (مانند com یا info یا…) از لیست آن انتخاب کرد.

 

پیام های خطا (Error Messages):

هر فرمی، مسلما حداقل یک فیلدی دارد که پر کردن آن توسط کاربر الزامی می باشد و در صورت خالی بودن آن و submit کردن فرم، کاربر باید با پیغام خطا روبرو شود. با کلاس error مشخص می شود که می توان این کلاس را به المان هایی مانند label یا input بدهیم تا حالت خطای قرمزرنگ را مشاهده کنیم. کد زیر را در نظر بگیرید:

<form>

  <div class="row">

    <div class="large-6 columns">

      <label class="error">Error</label>

      <input type="text" class="error" />

      <small class="error">Invalid entry</small>

    </div>

    <div class="large-6 columns error">

      <label>Another Error</label>

      <input type="text" />

      <small>Invalid entry</small>

    </div>

  </div>

  <textarea class="error" placeholder="Message…"></textarea>

  <small class="error">Invalid entry</small>

</form>

 

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

 

ابزار مفید (Useful Tools):

وقتی که به مرحله انتخاب رنگ برای قالب وب سایت می رسید، شما نمی توانید بدون کمک یک گرافیست یا طراح (designer) اینکار را انجام دهید. ابزار مفیدی که در این زمینه می تواند بسیار بدرد شما بخورد، وب سایت Colourco می باشد. در این وب سایت می توانید بخش های مختلف وب سایت تان را با حرکت ماوس روی نمایشگر انتخاب کنید و همچنین از تمپلیت های آماده این وب سایت واقع در منوی سایدبار سمت چپ (مانند مونوکرومیک و …) استفاده کنید.

 

فریم ورک فاندیشن، امکانات خوبی برای کارکردن با فرم ها و المان های آن در اختیار طراحان وب قرار می دهد. با اینحال اگر همچنان کنجکاو هستید و می خواهید امکانات دیگری در این زمینه ببینید، به آموزش آپلود تصویر بصورت آژاکسی در فریم ورک foundation مراجعه کنید.

 

در بخش هشتم از سری آموزشی فریم ورک foundation، المان های progress، tooltip، alert و… را مورد بررسی قرار می دهیم.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-custom-forms-and-switches–webdesign-13109


برچسب‌ها:

contact formالمان های فرمسوئیچفرم تماسفرم تماس با مافرم در foundationفرم سفارشیفرم فاندیشنفریم ورک Foundation


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 − هفت =