HTML ပုံစံများ
အသုံးပြုသူထည့်သွင်းမှုစုဆောင်းရန် HTML ဖောင်ကိုအသုံးပြုသည်။ အသုံးပြုသူ ထည့်သွင်းမှုကို လုပ်ဆောင်ရန်အတွက် ဆာဗာတစ်ခုသို့ မကြာခဏ ပေးပို့သည်။
ဥပမာ
<form> Element ပါ။
HTML <form>အစိတ်အပိုင်းကို အသုံးပြုသူထည့်သွင်းမှုအတွက် HTML ဖောင်တစ်ခုဖန်တီးရန် အသုံးပြုသည်-
<form>
.
form elements
.
</form>
ဒြပ်စင်သည် စာသားအကွက်များ၊ အမှတ်ခြစ်ကွက်များ၊ ရေ <form>ဒီယိုခလုတ်များ၊ တင်သွင်းရန် ခလုတ်များ စသည်တို့ကဲ့သို့သော ထည့်သွင်းသည့်ဒြပ်စင်အမျိုးအစားများအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
မတူညီသောပုံစံဒြပ်စင်များအားလုံးကို ဤအခန်းတွင်ဖော်ပြထားသည်- HTML Form Elements .
<input> Element ပါ။
HTML <input>အစိတ်အပိုင်းသည် အသုံးအများဆုံး ဖောင်ဒြပ်စင်ဖြစ်သည်။
အရည်အချင်း <input>ပေါ်မူတည်၍ ဒြပ်စင်တစ်ခုအား ပုံစံများစွာဖြင့် ပြသနိုင်သည် ။type
ဤသည်မှာ ဥပမာအချို့ဖြစ်သည်။
| ရိုက်ပါ။ | ဖော်ပြချက် |
|---|---|
| <input type="text"> | တစ်ကြောင်းတည်းသော စာသားထည့်သွင်းမှုအကွက်ကို ပြသသည်။ |
| <input type="radio"> | ရေဒီယိုခလုတ်ကို ပြသသည် (ရွေးချယ်မှုများစွာထဲမှ တစ်ခုကို ရွေးချယ်ရန်အတွက်) |
| <input type="checkbox"> | အမှတ်ခြစ်ကွက်ကို ပြပါ (ရွေးချယ်မှုများစွာထဲမှ သုည သို့မဟုတ် ထို့ထက်ပိုသော ရွေးချယ်မှုများအတွက်) |
| <input type="submit"> | တင်သွင်းရန် ခလုတ်ကို ပြသည် (ဖောင်ကို တင်သွင်းရန်အတွက်) |
| <input type="button"> | နှိပ်နိုင်သော ခလုတ်ကို ပြသသည်။ |
မတူညီသော ထည့်သွင်းမှုအမျိုးအစားအားလုံးကို ဤအခန်းတွင် အကျုံးဝင်သည်- HTML ထည့်သွင်းမှုအမျိုးအစားများ ။
စာသားအကွက်များ
စာသား <input type="text">ထည့်သွင်းမှုအတွက် တစ်ကြောင်းတည်းထည့်သွင်းသည့်အကွက်ကို သတ်မှတ်သည်။
ဥပမာ
စာသားအတွက် ထည့်သွင်းအကွက်များပါရှိသော ပုံစံ
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
ဤသည်မှာ browser တစ်ခုတွင် အထက်ဖော်ပြပါ HTML ကုဒ်ကို မည်သို့ပြသမည်နည်း။
မှတ်ချက်- ပုံစံကိုယ်တိုင်က မမြင်နိုင်ပါ။ ထည့်သွင်းအကွက်တစ်ခု၏ မူရင်းအကျယ်သည် စာလုံး 20 ရှိကြောင်းကိုလည်း သတိပြုပါ။
<label> Element
<label>အထက်ဖော်ပြပါ ဥပမာတွင် ပါဝင်သည့်အရာ ၏ အသုံးပြုပုံကို သတိပြုပါ ။
တက်ဂ်သည် ပုံစံဒြပ်စင်များစွာအတွက် အညွှန်း <label>တစ်ခုကို သတ်မှတ်သည်။
အသုံးပြုသူသည် ထည့်သွင်းသည့်ဒြပ်စင်ကို အာရုံစိုက်သောအခါ စခရင်ဖတ်စက်သည် အညွှန်းကို ကျယ်လောင်စွာ ဖတ်ပြမည်ဖြစ်သောကြောင့် ဤ <label>ဒြပ်စင်သည် ဖန်သားပြင်ဖတ်စာအသုံးပြုသူများအတွက် အသုံးဝင်ပါသည်။
<label>ဒြပ်စင်သည် အလွန်သေးငယ်သောဒေသများ (ရေဒီယိုခလုတ်များ သို့မဟုတ် အမှန်ခြစ်ပုံးများကဲ့သို့) ပေါ်တွင် နှိပ်ရန်အခက်အခဲရှိသော အသုံးပြုသူများကိုလည်း ကူညီပေးသည် - အကြောင်းမှာ အသုံးပြုသူသည် ဒြပ်စင်အတွင်းရှိ စာသားကို နှိပ်သည့်အခါ ရေ <label>ဒီယိုခလုတ်/အမှတ်ခြစ်ပုံးကို ပြောင်းပေးသောကြောင့် ဖြစ်သည်။
တဂ် ၏ forရည်ညွှန်း ချက်သည်
၎င်းတို့ကို ပေါင်းစည်းရန် ဒြပ်စင် ၏ အရည်အချင်း <label>နှင့် ညီသင့်သည် ။id<input>
ရေဒီယိုခလုတ်များ
ရေ <input type="radio">ဒီယိုခလုတ်လို့ သတ်မှတ်ပါတယ်။
ရေဒီယိုခလုတ်များသည် အသုံးပြုသူတစ်ဦးအား ကန့်သတ်အရေအတွက်ရွေးချယ်မှုတစ်ခုမှ ONE ကို ရွေးချယ်ခွင့်ပေးသည်။
ဥပမာ
ရေဒီယိုခလုတ်များပါရှိသော ပုံစံ-
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
ဤသည်မှာ browser တစ်ခုတွင် အထက်ဖော်ပြပါ HTML ကုဒ်ကို မည်သို့ပြသမည်နည်း။
သင်အကြိုက်ဆုံး ဝဘ်ဘာသာစကားကို ရွေးပါ
အမှန်ခြစ်များ
checkbox ကို <input type="checkbox">သတ်မှတ်သည် ။
Checkboxes သည် အသုံးပြုသူတစ်ဦးအား ရွေးချယ်မှုအရေအတွက်ကန့်သတ်ထားသည့် ZERO သို့မဟုတ် MORE ရွေးချယ်မှုများကို ရွေးချယ်ခွင့်ပေးသည်။
ဥပမာ
အမှန်ခြစ်ပါရှိသော ဖောင်တစ်ခု-
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
ဤသည်မှာ browser တစ်ခုတွင် အထက်ဖော်ပြပါ HTML ကုဒ်ကို မည်သို့ပြသမည်နည်း။
Submit ခလုတ်
ဖောင်ဒေ တာ <input type="submit">ကို ဖောင်ကိုင်တွယ်သူထံ ပေးပို့ရန်အတွက် ခလုတ်တစ်ခုကို သတ်မှတ်သည်။
ဖောင်ကိုင်တွယ်သူသည် ပုံမှန်အားဖြင့် ထည့်သွင်းဒေတာကို လုပ်ဆောင်ရန်အတွက် script တစ်ခုပါရှိသော ဆာဗာပေါ်တွင် ဖိုင်တစ်ခုဖြစ်သည်။
ဖောင်ပုံစံကိုင်တွယ်သူအား ဖောင်၏ရည်ညွှန်းချက်တွင် action
သတ်မှတ်ထားသည်။
ဥပမာ
ပေးပို့ရန်ခလုတ်ပါရှိသော ဖောင်ပုံစံ
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
ဤသည်မှာ browser တစ်ခုတွင် အထက်ဖော်ပြပါ HTML ကုဒ်ကို မည်သို့ပြသမည်နည်း။
<input> အတွက် Name Attribute
nameထည့်သွင်းမှုအကွက်တစ်ခုစီတွင် တင်ပြရန် ရည်ညွှန်းချက် ရှိရမည်ကို သတိပြုပါ ။
nameရည်ညွှန်းချက်အား ချန်လှပ်ထားပါက၊ ထည့်သွင်းမှုအကွက်၏ တန်ဖိုးကို လုံးဝမပို့ပါ ။
ဥပမာ
ဤဥပမာသည် "ပထမအမည်" ထည့်သွင်းမှုအကွက်၏တန်ဖိုးကို တင်ပြမည်မဟုတ်ပါ။
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>