View Categories

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

7 min read

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

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

Personalia:




<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> Тооцооллын үр дүнг тодорхойлдог

#

Powered by BetterDocs

Leave a Reply