HTML Form မ်ား

HTML Form မ်ားနဲ႔ Input

HTML Form ေတြကုိ အသုံးျပဳသူေတြရဲ့ ကြဲျပားတဲ့ Input ေတြအတြက္သုံးပါတယ္။

---

HTML Form မ်ား

HTML Form ဆိုတာက အခ်က္အလက္ေတြကုိ ဆာဗာ Server ဆီသယ္ဖုိ႔ သုံးတဲ့အရာပါ။
Form တစ္ခုမွာ text field ေတြ၊ checkboxe ေတြ၊ radio-button ေတြ၊ submit button ေတြနဲ႔တျခား input element ေတြပါတတ္ပါတယ္။ select List ေတြ၊ textarea ေတြ၊ fieldset ေတြ၊ legend နဲ႔ label element ေတြလည္းပါတတ္ပါတယ္။ <Form> tag က HTML Form အတြက္ျဖစ္ပါတယ္။

<Form>
input element မ်ား
</Form>

HTML Form မ်ား - Input Element

Form ရ့ဲ အေရးအပါဆုံးအပုိင္း ကေတာ့ Input element ျဖစ္ပါတယ္။
Input element ေတြကို အသုံးျပဳသူေတြ  ေရြးခ်ယ္တဲ့၊ ေပးတဲ့ အခ်က္အလက္ အခ်က္အလက္ေတြ ေရြးဖုိ႔ သုံးပါတယ္။
Input element က type attribute ေပၚမူတည္ျပီး အမ်ဳိးမ်ိဳးျဖစ္ႏုိင္တယ္။ input element က type text field, checkbox, password, radio button, submit button နဲ႔ အျခားအရာေတြ ျဖစ္ႏုိင္ပါတယ္။
အသုံးအမ်ားဆုံး input အမ်ိဳးအစားေတြကုိ ေအာက္မွာၾကည့္ပါ။

Text Field မ်ား

<input type="text" /> မ်ဥ္းတစ္ေၾကာင္းပါတဲ့ အသုံးျပဳသူ ရုိက္သြင္းႏုိင္တဲ့ input field အျဖစ္ သတ္မွတ္ပါတယ္။

<Form>
ပထမအမည္ :<input type="text" name="firstname" /><br />
ေနာက္ဆုံးအမည္ :<input type="text" name="lastname" />
</Form> 

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္

ပထမအမည္        : 
ေနာက္ဆုံးအမည္  : 

မွတ္ခ်က္ — Form ကသူ႔ဖာသာသူဆုိ မျမင္ရပါဘူး။ သူ႔ရဲ့ ပုံမွန္ စာသား field ရဲ့ Width က 20 character ျဖစ္ပါတယ္။ 

Password Field

<input type="password" /> password field အျဖစ္ သတ္မွတ္ပါတယ္။

<Form>
လ်ိဳ႕ဝွက္နံပါတ္ :<input type="password" name="pwd" />
</Form> 

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္

လ်ိဳ႕ဝွက္နံပါတ္ : 

မွတ္ခ်က္ — password field ထဲကစာလုံးေတြက အမဲအစက္လုံးေလးေတြလုိပဲျမင္ရမွာပါ။

Radio Button မ်ား

<input type="radio" /> radio button တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ Radio button ေတြက အသုံးျပဳသူေတြကုိ ေရြးစရာေတြရွိတဲ့အနက္ တစ္ခုကုိပဲ ေရြးေစဖုိ႔ သုံးပါတယ္။

<Form>
<input type="radio" name="sex" value="male" /> အမ်ဳိးသား<br />
<input type="radio" name="sex" value="female" /> အမ်ိဳးသမီး
</Form>

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္

 အမ်ဳိးသား
 အမ်ိဳးသမီး

Checkbox မ်ား

<input type="checkbox" /> checkbox တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။ Checkbox ေတြကအသုံးျပဳသူေတြကုိ ၾကိဳက္ရာတစ္ခုခု ျဖစ္ျဖစ္ အမ်ားၾကီးျဖစ္ျဖစ္ အကုန္လုံးပဲ ျဖစ္ျဖစ္ ဘာမွမေရြးပဲ ထားလုိ႔ရေအာင္သုံးတာပါ။

<Form>
<input type="checkbox" name="vehicle" value="Bike" /> စက္ဘီးတစ္စီးရွိတယ္<br />
<input type="checkbox" name="vehicle" value="Car" />ကားတစ္စီးရွိတယ္
</Form> 

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။

စက္ဘီးတစ္စီးရွိတယ္
ကားတစ္စီးရွိတယ္

Submit Button

<input type="submit" /> submit ခလုပ္တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။
submit ခလုပ္က Form ကလာတဲ့ Data ေတြကုိ server ဆီကုိပုိ႔ဖုိ႔သုံးပါတယ္။ Form ရဲ့ Action Attribute ကသတ္မွတ္ထားတဲ့ ပုံစံအတုိင္း Data ေတြက သြားရတာျဖစ္ပါတယ္။ action attribute မွာသတ္မွတ္ထားတဲ့ ဖိုင္ ေတြက လက္ခံတဲ့ input တစ္မ်ိဳးမ်ိဳးနဲ႔ျဖစ္တတ္ပါတယ္။

<Form name="input" action="html_Form_action.asp" method="get">
users name :<input type="text" name="users" />
<input type="submit" value="Submit" />
</Form> 

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။

users name :   

အေပၚက စာသား field မွာစာသားတစ္ခ်ိဳ႕ရုိက္ျပီး "Submit" ခလုပ္ကုိ ႏွိပ္လုိက္ရင္ browser (ဘေရာက္ဆာ) ကသင့္ရဲ့ Input ကုိ "html_Form_action.asp" လုိ႔ေခၚတဲ့ စာမ်က္ႏွာဆီကုိပုိ႔ေပးမွာျဖစ္ပါတယ္။ အဲဒီ႔စာမ်က္ႏွာက သင့္ကုိလက္ခံရရွိေၾကာင္း ျပန္ျပပါမယ္။

---

HTML Form Tag မ်ား

Tag	အေၾကာင္းအရာ
<Form>	အသုံးျပဳေတြရဲ့ input အတြက္ HTML Form အျဖစ္သတ္မွတ္ပါတယ္။
<input />	input control အျဖစ္ သတ္မွတ္ပါတယ္။
<textarea>	multi-line စာသား input control အျဖစ္ သတ္မွတ္ပါတယ္။
<label>	input element တစ္ခုရဲ့ label အျဖစ္ သတ္မွတ္ပါတယ္။
<fieldset>	Form ရဲ့ Element ေတြအတြက္ ပတ္ပတ္လည္ border အျဖစ္ သတ္မွတ္ပါတယ္။
<legend>	fieldset element ရဲ့ေခါင္းစဥ္အျဖစ္ သတ္မွတ္ပါတယ္။
<select>	select list (drop-down list) တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။
<optgroup>	ေရြးခ်ယ္ထားတဲ့ List ထဲက ဆက္ႏြယ္ေနတဲ့ option ေတြရဲ့ အုပ္စုအျဖစ္ သတ္မွတ္ပါတယ္။
<option>	ေရြးခ်ယ္ထားတဲ့ List ထဲက Option တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။
<button>	ခလုပ္တစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။

 http://www.soemoeaung.com

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

Posted in: Html