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

11 min read

Агуулга

Энэ бүлэгт 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=””> Харуулах оролтын төрлийг тодорхойлно
What are your Feelings

Powered by BetterDocs

Leave a Reply