HTML маягтыг хэрэглэгчийн оруулсан мэдээллийг цуглуулахад ашигладаг. Хэрэглэгчийн оруулсан мэдээллийг ихэвчлэн сервер рүү боловсруулахаар илгээдэг.
<form> элемент #
HTML <form> элемент нь хэрэглэгчдээс мэдээлэл авар зориулалттай цахим маягт юм.
<form>
.
form elements
.
</form> <form> элемент нь хэрэглэч мэдээлэл оруулах төрөл бүрийн элементүүдийн агуулах юм, тухайлбал: текстийн талбар(text field), чекбокс(checkbox), радио товчлуурууд(radio buttons), илгээх товчлуурууд(submint buttons) гэх мэт.
<input> элемент #
HTML <input>бол хамгийн их хэрэглэгддэг маягт(form) элемент юм.
An <input> элемент нь type шинж чанарыг ашиглан төрөл бүрээр харагдаж болно.
Доорх жишээг харна уу:
| Type | Description |
|---|---|
| <input type=”text”> | Нэг мөрөнд текст оруулах талбарыг харуулна |
| <input type=”radio”> | Радио товчлуурыг харуулна (олон сонголтоос аль нэгийг нь сонгоход зориулагдсан) |
| <input type=”checkbox”> | Чек хайрцгийг харуулна (тэг эсвэл түүнээс олон сонголтыг сонгоход зориулагдсан) |
| <input type=”submit”> | Оруулах товчийг харуулна (маягтыг илгээхэд зориулж) |
| <input type=”button”> | Дарах товчлуурыг харуулна |
Text Fields #
<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> Дээрх HTML кодыг хөтөч дээр ингэж харагдах болно:
<label> элемент #
Notice the use of the <label> element in the example above.
Дээрх жишээнд <label> элементийг ашиглах талаар хараарай.
The <label> tag defines a label for many form elements.
<label> тэмдэглэгээ нь олон маягт(form) элементүүдийн шошгыг тодорхойлдог.
<label> элемент нь дэлгэц уншигчтай хэрэглэгчдэд ашигтай байдаг, учир нь хэрэглэгч оролтын(input) элемент дээр анхаарлаа төвлөрүүлэхэд дэлгэц уншигч шошгыг унших болно.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
<label>тэмдэглэгээгийн for шинж чанар <input> элементийн id шинж чанар адилхан утгатай. Энэ хүү шинж чанарууд нь элементүүдтэйгээ хамтдаа байх ёстой.
Радио товчлуур бүхий маягт:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="моторцикл">
<label for="vehicle1"> Надад моторцикл байгааe</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="машин">
<label for="vehicle2"> Надада машин байгаа</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value=" усан онгоц">
<label for="vehicle3"> Надад усан онгоц байгааt</label>
</form Дээрх HTML кодыг хөтөч дээр ингэж харагдах болно:
Оруулах товч #
<input type="submit"> маягтын өгөгдлийг маягт боловсруулагч руу илгээх товчлуурыг тодорхойлдог.
Маягт боловсруулагч нь ихэвчлэн сервер дээрх оролтын өгөгдлийг боловсруулах скрипт бүхий файл байдаг.
The form-handler is specified in the form’s action attribute.
Маягт боловсруулагчийг маягтын 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> Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<input>-ийн нэр өгөх #
Notice that each input field must have a name attribute to be submitted.
Оролтын талбар(input field) бүр 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> 
