فرم های واکنشگرا
فرم ورودی
برچسب های بالا
فرم ورودی
مثال
<form class="w3-container">
<label> نام</label>
<input class="w3-input" type="text">
<label>نام خانوادگی l</label>
<input class="w3-input" type="text">
</form>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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 استفاده کنید:
مثال
<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>
خودتان امتحان کنيد »<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 استفاده کنید:
مرزهای گردشده
میتوانید هرکدام از کلاس های w3-round را برای ایجاد مرزهای گرد شده استفاده کنید:
مثال
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" 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>
خودتان امتحان کنيد »<label> نام</label>
<input class="w3-input w3-border-0" type="text">
<label>نام خانوادگی </label>
<input class="w3-input w3-border-0" type="text">
</form>
رنگ ها
برای ایجاد سبک ها و رنگ ها مطلوبتان شما مختارهستید:
فرم ورودی
مثال
<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>
خودتان امتحان کنيد »<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">
خودتان امتحان کنيد »<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-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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
منو انتخاب مرزدار
عناصر فرم در شبکه بندی 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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
- نوشته شده توسط زهرا داوودی
- بازدید: 3292
