---
title: HTML Оролтын төрлүүд(Input Types)
description: "> Энэ бүлэгт HTML ``  элементийн янз бүрийн төрлийг тайлбарласан болно. ## HTML оролтын төрлүүд(input types) HTML дээр ашиглаж болох оролтын төрлүүд энд байна. - `` - `` - `` - `` - `` - `` - `` - ``…"
url: "https://apprentice.mn/docs/html-input-types/"
updated: "2021-07-09"
category: HTML
---

# HTML Оролтын төрлүүд(Input Types)

> Энэ бүлэгт HTML `<input>`  элементийн янз бүрийн төрлийг тайлбарласан болно.

## HTML оролтын төрлүүд(input types)

HTML дээр ашиглаж болох оролтын төрлүүд энд байна.

- `<input type="button">`
- `<input type="checkbox">`
- `<input type="color">`
- `<input type="date">`
- `<input type="datetime-local">`
- `<input type="email">`
- `<input type="file">`
- `<input type="hidden">`
- `<input type="image">`
- `<input type="month">`
- `<input type="number">`
- `<input type="password">`
- `<input type="radio">`
- `<input type="range">`
- `<input type="reset">`
- `<input type="search">`
- `<input type="submit">`
- `<input type="tel">`
- `<input type="text">`
- `<input type="time">`
- `<input type="url">`
- `<input type="week">`

---

## Текст оруулах төрөл

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

## Нууц үг оруулах төрөл

`<input type="password">` **нууц үгийн талбарыг** тодорхойлно:

### Жишээ

      `<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>`

This is how the HTML code above will be displayed in a browser:

## Input Type Submit

`<input type="submit">`маягтын өгөгдлийг **маягт боловсруулагч** руу **илгээх** **товчлуурыг** тодорхойлдог..

Маягт боловсруулагч нь ихэвчлэн оролтын өгөгдлийг боловсруулах скрипт бүхий серверийн хуудас юм.

Маягт боловсруулагчийг маягтын `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="оруулах">
</form>`

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

Хэрэв та илгээх товчлуурын утгын шинж чанарыг орхигдуулсан бол товчлуур нь үндсэн текстийг авах болно:

     `<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">
</form`

## Дахин тохируулах оролтын төрөл

`<input type="reset">` бүх маягтын утгыг үндсэн утга болгон дахин тохируулах товчийг тодорхойлно.

### Жишээ

      `<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">
  <input type="reset">
</form>`

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

## Input Type Radio

`<input type="radio">` р**адио товчлуурыг** тодорхойлдог.

Радио товчлуурууд нь хэрэглэгчдэд хязгаарлагдмал тооны сонголтоос ЗӨВХӨН НЭГийг нь сонгох боломжийг олгодог.

### Жишээ

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

`<input type="checkbox">`чагтлах хайрцгийг тодорхойлдог.

Шалгах хайрцаг нь хэрэглэгчид хязгаарлагдмал тооны сонголтуудын тэг ба түүнээс дээш сонголтыг сонгох боломжийг олгодог.

### Жишээ

      `<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>`

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

## Оролтын төрөл товчлуур

`<input type="button">` **товчлуурыг** тодорхойлно:

### Жишээ

      `<input type="button" onclick="alert('Сайн байна уу!')" value="Над дээр дар!">`

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

## Оролтын төрөл Өнгө

`<input type="color">` нь өнгө оруулах ёстой оролтын талбарт ашиглагддаг.

### Жишээ

     `<form>
  <label for="favcolor">Дуртай өнгөө сонгоорой:</label>
  <input type="color" id="favcolor" name="favcolor">
</form`

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

## Оролтын төрөл Өгөгдөл

`<input type="date">` огноог багтаасан оруулах талбарт ашигладаг.

### Жишээ

     `<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>`

Та `min` болон `max` шинж чанаруудыг ашиглан огноонд хязгаарлалт нэмж болно.

     `<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>`

## Оролтын төрөл Цаг-Дотоодын

`<input type="datetime-local">` цагийн бүсгүй  цаг оруулах талбарыг зааж өгдөг.

### Жишээ

     `<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>`

## Оролтын төрөл Имайл

`<input type="email">` нь имэйл хаяг агуулсан оруулах талбарт ашиглагддаг.

Зарим ухаалаг гар утаснууд имэйлийн төрлийг таньдаг бөгөөд имэйлийн оролтыг тохируулахын тулд гарт “.com” нэмнэ.

### Жишээ

      `<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>`

## Оролтын төрөл файл

`<input type="file">` файл сонгох талбар болон файл байршуулах “**Browse**” товчийг тодорхойлдог.

### Жишээ

      `<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form`

## Оролтын төрөл Нуугдсан

`<input type="hidden">` далд оролтын талбарыг тодорхойлдог (хэрэглэгчид харагдахгүй).

Нууц талбар нь вэб боловсруулагчдад маягт илгээхэд хэрэглэгчид харж, өөрчлөх боломжгүй өгөгдлийг оруулах боломжийг олгодог.

### Жишээ

     `<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>`

## Оролтын төрөл Он сар

`<input type="month">` хэрэглэгчид сар, жилийг сонгох боломжийг олгодог.

### Жишээ

     `<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>`

## Оролтын төрөл Дугаар

`<input type="number">`**тоон оролтын** талбарыг тодорхойлдог.

Та ямар тоо хүлээн авахыг хязгаарлаж болно.

Дараах жишээнд тоон оролтын талбарыг харуулсан бөгөөд үүнд 1-ээс 5 хүртэлх утгыг оруулах боломжтой.

### Жишээ

      `<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>`

## Input Restrictions

Here is a list of some common input restrictions:

| Attribute | Description |
| --- | --- |
| checked | Хуудсыг ачаалах үед оролтын талбарыг урьдчилан сонгох ёстойг зааж өгсөн (type = “checkbox” эсвэл type = “radio” хувьд) |
| disabled | Оролтын талбарыг идэвхгүй болгохыг зааж өгнө |
| max | Оролтын талбайн хамгийн их утгыг тодорхойлно |
| maxlength | Оролтын талбарын тэмдэгтийн хамгийн их тоог заана |
| min | Оролтын талбайн хамгийн бага утгыг тодорхойлно |
| pattern | Оролтын утгыг шалгахын тулд тогтмол илэрхийлэлийг зааж өгдөг |
| readonly | Оролтын талбарыг зөвхөн уншихыг зааж өгдөг (өөрчлөх боломжгүй) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Оруулах талбайн хууль ёсны тооны интервалыг тодорхойлно |
| value | Оролтын талбарын үндсэн утгыг заана |

 

     `<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>`

## Оролтын төрөл Хайх

`<input type="search">` нь хайлтын талбарт ашиглагддаг (хайлтын талбар нь ердийн текстийн талбар шиг ажилладаг).

### Жишээ

      `<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>`

## Оролтын төрөл Утас

`<input type="tel">` нь утасны дугаар агуулсан оролтын талбарт ашиглагддаг.

### Жишээ

      `<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>`

## Оролтын төрөл Цаг

`<input type="time">хэрэглэгчид цагийг сонгох боломжийг олгодог (цагийн бүсгүй).`

### Жишээ

     `<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>`

## Оролтын төрөл Url

`<input type="url">` нь URL хаягийг агуулсан оролтын талбарт ашиглагддаг.

### Жишээ

     `<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>`

## Оролтын төрөл 7 хоног

`<input type="week">`хэрэглэгчид долоо хоног, жилийг сонгох боломжийг олгодог.

### Example

     `<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>`

## HTML Оролтын төрөлийн шинж чанар

| Tag | Description |
| --- | --- |
| <input type=””> | Харуулах оролтын төрлийг тодорхойлно |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-input-types%2F&linkname=HTML%20%D0%9E%D1%80%D0%BE%D0%BB%D1%82%D1%8B%D0%BD%20%D1%82%D3%A9%D1%80%D0%BB%D2%AF%D2%AF%D0%B4%28Input%20Types%29)[https://www.addtoany.com/share](https://www.addtoany.com/share)