View Categories

HTML Маягт

3 min read

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 кодыг хөтөч дээр ингэж харуулах болно:






Чек хайрцаг #

<input type="checkbox"> Чек хайрцагийг тодорхойлно.

эг эсвэл түүнээс олон сонголтыг сонгоход зориулагдсан

Жишнээ #

Чек хайрцагтай маягт:

<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>

Powered by BetterDocs

Leave a Reply