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>