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