HTML Forms
HTML Forms
Үр дүнг харахHTML <form> элемент
HTML-д form-г <form> элементэд тодорхойлдог. Тус элемент нь хэрэглэгчийн оруулсан мэдээллийг цуглуулахад оршино.
<form>
...
form элементүүд
...
</form>
HTML form буюу маягт нь дараах элементүүдийг агуулдаг.
Үүнд: text fields, checkboxes, radio buttons, submit buttons, ... гэх мэт өөр төрлийн олон элементүүд багтдаг.
HTML <input> элемент
HTML <input> хамгийн чухал элемент бөгөөд type буюу төрлийн шинж чанараас хамааран хэд хэдэн хэлбэрээр харагддаг.
| Төрөл | Тайлбар |
|---|---|
| <input type="text"> | Нэг мөр текст оруулах талбарыг тодорхойлно |
| <input type="radio"> | Олон сонголтоос нэгийн сонгох талбарыг тодорхойлно |
| <input type="submit"> | Мэдээлэл илгээх товчийг тодорхойлно |
Тэмдэглэл: <input> элементийн төрлийн шинж чанарын талаар дараагийн хичээл дээр илүү дэлгэрэнгүй үзэх болно.
HTML Текст талбар /Text Fields/
HTML <input type="text"> нь нэг мөр текст оруулах талбарыг тодорхойлно. Текст оруулах талбарын анхдагч өргөн нь 20-н тэмдэгтийн урттай байдаг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
</form>
</body>
</html>
HTML Label элемент
Дээрх жишээнд <label> элементийг хэрхэн ашиглаж буйг ажиглана уу.
<label> элемент нь form буюу маягтын маш олон элементийн label буюу шошгыг тодорхойлдог.
<label> элемент нь <input> элементэд ямар утга оруулахыг хэлж өгдөг шошго гэж ойлгож болно.
<label> элемент нь зарим нэг дархад төвөгтэй хэт жижиг элементүүдэд тусалдаг. Жишээ нь /Radio button эсвэл checkbox/ гэх мэт. Ингэхийн тулд <input> элементийн id атрибутын утгыг <label> элементийн for атрибутад зааж өгнө.
HTML Radio Buttons
HTML-д <input type="radio">-д radio button-г тодорхойлдог.
Radio Buttons нь тодорхой хэдэн сонголт дундаас нэгийг сонгох боломж өгдөг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Radio Button, Нэгийг сонгоно</h1>
<form>
<input type="radio" id="apple" name="gender" value="male">
<label for="apple">Алим</label><br>
<input type="radio" id="banana" name="gender" value="female">
<label for="banana">Банана</label><br>
<input type="radio" id="pineapple" name="gender" value="other">
<label for="pineapple">Хан боргоцой</label>
</form>
</body>
</html>
Дээрх жишээ нь дараах байдалтай дэлгэцэд харагдана
HTML Submit Button
HTML-д submit button-г <input type="submit"> гэж тодорхойлдог бөгөөд form-н өгөгдлийг data form-handler буюу боловсруулагчид илгээдэг.
form-handler гэдэг нь сервер дээр байрласан датаг боловсруулах хуудас юм.
form-handler буюу боловсруулагч хуудсыг form элементийн action атрибутад зааж өгнө.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>HTML form submit<h2>
<form action="http://www.abcd.mn/static/html/forms/submit.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form></body>
</html>
Дээрх жишээ нь дэлгэцэд доорх байдалтай харагдана
HTML form submit
Action атрибут
submit товчийг дархад form буюу маягтын гүйцэтгэх үйлдлийг action атрибутад тодорхойлдог.
Ихэвчлэн form буюу маягтад бөглөсөн датаг серверийн боловсруулах хуудсанд илгээхэд ашигладаг.
дээрх жишээнд бид form буюу маягтын датаг cерверт байрлах "submit.py" python хуудсанд илгээсэн. Ингэснээр бид сервер талын скриптэд form-н дата өгөгдлийг агуулж байна.
Жишээ нь
<form action="/submit.py">
Хэрэв action атрибутыг орхигдуулсан бол submit үйлдэл нь тухайн хуудсан хийгдэх болно.
Target атрибут
Илгээсэн үр дүнг шинэ хөтөч, таб эсвэл тухайн цонх дээр нээгдэх эсэхийг target атрибутад зааж өгнө.
Анхдагч утга нь_self буюу тухайн цонх дээр нээгдэх болно.
Жишээ нь
<form action="/submit.py" target="_blank">
Method атрибут
method атрибутыг form буюу маягтын өгөгдөлийг GET эсвэл POST-р илгээхэд ашигладаг.
Жишээ нь
Form буюу маягтын утгыг GET-ээр илгээж үзье
<form action="/get.py" method="get">
Эсвэл
Жишээ нь
Form буюу маягтын утгыг POST-оор илгээж үзье
<form action="/post.py" method="get">
GET-г хэзээ хэрэглэх вэ?
Form буюу маягтын өгөгдлийг илгээхэд HTTP method-н анхдагч утга нь GET байдаг.
GET-р утга дамжуулсан тохиолдолд URL хаягын талбарт form буюу маягтын нэр болон бусад мэдээлэл дамжигдах болдог. Гэвч URL-н урт 2048 тэмдэгтээр хязгаарлагдсан байдаг.
/action_page.php/submit.py?ovog=Дорж&ner=Болд
Хэрэглэгч үр дүнг Bookmark зэрэгт ашиглах тохиолдолд GET-г ашиглаж болно.
Ямар нэгэн нууц мэдээлэл дамжуулах шаардлагатай бол GET-г хэзээ ч ашиглаж болохгүй, GET нь хамгаалалтгүй дата-д зориулагдсан.
POST-г хэзээ хэрэглэх вэ?
Form буюу маягтын мэдээлэлд нууц болон хувийн мэдээлэл агуулсан бол POST-г ашиглана. POST-н нь form-н мэдээллийг URL хаягийн талбарт харуулдаггүй.
POST нь хязгаарлалтгүй тул их хэмжээний өгөгдлийг дамжуулж чадна.
POST-р дамжуулсан өгөгдлийг Bookmark-д хавсаргаж болохгүй.
Name атрибут
input field буюу оролтын талбар бүр name атрибуттай байх ёстой.
Хэрэв name атрибутыг орхигдуулбал тухайн input field буюу оролтын талбарын өгөгдөл илгээгдэхгүй болохыг анхаарна уу.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>HTML form submit<h2>
<form action="http://www.abcd.mn/static/html/forms/name.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form></body>
</html>
Сэтгэгдэлүүд
