Энэ бүлэгт 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 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(төрөл) шинж чанарыг үргэлж зааж өгөөрэй. Товчлуурын элементийн хувьд өөр хөтөч өөр өөр анхдагч төрлийг ашиглаж болно.
<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> <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> | Тооцооллын үр дүнг тодорхойлдог |
