W3.CSS ထည့်သွင်း ခြင်း။
ထည့်သွင်းပုံစံ
ထိပ်တန်းတံဆိပ်များ
ထည့်သွင်းပုံစံ
ဥပမာ
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
အောက်ခြေတံဆိပ်များ
ထည့်သွင်းပုံစံ
ဥပမာ
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
ထည့်သွင်းကတ်များ
ခေါင်းစီး
ဥပမာ
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
ရောင်စုံတံဆိပ်များ
သင့်တံဆိပ်များကို အရောင်ခြယ်ရန် w3-စာသား-အရောင် အတန်းများကို အသုံးပြု ပါ။
ဥပမာ
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-text-blue"><b>Last Name</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-အဝိုင်း အတန်းများကို သုံး ပါ-
ဥပမာ
<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>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</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-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form>
လွှမ်းခြုံနိုင်သော သွင်းအားစုများ
w3-hover- အရောင် အတန်း များသည် mouse-over ရှိ input field သို့ နောက်ခံအရောင်ကို ပေါင်းထည့်သည်-
ဥပမာ
<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 အတန်းသည် အာရုံစူးစိုက်မှုရရှိသောအခါတွင် ထည့်သွင်းသည့်အကွက်၏ အကျယ်ကို 100% သို့ ပြောင်းလဲပေးသည် -
ဥပမာ
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
ဥပမာ
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
ဥပမာ
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label>
ရွေးချယ်စရာများကို ရွေးပါ။
ဥပမာ
<select class="w3-select" name="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" name="option">
ဇယားကွက်တစ်ခုရှိ အစိတ်အပိုင်းများကို ဖွဲ့ပါ။
ဤဥပမာတွင်၊ ထည့်သွင်းမှုများကို တူညီသောမျဉ်းပေါ်တွင်ပေါ်လာစေရန်အတွက် 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-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>