سبد (0)

آموزش foundation-فرم ها

تنظیمات پیش فرض فرم در فریم ورک foundation

کنترل های فرم، به طور اتوماتیک مقداری استایل دهی عمومی را از foundation دریافت می کنند:

تمام عناصر <textarea> و <select> و عناصر متنی <input> دارای عرض 100% ، به همراه مقداری margin و padding و مقداری سایه و افکت hover می باشند:

<form>
  Input:
  <input type="text" placeholder="Name">

  Textarea:
  <textarea rows="4" placeholder="Address"></textarea>

  Select:
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>

نتیجه:

خودتان امتحان کنید »

برچسب ها

برای تعریف کردن یک برچسب، یک عنصر <label> را به دور یک کنترل فرم قرار دهید و مقدار خصوصیت for و خصوصیت id را با یکدیگر برابر قرار دهید. حالا کاربر می تواند با کلیک بر روی فیلد input یا برچسب ورد نظر، فوکس را به ورودی(input) منتقل کند:

<form>
  <label for="name">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <label for="adr">Label
    <textarea rows="4" placeholder="Address" id="adr"></textarea>
  </label>

  <label for="num">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

نتیجه:

خودتان امتحان کنید »

با استفاده از کلاس right. می توانید برچسب ها را راست چین کنید:

<label class="right">

نتیجه:

خودتان امتحان کنید »

Fieldset

فریم ورک foundation، عنصر اچ تی ام ال <fieldset> را به صورت زیر استایل دهی می کند:

<form>
  <fieldset>
    <legend>Fieldset Legend</legend>
    <label>Name
      <input type="text" placeholder="First Name..">
    </label>
    <label>Email
      <input type="text" placeholder="Enter email..">
    </label>
  </fieldset>
</form>

نتیجه:

خودتان امتحان کنید »

حالت خطا

از کلاس error. می توانید برای مشخص کردن یک استایل خطا برای برچسب ها یا عناصر textarea استفاده کنید:

<form>
  <label class="error">Error
    <input type="text" placeholder="Name..">
  </label>
  <small class="error">Wrong input</small>

  <textarea rows="4" placeholder="Address"></textarea>
  <small class="error">Wrong input</small>
</form>

نتیجه:

خودتان امتحان کنید »
Note

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

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