HTML form элементүүд
<input> элемент
form буюу маягт элементэд хамгийн их хэрэглэгддэг элементүүдийн нэг бол <input> элемент юм.
<input> элемент нь type атрибутын шинж чанараас хамаарч дэлгэцэд хэд хэдэн янзаар харагдах болно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Input элемент</h1>
<form action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Хэрвээ <input> атрибутын type-г орхигдуулах юм бол анхдагч утга нь text байна
<select> элемент
<select> элемент нь drop-down буюу доош уналттай жагсаалтыг тодорхойлно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Select элемент</h1>
<form action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="friuts">Жимс сонгох:</label>
<select id="friuts" name="friuts">
<option value="apple">Алим</option>
<option value="pineapple">Хан боргоцоо</option>
<option value="banana">Банана</option>
</select>
<input type="submit">
</form>
</body>
</html>
<option> элементэд сонгох боломжтой item-г тодорхойлдог бөгөөд анхны утга нь эхний item байдаг.
Тэгвэл <select> шинж чанарыг ашиглан дурын item-г сонгож анхны утгыг өөрчлөх боломжтой.
Олон сонголт хийх /Multiple Selections/
multiple шинж чанарын тусламжтай олон item сонгож болно.
Textarea элемент
<textarea> элементэд олон мөр оролтыг тодорхойлно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Мэдээ оруулах хэсэг</h2>
<form action="http://www.abcd.mn/static/html/forms/submit.py">
<textarea name="message" rows="15" cols="35">Сайн байна уу. Сайтын анхны мэдээ орох гэж байна.</textarea>
<br /><br />
<input type="submit">
</form>
</body>
</html>
rows шинж чанарт дэлгэцэд хэдэн мөр харагдахыг зааж өгдөг.
cols шинж чанарт дэлгэцэд хэдэн багана харагдахыг зааж өгдөг.
Тэмдэглэл: Мөр багана-г өөрчилж бие дааж туршаад үзээрэй.
Button элемент
<button> элементэд товших товчлуурыг тодорхойлно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Button элемент</h2>
<button type="button" onclick="alert('Сайн уу HTML!')">Энд дар!</button>
</body>
</html>
<fieldset> элемент нь form-н датаг бүлэглэдэг.
<legend> элемент нь <fieldset> элементийн тайлбарыг тодорхойлдог.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>fieldset болон legend элемент</h2>
<form action="/action_page.php">
<fieldset>
<legend>Бүртгүүрлэх хэсэг:</legend>
<label for="ner">Таны нэр:</label><br>
<input type="text" id="ner" name="ner" value="Дорж"><br>
<label for="ovog">Таны овог:</label><br>
<input type="text" id="ovog" name="ovog" value="Болд"><br><br>
<input type="submit" value="Нэвтрэх">
</fieldset>
</form>
</body>
</html>
Datalist элемент
<datalist> элемент нь урьдчилан тодорхойлсон жагсаалтаас сонгогдсон item-г <input> элементэд зааж өгдөг.
<input> элемент нь list шинж чанар нь <datalist> элементийн id шинж чанартай холбогдох болно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Data List сонгоод үзээрэй</h2>
<form action="/submit.py">
<input list="friuts" name="friuts">
<datalist id="friuts">
<option value="Алим">
<option value="Банана">
<option value="Хан боргоцой">
<option value="Лийр">
<option value="Аньс">
</datalist>
<input type="submit">
</form>
</body>
</html>
Сэтгэгдэлүүд
