---
title: HTML Маягтын элементүүд
description: "> Энэ бүлэгт HTML маягтын бүх төрлийн элементүүдийг тайлбарласан болно. ## HTML элементүүд HTML `` элемент нь дараахь хэлбэрийн элементүүдийн нэг эсвэл нэгээс илүү агуулж болно: - `` - `` - `` - `` - `` - `` - ``…"
url: "https://apprentice.mn/docs/html-form-elements/"
updated: "2021-07-09"
category: HTML
---

# HTML Маягтын элементүүд

> Энэ бүлэгт HTML маягтын бүх төрлийн элементүүдийг тайлбарласан болно.

## HTML <form> элементүүд

HTML `<form>` элемент нь дараахь хэлбэрийн элементүүдийн нэг эсвэл нэгээс илүү агуулж болно:

- `<input>`
- `<label>`
- `<select>`
- `<textarea>`
- `<button>`
- `<fieldset>`
- `<legend>`
- `<datalist>`
- `<output>`
- `<option>`
- `<optgroup>`

## <input> Element

Хамгийн их ашиглагддаг хэлбэрийн элементүүдийн нэг нь `<input>` элемент.

`<input>` элементийг`type` шинж чанарааас хамааран хэд хэдэн аргаар харуулах боломжтой.

### Жишээ

      `<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">`

## <label> элемент

`<label>`элемент нь хэд хэдэн хэлбэрийн элементүүдийн шошгыг тодорхойлдог.

`<label>` элемент нь дэлгэц уншигч хэрэглэгчдэд ашигтай байдаг, учир нь хэрэглэгч оролтын элемент дээр анхаарлаа төвлөрүүлэхэд дэлгэц уншигч шошгыг унших болно.

---

## <select> элемент

`<select>`элемент нь доош унах жагсаалтыг тодорхойлдог.

### Жишээ

      `<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select`

`<option>` элементүүд нь сонгож болох сонголтыг тодорхойлдог.

Үндсэн байдлаар, доош унах жагсаалтын эхний зүйлийг сонгосон болно.

Урьдчилан сонгосон сонголтыг тодорхойлохын тулд `selected` шинж чанарыг тохируулгад нэмнэ үү.

### Жишээ

      `<option value="fiat" selected>Fiat</option>`

### Үзэгдэхүйц утга:

 `size` харагдах утгын тоог зааж өгөх шинж чанар:

     `<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>`

### Олон сонголтыг зөвшөөрөх:

Хэрэглэгчид нэгээс илүү утга сонгох боломжийг олгохын тулд `multiple`  шинж чанарыг ашиглана уу.

     `<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>`

## <textarea> элемент

`<textarea>` элемент нь олон мөр оруулах талбарыг (текст бичих том зай) тодорхойлдог.

### Жишээ

     `<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>`

`rows` шинж чанар нь текстийн талбарт харагдах мөрийн тоог заана.

`cols` шинж чанар нь текстийн талбайн харагдахуйц өргөнийг заана.

Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:

      The cat was playing in the garden.

Та мөн текстийн талбайн хэмжээг CSS ашиглан тодорхойлж болно.

### Жишээ

     `<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>`

## <button> элемент

`<button>(товчлуур)` элемент нь дарж болох товчлуурыг тодорхойлно.

     `<button type="button" onclick="alert('Hello World!')">Click Me!</button>`

Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:

**Тэмдэглэл**: `<button>(товчлуур)` элементийн `type(төрөл)` шинж чанарыг үргэлж зааж өгөөрэй. Товчлуурын элементийн хувьд өөр хөтөч өөр өөр анхдагч төрлийг ашиглаж болно.

## <fieldset> болон <legend> Elements

The `<fieldset>` элемент нь холбоотой  маягтын өгөгдлийг нэгтгэхэд ашиглагддаг.

`<legend>` элемент нь `<fieldset>` элементийн тайлбарыг тодорхойлдог.

### Жишээ

      `<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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">
  </fieldset>
</form>`

Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:

## <datalist> элемент

`<datalist>(өгөгдөлийн жагсаалт)` tэлемент нь`<input>(оруулах)` элементийн урьдчилан тодорхойлсон сонголтуудын жагсаалтыг зааж өгдөг.

Хэрэглэгчид өгөгдөл оруулахдаа урьдчилан тодорхойлсон сонголтуудын жагсаалтыг унших болно.

`list` attribute of the `<input>` element, must refer to the `id` attribute of the `<datalist>` element.

`<input>`  элементийн `list(жагсаалт)`шинж чанар нь `<datalist>` элементийн `id` шинж чанарыг харуулах ёстой.

### Жишээ

      `<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>`

## <output> элемент

`<output>(гаралт)` элемент нь тооцооллын үр дүнг илэрхийлдэг (скриптээр гүйцэтгэсэн шиг).

### Жишээ

Тооцоолол хийж, үр дүнг`<output>`  элементээр харуулах:

      `<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>`

## HTML Form Elements

| Tag | Description |
| --- | --- |
| <form> | Хэрэглэгч бөглөх HTML маягтыг тодорхойлно |
| <input> | Оролтыг тодорхойлдог |
| <textarea> | Олон мөртэй оролтыг тодорхойлно (текстийн талбар) |
| <label> | <input> элементийн шошгыг тодорхойлдог |
| <fieldset> | Маягтын холбоотой элементүүдийг нэгтгэх |
| <legend> | <fieldset> элементийн тайлбарыг тодорхойлно |
| <select> | Доош ундаг жагсаалтыг тодорхойлно |
| <optgroup> | Доош унадаг жагсаалтны холбоотой сонголтуудын нэгтгэлийг тодорхойлно |
| <option> | Доош унадаг жагсаалтад байгаа сонголтыг тодорхойлно |
| <button> | Дарах товчлуурыг тодорхойлно |
| <datalist> | Оролтын урьдчилан бэлдсэн сонголтуудыг тодорхойлно |
| <output> | Тооцооллын үр дүнг тодорхойлдог |

##

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-form-elements%2F&linkname=HTML%20%D0%9C%D0%B0%D1%8F%D0%B3%D1%82%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/share](https://www.addtoany.com/share)