MM Tutorials HTML & CSS HTML Forms

HTML Forms

April 30, 2010HTML & CSS

HTML Forms

ဒီတစ်ခေါက် tutorial ကတော့ form ဖြည့်ဖို့အတွက် ရေးနည်းလေးပါ … ဒါကြောင့် မို့လို့လည်း HTML Form လို့ နာမည် ပေးထားပါတယ်။ Form ဆိုတာကတော့ form element တွေ ပါတဲ့ ဧရိယာ တစ်ခုဖြစ်ပါတယ်။ Form elements ဆိုတာကတော့ user တွေကို လိုအပ်တဲ့ အချက်အလက်တွေ (ဥပမာ။  ။ text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc) စတာတွေကို ဖြည့်စွက်ခိုင်းတဲ့ အရာ(ကုဒ်) ပဲ ဖြစ်ပါတယ်။ Form တစ်ခုကို <form> tag နဲ့ သတ်မှတ်ပါတယ်။

ကဲကဲ … first name နဲ့ last name လေး ဖြည့်လိုက်ပါဦး။


<html>

<body>

<form action="">

First name: <input type="text" /><br/><br/>

Last name: <input type="text" />

</form>

</body>

</html>

Username နဲ့ Password လေးပါ ကျေးဇူးပြုပါ …


<html>

<body>

<form action="">

First name: <input type="text" /><br/><br/>

Last name: <input type="text" />

</form>

</body>

</html>

Radio Buttons

Radio buttons တွေပါ … ရေးကြည့်လိုက်ရင် သိမှာပါ …


<html>

<body>

<form>

<input type="radio" value="male" /> Male<br/>

<input name="sex" value="female" /> Female

</form>

</body>

</html>

Checks Boxes

ဒါကတော့ checkboxs လေးတွေနဲ့ ရေးနည်းပါ …


<html>

<body>

<form>

I Like Coffee:

<input type="checkbox" value="Coffe" />

<br/>

I Like MilK:

<input type="checkbox" value="Milk" />

<br/>

I Like Milk Coffee:

<input type="checkbox" value="Milk Coffee" />

</form>

</body>

</html>

Form actions


<html>

<body>

<form name="input" action="ထပ်ချိတ်ဆက်ချင်သည့် (ဥပမာ html) ဖိုင်ကိုထည့်ရန်"

method="get">

Username

<input type="text" />

<input type="submit" value="Submit" />

</form>

</body>

</html>

ဒီတစ်ခါ ကျွန်တော်တို့ Drop Down Menu လေး တစ်ခုလောက် လုပ်ကြည့်တာပေါ့ဗျာ …


<html>

<body>

<form action="">

<select name="Sites">

<option value="myanmartutorials">Myanmartutorials</option>

<option value="myanmaritpro">MyanmarITpro</option>

<option value="problemclean">Problemclean</option>

<option value="nyinaymin">Nyinaymin</option>

</select>

</form>

</body>

</html>

ဒီကုဒ်လေးမှာ <form> … </form>ဆိုတာကတော့ ကျွန်တော့် form ဖြည့်တဲ့ပုံစံ မို့လို့ ထည့်ပေးရတာပါ … <select> … </select> ဆိုတာကတော့ choice ပုံစံလေးဖြစ်အောင် လုပ်ပေးမယ့် ကုဒ်လေးပါ … Drop down menu မှာ ဒီကောင်က အသက်ပါပဲ၊ select နောက်က name ဆိုတာကတော့ ကျွန်တော်တို့ သတ်မှတ်ပေးတာပါ … Search engine တွေကတစ်ဆင့် ရှာရင် name သတ်မှတ်ပေးထားတော့ တွေ့လွယ်တာပေါ့ဗျာ၊ form နောက်က action ကတော့ မထည့်ပေးလည်း ဖြစ်ပါတယ် … နောက်မှ action ထည့်ချင်ရင် အဆင်သင့်ဖြစ်အောင်လုပ် ထည့်ပေးထားတာပါ။

နောက်တစ်ခုကတော့ default value ကို ကိုယ်ကြိုက်တာ ထားတာပါ … အပေါ်က ကုဒ်နဲ့ သိပ်မကွာပါဘူး … ။


<html>

<body>

<form action="">

<select name="Sites">

<option value="myanmartutorials">Myanmartutorials</option>

<option value="myanmaritpro" selected=“selected”>MyanmarITpro</option>

<option value="problemclean">Problemclean</option>

<option value="nyinaymin">Nyinaymin</option>

</select>

</form>

</body>

</html>

ဒီတစ်ခါတော့ ကျွန်တော် ခလုတ်လေးတစ်ခုလုပ်ကြည့်တာပေါ့ဗျာ … press button လေးပါ..။


<html>

<body>

<form action="">

<input type="button" value="Myanmartutorials">

</form>

</body>

</html>

ကွက်လပ်ဖြည့်ပါ … :P 


<html>

<body>

<fieldset>

<legend>

Health information:

</legend>

<form action="">

Height <input type="text" size="3">

Weight <input type="text" size="3">

</form>

</fieldset>

</body>

</html>

ကဲ … Submit လုပ်လိုက်ကြရအောင်ဗျာ …။


<html>

<body>

<form name="input" action="နောက်တစ်မျက်နှာ နာမည်ထည့်ရန် (ဥပမာ။       ။1.htm)" method="get">

First name: <input type="text" value="Myanmar" /><br />

Last name: <input type="text" value="tutorials" /><br />

<input value="Submit" />

</form>

</body>

</html>

ဒီတစ်ခါ checkbox လေးတွေနဲ့ … …


<html>

<body>

<form name="input" action="1.htm" method="get">

I have a bike:

<input type="checkbox" value="Bike" checked="checked" />

<br />

I have a car:

<input type="checkbox" value="Car" />

<br />

I have a airplane:

<input type="checkbox" value=Airplane" />

<br /><br />

<input type="submit" value="Submit" />

</form>

</body>

</html>

ဒီနေရာမှာ 1.htm ဆိုတာကတော့ နောက်ထပ်ချိတ်ချင်တဲ့ ဖိုင်နာမည်ကို ထည့်ရမှာပါ၊ checked=“checked” ဆိုတာကတော့ စတက်လာတာနဲ့ check လုပ်ထားပြီး တက်လာအောင်လို့ ထည့်ရေးပေးတာဖြစ်ပါတယ် … ။

ဒီတစ်ခါ radio buttons တွေနဲ့ …


<html>

<body>

<form name="input" action="1.htm" method="get">

Male: <input type="radio" value="Male" checked="checked" />

<br />

Female: <input type="radio" value="Female" />

<br />

<input type="submit" value="submit" />

</form>

</body>

</html>

ကဲ … ဒီတစ်ခါမေးလ် ပို့တဲ့ ဖောင်လေး လုပ်ကြည့်မယ်ဗျာ …။


<html>

<body>

<form action="mailto:gtu.myowin@gmail.com" method="post"

enctype="text/plain">

<h3>This form sends an e-mail to me.</h3>

Name:<br />

<input type="text" value="yourname" />

<br /><br />

E-mail:<br />

<input type="text" value="yourmail" />

<br /><br />

Comment:<br />

<input type="text" value="yourcomment"

size="40" />

<br /><br />

<input type="submit" value="Send">

<input type="reset" value="Reset">

</form>

</body>

</html>

Coming: HTML Color

Facebook comments:

2 Responses

  1. nayray says:
    May 12, 2010 at 12:04 AM

    အကိုရေ…. ခုလို အသေးစိတ်လေးတွေ နဲ့ ကုဒ်လေးတွေ သိရတာ တကယ်ကို ဝမ်းသာတယ်.. ကျွန်တော့်အတွက်တော့ တကယ့်ကို လေ့လာပညာရစရာတွေပါဗျာ……ကျေးဇူးတင်ပါတယ်ဗျာ… ကျွန်တော်ဒီကနေ လေ့လာနေပါတယ်… အားပေးနေပါတယ်…. အကို့ကို ကျေးဇူးလည်းတင်ပါတယ်….. အကို့ဘဝမှာလည်း လိုချင်တဲ့ ပညာတွေ ရရှိပြီးတော့ ခုထက်မကလည်း အများကို မျှဝေနိုင်ပါစေ၊ ဘဝတစ်လျှောက်လုံး ပျော်ရွှင်ချမ်ေးမြ့နေပါစေလို့ ဆုတောင်းပေးလိုက်ရပါတယ်…….

    Reply
    • လူခါး says:
      October 4, 2011 at 10:28 AM

      ဟုတ်ကဲ့ … ဆုတောင်းပေးတာ တော်တော်စိတ်ချမ်းသာစရာကောင်းပါတယ်၊ အဲဒီဆုတောင်းပြည့်အောင် ကျွန်တော် ကြိုးစားပါ့မယ် … :)

      Reply

Leave a comment


CAPTCHA Image
*

Categories

Releases

Site Informations

MT Community

Copyright © MyanmarTutorials 2012