- Утга шинж чанар
- Зөвхөн унших шинж чанар
- Идэвхгүй шинж чанар
- Хэмжээ шинж чанар
- Хамгийн их урт шинж чанар
- Хамгийн бага ба хамгийн их шинж чанарууд
- Олон тооны шинж чанар
- Загварын шинж чанар
- Placeholder шинж чанар
- Шаардлагатай шинж чанар
- Алхам шинж чанар
- Автомат фокусын шинж чанар
- Өндөр ба өргөн шинж чанарууд
- Жагсаалтын шинж чанар
- The autocomplete Attribute
- HTML хэлбэр ба оруулах элементүүд
Энэ бүлэгт HTML
<input>элементийн өөр өөр шинж чанаруудыг тайлбарласан болно.
Утга шинж чанар #
value шинж чанар нь оролтын талбайн анхны утгыг заана:
Үндсэн(анхдагч) утгатай оролтын талбарууд:
<form>
<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">
</form> Зөвхөн унших шинж чанар #
The input readonly attribute specifies that an input field is read-only.
Оролтын readonly(зөвхөн унших) шинж чанар нь оролтын талбарыг зөвхөн унших боломжтой болохыг зааж өгдөг.
Зөвхөн унших зориулалттай оролтын талбарыг өөрчлөх боломжгүй (гэхдээ хэрэглэгч үүнийг цэсэнд оруулж, тодруулж, текстийг нь хуулж болно).
Зөвхөн унших оролтын талбарын утгыг маягтыг илгээх үед илгээх болно!
Зөвхөн унших оролтын талбар:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> Идэвхгүй шинж чанар #
Оруулсан disabled(идэвхгүй) шинж чанар нь оролтын талбарыг идэвхгүй болгохыг зааж өгдөг.
Идэвхгүй оролтын талбарыг ашиглах боломжгүй.
Маягтыг илгээхдээ идэвхгүй болгосон оролтын талбайн утгыг илгээхгүй!
Идэвхгүй дутуу оролтын талбар:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> Хэмжээ шинж чанар #
Оролтын size(хэмжээ) шинж чанар нь оролтын талбайн харагдах өргөнийг тэмдэгтээр тодорхойлно.
size -ний үндсэн утга нь 20 байна.
Тэмдэглэл: size шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: текст, хайлт, утас, url, имэйл, нууц үг.
Оролтын талбайн өргөнийг тохируулна уу:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form> Хамгийн их урт шинж чанар #
Оролтын maxlength(Дээд урт) шинж чанар нь оролтын талбарт зөвшөөрөгдөх тэмдэгтийн дээд хязгаарыг зааж өгдөг.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form> Хамгийн бага ба хамгийн их шинж чанарууд #
Оролтынmin(хамгийн бага) болонmax(хамгийн бага) шинж чанарууд нь оролтын талбайн хамгийн бага ба хамгийн их утгыг заана.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
min ба max шинж чанарууд нь дараах оролтын төрлүүдтэй ажилладаг: тоо, хүрээ, огноо, дата-орон нутгийн, сар, цаг, долоо хоног.
Хамгийн их огноо, хамгийн бага огноо, хууль эрх зүйн утгыг тохируулав:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form> Олон тооны шинж чанар #
Оролтын multiple(олон тооны) шинж чанар нь хэрэглэгчид оролтын талбарт нэгээс илүү утга оруулахыг зөвшөөрнө.
multiple шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: имэйл, файл
Олон утгыг хүлээн авах файл байршуулах талбар:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form> Загварын шинж чанар #
Оролтын pattern(загвар) шинж чанар нь маягтыг илгээх үед оролтын талбарын утгыг шалгасан тогтмол илэрхийлэлийг зааж өгдөг.
pattern шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: текст, огноо, хайлт, url, утас, имэйл, нууц үг.
Зөвхөн гурван үсгийг багтаах оролтын талбар (тоо эсвэл тусгай тэмдэгт байхгүй):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form> Placeholder шинж чанар #
placeholder(түр байрлагч) оролтын шинж чанар нь оролтын талбайн хүлээгдэж буй утгыг (түүврийн утга эсвэл хүлээгдэж буй форматын товч тодорхойлолт) тодорхойлсон богино зөвлөмжийг зааж өгдөг.
Богино зөвлөмжийг хэрэглэгч утга оруулахаас өмнө оролтын талбарт харуулна.
placeholder шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: текст, хайлт, url, утас, имэйл, нууц үг.
Оролтын текст бүхий оролтын талбар:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> Шаардлагатай шинж чанар #
required(шаардлагатай) оролтын шинж чанар нь маягтыг илгээхээс өмнө оролтын талбарыг бөглөх ёстойг зааж өгдөг.
requiredшинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: текст, хайлт, url, утас, имэйл, нууц үг, огноо сонгогчид, дугаар, шалгах хайрцаг, радио, файл.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form> Алхам шинж чанар #
Оруулах step(алхам) шинж чанар нь оролтын талбайн хууль ёсны тооны интервалыг зааж өгдөг.
Жишээ: Хэрэв алхам = “3” бол хууль ёсны дугаарууд -3, 0, 3, 6 гэх мэт байж болно.
Зөвлөгөө: Энэхүү шинж чанарыг max ба min шинж чанаруудтай хамт ашиглаж, олон тооны эрх зүйн утгыг бий болгож болно.
step шинж чанар нь дараах оролтын төрлүүдтэй ажилладаг: тоо, хүрээ, огноо, дата-орон нутгийн, сар, цаг, долоо хоног.
Тодорхой хууль ёсны тооны интервал бүхий оролтын талбар:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form> Автомат фокусын шинж чанар #
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
Оролтын autofocus(автомат фокусын) шинж чанар нь хуудас ачаалах үед оролтын талбар автоматаар фокус авах ёстойг зааж өгдөг.
Хуудсыг ачаалах үед “Нэр” оруулах талбарыг автоматаар анхаарч үзээрэй.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form> Өндөр ба өргөн шинж чанарууд #
Оролтын height(өндөр) ба width(өргөн) шинж чанарууд нь <input type="image"> элементийн өндөр ба өргөнийг заана.
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form> Жагсаалтын шинж чанар #
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
Оролтын list шинж чанар нь <оруулах> элементийн урьдчилан тодорхойлсон сонголтуудыг агуулсан <datalist> элементийг хэлнэ.
Жишээ #
<Даталист> -д урьдчилан тодорхойлсон утгатай <оруулах> элемент:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> The autocomplete Attribute #
Оролтын autocomplete шинж чанар нь маягт эсвэл оролтын талбарыг автоматаар бөглөхийг асаах эсвэл унтраах шаардлагатай эсэхийг тодорхойлдог.
Автоматаар бөглөх нь хөтөч утгыг урьдчилан таамаглах боломжийг олгодог. Хэрэглэгч талбар дээр бичиж эхлэхэд хөтөч өмнө оруулсан утгуудад үндэслэн талбарыг бөглөх сонголтыг харуулах ёстой.
autocomplete шинж чанар нь <form> ба дараахь <input> төрлүүдтэй ажилладаг: текст, хайлт, url, утас, имэйл, нууц үг, мэдээлэл тогтоогч, хүрээ, өнгө.
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form> HTML хэлбэр ба оруулах элементүүд #
| Тэмдэглэгээ | Тайлбар |
|---|---|
| <form> | Хэрэглэгчийн оруулах HTML хэлбэрийг тодорхойлно |
| <input> | Оролтын хяналтыг тодорхойлдог |
