سبد خرید (0)

فرم های واکنشگرا

فرم ورودی










برچسب های بالا

فرم ورودی

مثال

<form class="w3-container">

<label> نام</label>
<input class="w3-input" type="text">

<label>نام خانوادگی l</label>
<input class="w3-input" type="text">

</form>
خودتان امتحان کنيد »

برچسب های پایین

فرم ورودی

مثال

<form class="w3-container">

<input class="w3-input" type="text">
<label> نام</label>

<input class="w3-input" type="text">
<label>نام خانوادگی </label>

</form>
خودتان امتحان کنيد »

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

سربرگ

مثال

<div class="w3-card-4">

<div class="w3-container w3-green">
  <h2>Header</h2>
</div>

<form class="w3-container">

<label class="w3-label"> نام</label>
<input class="w3-input" type="text">

<label class="w3-label">نام خانوادگی </label>
<input class="w3-input" type="text">

</form>

</div>
خودتان امتحان کنيد »

برچسب های سبز

برچسب ها با کلاس w3-label به صورت پیش فرض سبز هستند:

مثال

<form class="w3-container">

<label class="w3-label"> نام</label>
<input class="w3-input" type="text">

<label class="w3-label">نام خانوادگی </label>
<input class="w3-input" type="text">

</form>
خودتان امتحان کنيد »

برچسب های اعتبار سنجی

برچسب های اعتبار سنجی قرمز هستند و زمانی که ورودی ما معتبر باشد ،سبز میشود.

برای ساخت برچسب های اعتبارسنجی ،کلاس w3-validate را به کلاس w3-label خود بیافزایید.

مثال

<form class="w3-container">

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate"> نام</label>

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">نام خانوادگی </label>

<input class="w3-input" type="ایمیل" required>
<label class="w3-label w3-validate">ایمیل</label>

</form>
خودتان امتحان کنيد »

برچسب های رنگی

برای رنگ دهی به برچسب های خود از کلاس های w3-text-color استفاده کنید:

Register

مثال

<form class="w3-container">

<label class="w3-label w3-text-blue"><b> نام</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="w3-label w3-text-blue"><b>نام خانوادگی </b></label>
<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">Register</button>
 
</form>
خودتان امتحان کنيد »

ورودی های مرزدار

برای ایجاد ورودی های مرز دار از کلاس w3-border استفاده کنید:

مثال

<input class="w3-input w3-border" type="text">
خودتان امتحان کنيد »

مرزهای گردشده

میتوانید هرکدام از کلاس های w3-round را برای ایجاد مرزهای گرد شده استفاده کنید:

مثال

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
خودتان امتحان کنيد »

ورودی های بی مرز

کلاس w3-input به صورت پیش فرض  مرز پایینی دارد. اگر شما بخواهید ورودی شما مرز نداشته باشد از کلاس w3-border-0 استفاده کنید:

مثال

<form class="w3-container w3-light-grey">
  <label> نام</label>
  <input class="w3-input w3-border-0" type="text">

  <label>نام خانوادگی </label>
  <input class="w3-input w3-border-0" type="text">
</form>
خودتان امتحان کنيد »

رنگ ها

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

فرم ورودی

Register

مثال

<div class="w3-container w3-teal">
  <h2>Input Form</h2>
</div>

<form class="w3-container">
  <label class="w3-label w3-text-teal"><b> نام</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-label w3-text-teal"><b>نام خانوادگی </b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <button class="w3-btn w3-blue-grey">Register</button>
</form>
خودتان امتحان کنيد »

ورودی هابا قابلیت Hover

کلاسهای w3-hover-color ،  زمان عبور موس از فیلد ورودی ، پس زمینه رنگی به آن میدهند.

مثال

<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">
خودتان امتحان کنيد »

ورودی های متحرک سازی شده

کلاس w3-animate-input زمانی که  روی فیلد ورودی  focus میشود عرض آنرا 100% میکند:

مثال

<input class="w3-input w3-animate-input" type="text" style="width:30%">
خودتان امتحان کنيد »

چک باکس ها

مثال

<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">شیر</label>

<input class="w3-check" type="checkbox">
<label class="w3-validate">شکر</label>

<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">لیمو شیرین (نمیدانم)</label>
خودتان امتحان کنيد »

دکمه های رادیویی

مثال

<input class="w3-radio" type="radio" نام="gender" value="مرد" checked>
<label class="w3-validate">مرد</label>

<input class="w3-radio" type="radio" نام="gender" value="زن">
<label class="w3-validate">زن</label>

<input class="w3-radio" type="radio" نام="gender" value="" disabled>
<label class="w3-validate">نمیدانم(غیر فعال)</label>
خودتان امتحان کنيد »

 گزینه های انتخاب

مثال

<select class="w3-select" نام="option">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
خودتان امتحان کنيد »

منو انتخاب مرزدار

مثال

<select class="w3-select w3-border" نام="option">
خودتان امتحان کنيد »

عناصر فرم در شبکه بندی W3.CSS

دراین مثال ،ما سیستم شبکه بندی واکنشگرا w3.css را برای قرار دادن فیلدهای  ورودی در یک خط (در اسکرین های کوچک، آنها به صورت افقی با عرض 100% روی هم قرار میگیرند.) استفاده میکنیم.در مورد این موضوع بعدا بیشتر می آموزیم.

مثال

<div class="w3-row-padding">
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="One">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
خودتان امتحان کنيد »

شبکه بندی همراه با  label ها

مثال

<div class="w3-row-padding">
  <div class="w3-half">
    <label> نام</label>
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-half">
    <label>نام خانوادگی </label>
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
خودتان امتحان کنيد »

برچسب های آیکون

مثال (ارتباط با ما)

<form action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
  <h2 class="w3-center">Contact Us</h2>
  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
     <input class="w3-input w3-border" name="first" type="text" placeholder="First Name">
    </div>
  </div>
</form>
خودتان امتحان کنيد »