Wednesday, June 5, 2013

HTML форм


HTML форм
HTML формыг хэрэглэгчээс янз бүрийн мэдээлэл авахад ашигладаг. Формын элементүүд гэж байх ба энэ нь text fields, textarea fields, drop-down menus, radio buttons. Checkboxes зэрэг утга авна. Элемент бүр өөр өөрийн онцлогтой.  Форм нь <form> гэсэн кодчлолтой хамт <input> кодчлол хамт хэрэглэгддэг. Мөн type гэсэн шинж чанартай, үүгээрээ өгөгдлийн хэлбэрийг зааж өгдөг. Type=”text” гэсэн утга авбал хэрэглэгчээс утга оруулах болможтой болох ба үсэг, тоо. тэмдэгтүүдээс тогтсон өгөгдөлд зориулагдсан байдаг. 

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
Нэр: <input type=”text” name=”НЭР”></br>
Овог: <input type=”text” name=”ОВОГ”></br>
</form>
</body>
</html>
Энэ кодчлолын  үр дүнд дараах хэлбэртэй гарна.




Энэ формд гараас оруулах тэмдэгтийн хэмжээ 20 тэмдэгтээр хязгаарлагддаг.

Харин type=”radio” гэсэн утга авбал хэрэглэгч олон сонголтуудаас зөвхөн ганцыг сонгоход зориулагдсан форм гарна.
Жишээ нь:

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
<input type=”radio” name=”Хүйс”> Эрэгтэй </br>
<input type=”radio” name=”Хүйс”> Эмэгтэй
</form>
</body>
</html>

Энэ кодчлолын  үр дүнд дараах хэлбэртэй гарна.


Type=”checkbox” гэсэн утга авбал хэрэглэгчээс нэг болон хэд хэдэн сонголтуудыг зэрэг авахад зориулагдсан форм гарна.

Жишээ нь:

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
<h4> Өөрийн чадах зүйлээ сонгоно уу. </h4>
<input type=”checkbox” name=”Принтер”> Принтер ашиглаж чадна </br>
 <input type=”checkbox” name=”Канон”> Канон ашиглаж чадна </br>
<input type=”checkbox” name=”Сүлжээ”> Сүлжээний орчинд ажиллаж чадна </br>
<input type=”checkbox” name=”Компьютер”> Компьютер дээр сайн ажиллана. </br>
<input type=”checkbox” name=”Факс”> Факс явуулж, хүлээн авч чадна

</form>
</body>
</html>

Энэ кодчлолын  үр дүнд дараах хэлбэртэй гарна.


Type=”submit” гэсэн утга авбал товч үүсэх ба хэрэглэгч уг товч дээр товшиход, формын агуулгы өөр файл руу илгээдэг. Action шинж чанар нь илгээх файлын нэрийг тодорхойлдог.
Жишээ нь:

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
<form name=”input” action=”html_form_action.asp” method=”get”>
Нэр: <input type=”text” name=”нэр”></br>
<input type=”submit” value=”Орох”>
</form>
</body>
</html>


Ямар нэгэн  тэкст бичээд “орох” товч дээр дарвал танд html_form_action.asp файлыг нээж Нэр гээд таны оруулсан нэрийг бичсэн байх болно. Энэ нь хэрэглэгчийн нэрээр заагдсан файлд нээх үйлдлийг гүйцэтгэдэг.

За бүгдээрээ дараагийн жишээгээр сонголт хийх формыг үүсгэж үзэцгээе.

Гэхдээ энэ нь нэг төрлийн тэмдэглэгээ авах жагсаалт байх болно.

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
            <select name=”Машин”>
                        <option value=”Carina”> Toyota Carina
                        <option value=”markII”> Toyota markII
<option value=”crown”> Toyota crown
<option value=”Land cruiser”> Toyota Land cruiser
</form>
</body>
</html>

Эндээс аль нэг машиныг нь сонгох сонголтын форм үүсгэсэн байна.

Харин одоо бүгдээрээ  хэрхэн товч үүсгэж болохыг жишээгээр үзэцгээе.

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
<input type=”button” value=”Дар!”>
</form>
</body>
</html>
Товч үүсгэсэн жишээ.


За бүгдээрээ дээр үзсэн формуудаа хэрхэн ашиглах талаар үзэцгээе.

<Html>
<body>
<meta http-equiv=”content-Type”content=”text/html; charset=windows-1251”>
            <form>
<form name=”input” action=”html_form_action.asp” method=”get”>
Нэр: <input type=”text” name=”нэр”value=”Bat”></br>
Овог <input type=”text” name=”овог”value=”Dorj”> </br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

No comments: