HTML Оролтын Атрибутууд
input буюу оролтын төрөл нь маш олон өөрийн гэсэн онцлогтой Attributes буюу шинж чанаруудтай байдаг. Энэ хичээлээр шинж чанаруудын талаар дэлгэрэнгүй үзье.
HTML Submit Button
value шинж чанар нь оролтын талбарын анхдагч утгыг заадаг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>HTML form submit<h2>
<form action="/submit.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Readonly атрибут
readonly шинж чанар нь оролтын талбарын утгыг зөвхөн унших боломж олгодог бөгөөд текстийг хуулах боломжтой байдаг. Form буюу маягтын мэдээллийг илгээх үед зөвхөн унших боломжтой талбарын утга илгээгдэх болно.
Жишээ нь
<form action="http://www.abcd.mn/static/html/forms/submit.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж" readonly><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form>
Disabled атрибут
disabled шинж чанар нь оролтын талбарын идэвхгүй болохыг заадаг бөгөөд мэдээллийг нь хуулах боломжгүй байдаг. Form буюу маягтын мэдээллийг илгээх үед идэвхгүй болсон оролтын талбарын утга илгээгдэхгүй!.
Жишээ нь
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж" disabled><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form>
Size атрибут
size шинж чанар нь оролтын талбарын өргөнийг тодорхойлдог бөгөөд анхдагч утга нь 20-н тэмдэгтийн өргөнтэй байдаг.
Жишээ нь
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж" size="40"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд" size="10"><br><br>
<input type="submit" value="Submit">
</form>
Тэмдэглэл: size шинж чанар нь text, search, tel, url, email, болон password гэсэн оролтын төрлүүд дээр ажиллах болно.
Maxlength атрибут
maxlength шинж чанарт оролтын талбарт зөвшөөрөгдсөн тэмдэгтийн тоог зааж өгдөг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Тэмдэгтийн хязгаарыг зааж өгсөн</h2>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж" size="40"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд" maxlength="4" size="10"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Тэмдэглэл: maxlength-г тохируулсан тохиолдолд заасан тооноос илүү тэмдэгт хүлээж авахгүй бөгөөд ямар нэгэн алдаа өгөхгүй. Хэрэв ямар нэгэн мэдэгдэл өгөхийг хүсвэл JavaScript код нэмж өгнө.
Pattern атрибут
pattern шинж чанар нь илгээх товч дарах үед оролтын талбарын утгыг шалгадаг regular expression буюу ердийн илэрхийлэл юм.pattern шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: text, date, search, url, tel, email, болон password.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Том эсвэл жижиг үсэг байна.</h2>
<p>pattern дээр латин үсэг [A-Za-z] гэж заасан аа мартаж болохгүй мөн {4} гэж 4-н тэмдэг байна гэсэн байна.</p>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="ner">Нууц код:</label><br>
<input type="text" id="ner" name="ner" value="Болд" pattern="[A-Za-z]{4}" title="Нууц код 4-н үсэг"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Placeholder атрибут
placeholder шинж чанар нь оролтын утга ямар хэлбэр форматтай байхыг жишээ хэлбэрээр орлуулан үзүүлдэг.placeholder шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: text, search, url, tel, email, болон password.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="phone">Утасны дугаар:</label>
<input type="tel" id="utas" name="utas" placeholder="88-005-487" pattern="[0-9]{2}-[0-9]{3}-[0-9]{3}" title="Дугаараа форматын дагуу оруулна уу! 88-005-487"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Required атрибут
required шинж чанар нь илгээхээс өмнө оролтын талбарыг бөглөх ёстойг сануулна.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="phone">Нэр:</label>
<input type="text" id="ner" name="ner" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Autofocus атрибут
autofocus шинж чанар нь хуудас ачаалах үед фокус авсан оролтын талбар идвэхтэй байхыг зааж өгдөг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py">
<label for="phone">Нэр:</label>
<input type="text" id="ner" name="ner" autofocus required><br><br>
<label for="phone">Овог:</label>
<input type="text" id="ovog" name="ovog" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Autocomplete атрибут
autocomplete шинж чанар нь оролтын талбарт хэрэглэгчийн мэдээллийг автоматаар бөглөх боломжтой эсэхийг интернет хөтчийн тусламжтайгаар олгодог.
Оролтын талбар дээр бичиж эхлэх үед өмнө нь бичиж байсан утгуудыг үндэслэж сонголтыг танд харуулах болно.autocomplete шинж чанарууд нь дараах оролтын төрлүүд дээр ажиллана: text, search, url, tel, email, password, datepickers, range, болон color.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Мэдээллээ оруулаад хуудсаа дахин ачаалаад өмнөх мэдээллээ оруулж үзээрэй</h1>
<form target="blank" action="http://www.abcd.mn/static/html/forms/submit.py" autocomplete="on">
<label for="phone">Улс:</label>
<input type="text" id="uls" name="uls"><br><br>
<label for="phone">Нэр:</label>
<input type="text" id="ner" name="ner"><br><br>
<label for="phone">Овог:</label>
<input type="text" id="ovog" name="ovog" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Сэтгэгдэлүүд
