---
title: HTML Маягт
description: "> HTML маягтыг хэрэглэгчийн оруулсан мэдээллийг цуглуулахад ашигладаг. Хэрэглэгчийн оруулсан мэдээллийг ихэвчлэн сервер рүү боловсруулахаар илгээдэг. ## элемент HTML `` элемент нь хэрэглэгчдээс мэдээлэл авар зориулалттай цахим маягт юм. ` . form elements . ` `` элемент нь хэрэглэч мэдээлэл…"
url: "https://apprentice.mn/docs/html-forms/"
updated: "2021-07-08"
category: HTML
---

# HTML Маягт

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

First name:

Last name:

## <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>`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-forms%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82)[https://www.addtoany.com/share](https://www.addtoany.com/share)