pattern
HTML <input> pattern atributi
Misol
Faqat uchta harfdan iborat bo‘lishi mumkin bo‘lgan (raqamlar va maxsus belgilarsiz) kiritish maydoniga ega HTML forma:
<form action="/action_page.php">
<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"><br><br>
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
pattern atributi forma yuborilganda
<input> elementining qiymati tekshiriladigan muntazam ifodani (regular expression) belgilaydi.
Eslatma: pattern atributi quyidagi kiritish turlari bilan ishlaydi: text, date, search, url, tel, email va password.
Maslahat: Foydalanuvchiga yordam berish maqsadida andozani tavsiflash uchun global title atributidan foydalaning.
Maslahat: Regulyar ifodalar haqida JavaScript darsligimizdan ko‘proq bilib oling.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar atributni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Atribut | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintaksis
<input pattern="regexp">
Atribut qiymatlari
| Qiymat | Tavsif |
|---|---|
| regexp | <input> elementining qiymati tekshiriladigan muntazam ifodani (regular expression) belgilaydi |
Ko‘proq misollar
Misol
Kamida 8 ta belgidan iborat bo‘lishi shart bo‘lgan type="password" turidagi <input> elementi:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Misol
Kamida bitta raqam, bitta katta va bitta kichik harfni o‘z ichiga olgan, kamida 8 ta belgidan iborat bo‘lishi kerak bo‘lgan type="password" turidagi <input> elementi:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Misol
Quyidagi tartibda bo‘lishi shart bo‘lgan type="email" turidagi <input> elementi: belgilar@belgilar.domen (belgilar, undan keyin @ belgisi, so‘ng yana belgilar va keyin "."
"." belgisidan keyin a dan z gacha bo‘lgan kamida 2 ta harf qo‘shing:
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Misol
Quyidagi belgilar bo‘lishi MUMKIN BO‘LMAGAN type="search" turidagi <input> elementi: ' yoki "
<form action="/action_page.php">
<label for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Misol
http:// yoki https:// bilan boshlanishi va undan keyin kamida bitta belgi kelishi shart bo‘lgan type="url" turidagi <input> elementi:
<form action="/action_page.php">
<label for="website">Homepage:</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
❮ HTML <input> tegi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!