Teg ko'p qirrali shakl elementlaridan biri bo'lib, turli xil interfeys elementlarini yaratishga va foydalanuvchi bilan o'zaro aloqani ta'minlashga imkon beradi. Asosan matn maydonlarini, turli tugmachalarni, radio tugmachalarini va tasdiqlash qutilarini yaratish uchun mo'ljallangan. Element bo'lsa-da idish ichiga joylashtirilishi shart emas
Tanlovlar
Teg parametrlarining tavsifi
ALIGN parametri
Tasvir maydonini matn yoki boshqa shakl elementlari bilan qanday qilib tekislashni aniqlaydi.
Sintaksis
Argumentlar
- pastki- Rasmning pastki chegarasini atrofdagi matn bilan tekislang
- chap- Rasmni oynaning chap tomoniga tekislaydi
- o'rta- Tasvirning o'rtasini joriy chiziqning asosiy chizig'iga moslashtirish.
- to'g'ri- Rasmni oynaning o'ng chetiga tekislaydi.
- yuqori- Rasmning yuqori chegarasi joriy satrning eng yuqori elementiga to'g'ri keladi.
Odatiy pastki. Brauzerlar argumentlarni ham qo'llab-quvvatlaydi absbottom, jumboq, boshlang'ichva matn ustuniHTML 4.01 spetsifikatsiyasiga kiritilmagan.
ALT parametri
Alt parametri tasvir maydoni uchun muqobil matnni o'rnatadi. Ushbu matn sizga olish imkonini beradi matnli ma'lumot brauzerda rasmlarni yuklash paytida rasm haqida. Rasmlar brauzer ular haqida ma'lumot olgandan keyin yuklanganligi sababli, tasvirni almashtiradigan matn oldinroq paydo bo'ladi. Va allaqachon yuklanganda, matn o'rnini rasm egallaydi. Brauzerlar muqobil matnni rasm ustiga sichqonchani bosib o'tishda paydo bo'ladigan vosita sifatida ko'rsatadilar.
Sintaksis
Qiymat har qanday mos bo'lishi mumkin matn satri... U ikki yoki bitta tirnoq bilan qo'shilishi kerak.
BORDER parametri
Brauzerlar teg orqali qo'shilgan rasmlarni boshqaradi yorliq bilan yaratilgan rasmlar kabi ... Rasm atrofini ham o'z ichiga olgan holda, siz matni rangiga mos keladigan ramka qo'shishingiz mumkin.
Sintaksis
Yaroqli qiymat - bu piksellardagi har qanday musbat butun son. Odatiy qiymati 0.
CHECKED parametri
Ushbu parametr, tasdiqlash katakchasi yoki radio tugmachasi kabi shakl elementi oldindan belgilanganligini aniqlaydi. Radio tugmalaridan foydalanilganda, guruhning faqat bitta elementini tekshirish mumkin, katakchalar uchun kamida barcha elementlarni belgilashga ruxsat beriladi.
Sintaksis
O'chirilgan parametr
Shakl maydoniga kirishni va modifikatsiyani bloklaydi. Bunday holda, u kul rangda ko'rsatiladi va foydalanuvchi tomonidan faollashtirilishi mumkin emas. Bundan tashqari, bunday maydon Tab tugmachasini bosish orqali sichqoncha yordamida yoki boshqa yo'l bilan fokusni qabul qila olmaydi. Biroq, maydonning ushbu holatini skriptlar yordamida o'zgartirish mumkin.
Sintaksis
MAXLENGTH parametri
O'rnatadi maksimal raqam foydalanuvchi tomonidan matn maydoniga kiritilishi mumkin bo'lgan belgilar. Raqamni terish paytida ushbu raqamga erishilganda, boshqa kiritish mumkin emas.
Sintaksis
NAME parametri
Forma elementi uchun noyob nomni belgilaydi. Odatda, bu nom serverga ma'lumotlarni yuborishda yoki kiritilgan maydon ma'lumotlariga skriptlar orqali kirish uchun ishlatiladi.
Sintaksis
Ism raqamlar va harflarni o'z ichiga olgan belgilar to'plamidir. JavaScript katta-kichikligi bilan ajralib turadi, shuning uchun element nomiga murojaat qilishda ism parametri bilan bir xil imlodan foydalaning.
READONLY parametri
Qachon belgilash kerak readonly parametri qo'shiladi, foydalanuvchi tomonidan matn maydonini o'zgartirish mumkin emas, shu jumladan yangi matn kiritish yoki mavjudini o'zgartirish. Bundan tashqari, bunday maydon Tab tugmachasini bosish orqali sichqoncha yordamida yoki boshqa yo'l bilan fokusni qabul qila olmaydi. Biroq, skriptlar yordamida maydonning holati va mazmuni o'zgarishi mumkin.
Sintaksis
SIZE parametri
Monospace shriftidagi belgilar soni bilan belgilanadigan matn maydonining kengligi Boshqacha qilib aytganda, kenglik bir xil gorizontal kenglikdagi qo'shni harflar soniga o'rnatiladi. Agar shrift hajmi uslublar yordamida o'zgartirilsa, kengligi ham shunga qarab o'zgaradi.
Sintaksis
Haqiqiy qiymat har qanday musbat tamsayıdir.
SRC parametri
Manzil grafik faylrasm maydonidagi veb-sahifada ko'rsatilishi kerak.
Sintaksis
Qiymat - bu faylga to'liq yoki nisbiy yo'l.
TYPE parametri
Kerakli tip parametri brauzerga forma elementining qaysi turi ekanligini bildiradi.
Sintaksis
Argumentlar
- tugmasi- tugma.
- belgilash katakchasi- Bayroqlar. Tavsiya etilganlardan bir nechta variantni tanlashga imkon beradi.
- fayl- Serverga yuborilgan fayl nomini kiritish uchun maydon.
- yashirin- Yashirin maydon. Bu veb-sahifada hech qanday tarzda ko'rsatilmaydi.
- rasm- Rasm maydoni. Rasmni bosganingizda forma ma'lumotlari serverga yuboriladi.
- parol- Oddiy matn maydoni, ammo undan farqli o'laroq, barcha belgilar yulduzcha bilan ko'rsatilgan. Hech kim kiritilgan parolni ko'ra olmasligi uchun mo'ljallangan.
- radio- Kalitlar. Ular bir nechta variantlardan birini tanlash kerak bo'lganda ishlatiladi.
- qayta o'rnatish- Shakl ma'lumotlarini asl qiymatiga qaytarish tugmasi.
- topshirish- Shakl ma'lumotlarini serverga yuborish tugmasi.
- matn- Matn maydoni. Klaviatura yordamida belgilarni kiritish uchun mo'ljallangan.
Sukut bo'yicha matn.
VALUE parametr
Serverga topshirilishi yoki mijoz skriptlari yordamida olinishi kerak bo'lgan ariza elementining qiymatini belgilaydi. Serverga "name \u003d value" juftligi yuboriladi, bu erda nom teg parametrining nomi bilan belgilanadi va qiymat qiymat parametri bilan belgilanadi.
Qiymat parametri element turiga qarab quyidagi rol o'ynaydi:
- tugmalar uchun (kiritish turi \u003d "tugma | tiklash | yuborish") ularga matn sarlavhasini o'rnatadi;
- matn maydonlari uchun (kiritish turi \u003d "parol | matn") avval kiritilgan qatorni belgilaydi. Foydalanuvchi matnni o'chirib tashlashi va o'z belgilarini kiritishi mumkin, ammo "Reset" tugmasi shaklida foydalanilganda foydalanuvchi matni tozalanadi va qiymat parametri kiritilgan holat tiklanadi;
- tasdiqlash qutilari va radio tugmachalari uchun (kirish turi \u003d "checkbox | radio") har bir elementni aniq belgilaydi, shunda mijoz yoki server dasturi foydalanuvchi qaysi elementni tanlaganligini noyob tarzda aniqlay oladi.
Texnik xususiyatlari
Kerakli atribut
Qadriyatlar
Jadval 1 tip atributining mumkin bo'lgan qiymatlarini va natijada maydon maydonining shaklini sanab o'tadi.
Turi | Tavsif | Ko'rinish |
---|---|---|
tugmasi | Tugma. | |
belgilash katakchasi | Belgilash katakchalari. Tavsiya etilganlardan bir nechta variantni tanlashga imkon beradi. | Pivo Choy Qahva |
fayl | Serverga yuborilgan fayl nomini kiritish uchun maydon. | |
yashirin | Yashirin maydon. Bu veb-sahifada hech qanday tarzda ko'rsatilmaydi. | |
rasm | Rasm maydoni. Rasmni bosganingizda forma ma'lumotlari serverga yuboriladi. | |
parol | Oddiy matn maydoni, ammo undan farqli o'laroq, barcha belgilar yulduzcha bilan ko'rsatilgan. Hech kim kiritilgan parolni ko'ra olmasligi uchun mo'ljallangan. | |
radio | Kalitlar. Bir nechta taklif qilingan variantlardan birini tanlash kerak bo'lganda ishlatiladi. | Pivo Choy Qahva |
qayta o'rnatish | Shakl ma'lumotlarini asl qiymatiga qaytarish tugmasi. | |
topshirish | Shakl ma'lumotlarini serverga yuborish tugmasi. | |
matn | Matn maydoni. Klaviatura yordamida belgilarni kiritish uchun mo'ljallangan. |
Jadvalda ko'rsatilgandek HTML5-ga yangi qiymatlar qo'shildi. 2018-04-02 121 2.
Ushbu qiymatlarni brauzer yordamida qo'llab-quvvatlash 1-jadvalda keltirilgan. 3.
Qiymat | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
rang | 21.0+ | 11.01+ | |||||
sana | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
datetime | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
datetime-local | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
elektron pochta | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
oy | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
raqam | 10.0 | 6.0+ | 10.62+ | 5.0+ | 2.3+ | 4.0+ | |
oralig'i | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ | 5.0+ | |
qidirmoq | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 4.0+ | |
tel | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 3.1+ | |
vaqt | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
url | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
hafta | 5.0+ | 10.62+ | 5.0+ | 5.0+ |
Standart qiymat
HTML5 IE Cr Op Sa Fx
HTML5 IE Cr Op Sa Fx
Muallifdan: kirish maydonidagi tip atributidan xabardor bo'lishingiz kerak. Ushbu atribut foydalanuvchi ko'radigan formadagi kirish turini belgilaydi. Agar atribut etishmayotgan bo'lsa yoki eski brauzerda yangi qiymat ishlatilsa, teg hali ham ishlaydi. Standart turi type \u003d "text" ga o'rnatiladi. Bugungi kunda HTML5 shakllaridan foydalanishga imkon beradigan asosiy nuqta, hatto eski brauzerlarni qo'llab-quvvatlasangiz ham. Agar sizda elektron pochta yoki qidirish kabi yangi turlar mavjud bo'lsa, eski brauzerlarda oddiy matn qutisi paydo bo'ladi.
Bizning ro'yxatdan o'tish shakli siz bilgan 10 turdan 4tasidan foydalanadi: katakcha, matn, parol va yuborish. Quyida to'liq ro'yxat HTML5 kirish maydonida mavjud:
HTML5 spetsifikatsiyasida yana 9 ta qo'shimcha turdagi ma'lumotlar mavjud, ular yordamida siz aniq interfeys elementlarini yaratishingiz va mahalliy ma'lumotlarni tekshirishingiz mumkin:
HTML5.1 va WHATWG HTML Living Standard-ga kiritilgan sana bilan bog'liq yana to'rtta tur mavjud, ulardan uchtasi zamonaviy brauzerlarda juda yaxshi qo'llab-quvvatlanadi:
datetime (hech qanday brauzerda qo'llab-quvvatlanmaydi)
Keling, har bir yangi turni batafsil ko'rib chiqamiz va ulardan qanday foydalanish mumkinligini ko'rib chiqamiz.
Qidirmoq
Kirish turini qidirish (type \u003d "search") - bu qidiruv maydoni, bir yoki bir nechtasini kiritish uchun bitta qatorli kirish iboralarni qidirish... Xususiyatlardan:
"Matn turi va qidirish turi o'rtasidagi farq faqat uslubiydir: qidiruv maydonlari oddiy matn maydonlaridan farq qiladigan platformalarda qidirish turi platformaning uslubiga mos keladi."
Ko'pgina brauzerlar qidiruv maydonlarini brauzer yoki operatsion tizim qidirish maydonlariga o'xshash tarzda uslublar. Chrome, Safari, Opera va IE matn terishni boshlashingiz bilan paydo bo'ladigan "x" belgisini bosish orqali matnni o'chirish funktsiyasini qo'shdi (4.5-rasmga qarang). Chrome va Opera shuningdek sana / vaqt maydonlarini tozalaydi va IE11 deyarli barcha turlarga, shu jumladan matnga "x" belgisini qo'shadi.
4.5-rasm. qidiruv maydoni operatsion tizimning qidirish maydonlari uchun yaratilgan
Apple kampaniyasi qurilmalarida qidiruv maydonchalari sukut bo'yicha Chrome, Safari va Opera-da dumaloq burchaklarni yumshatadi, ular takrorlanadi tashqi ko'rinish ichidagi qidirish maydonlari operatsion tizim... Dinamik klaviaturali planshetlarda "O'tish" tugmasi qidirish belgisi yoki so'zlarni qidirish ko'rinishida ko'rinadi. Hammasi qurilmaga bog'liq. Agar siz maxsus atributni qo'shsangiz, Chrome va Opera-da lupa belgisi paydo bo'ladi.
Siz type \u003d "text" dan eski usulda foydalanishingiz mumkin, ammo yangi qidiruv turi saytni topish uchun bosish kerak bo'lgan foydalanuvchilar uchun ingl. Bundan tashqari, yangi tur foydalanuvchilar odatlanib qolgan standart qidirish maydonlariga juda o'xshaydi. HTML5 Herald-da qidiruv yo'q, lekin u shunday bo'lishi mumkin:
< form id = "search" method = "get" > < label for = "s" > Qidirmoq< / label > < input type = "search" id = "s" name = "s" / > < input type = "submit" value = "Qidirmoq" / > < / form > |
Qo'llab-quvvatlamaydigan brauzerlarda qidiruv turi odatdagi matn maydoni sifatida ko'rinadi, shuning uchun uni tegishli joyda ishlatmaslik uchun hech qanday sabab yo'q.
Elektron pochta manzillari
Elektron pochta turi (type \u003d "email") bir yoki bir nechta elektron pochta manzillarini o'rnatish uchun ishlatilishi ajablanarli emas. Bu vergul bilan ajratilgan (bo'sh joy bilan) bir nechta manzillarni ko'rsatish uchun ishlatilishi mumkin bo'lgan bir nechta Boolean atributini qo'llab-quvvatlaydi.
Shaklimizni o'zgartirib, elektron pochta maydonlariga type \u003d "email" qo'ying:
< label for = "email" > Mening elektron pochta manzilim< / label > < input type = "email" id = "email" name = "email" / > |
Agar siz matn turini elektron pochtaga o'zgartirsangiz, vizual o'zgarishlar bo'lmaydi. Kirish hali ham oddiy matn maydoniga o'xshaydi. Biroq, ular boshqacha.
O'zgarishlarni sensorli qurilmada ko'rish mumkin. Elektron pochta maydoniga e'tibor qaratilganda, ko'pchilik sensorli qurilmalar (masalan, iPad yoki Android telefon Chromium bilan) manzilni kiritish uchun optimallashtirilgan klaviatura ko'rsatiladi elektron pochta... Klaviatura 4.6-rasmda ko'rsatilgandek @ belgisi, nuqta, bo'sh joyni aks ettiradi, lekin vergul emas.
4.6-rasm. ostidagi qurilmada maxsus klaviatura mavjud elektron pochta turi iOS boshqaruvi
IN firefox brauzerlari, Chrome, Opera va Internet Explorer 10 bilan noto'g'ri kirish pochta xabarida xato xabari paydo bo'ladi. Bu bitta yoki bir nechta URL sifatida tan olinmagan matnli ariza yuborishga urinayotganda sodir bo'ladi. Odatda xato xabari 4.7-rasmda keltirilgan.
4.7-rasm. noto'g'ri elektron pochta manzili kiritilganligi to'g'risida xato xabari opera brauzeri (chapda) va Firefox (o'ngda)
Izoh: maxsus tasdiqlash xabarlari
Standart brauzer xato xabari sizga yoqmaydimi? O'zingiznikini .setCustomValidity (errorMsg) bilan sozlang. SetCustomValidity faqat bitta parametrni oladi, xato xabari. Agar siz o'zingizning tasdiqlash xabaringizni o'rnatgan bo'lsangiz, unda to'g'ri yozuvdan so'ng, yuborilgan shakl uchun xabar bilan satrni o'chiring (noto'g'ri qiymati):
function setErrorMessages (formControl) (var validityState_object \u003d formControl.validity; if (validityState_object.valueMissing) (formControl.setCustomValidity ("Iltimos, yoshni belgilang (") "))), agar boshqa (validityState_object.rangeUnderflow) (formControl.) \\ "re too young");) else if (validityState_object.rangeOverflow) (formControl.setCustomValidity ("Siz juda yoshsiz");) else if (validityState_object.stepMismatch) (formControl.setCustomValidity ("Tug'ilgan kunlarning yarmini hisoblash?" );) else (// agar kirish to'g'ri bo'lsa, u noto'g'ri bo'lishi kerak yoki aks holda formControl.setCustomValidity ("");) xato bo'lishi mumkin
funktsiya setErrorMessages (formControl) { var validityState_object \u003d formControl. amal qilish muddati; agar (validityState_object. valueMissing) { formControl. setCustomValidity ( "Iltimos, yoshni belgilang (talab qilinadi)") ; ) else if (validityState_object. rangeUnderflow) { formControl. setCustomValidity ("Siz juda yoshsiz"); ) else if (validityState_object. rangeOverflow) { formControl. setCustomValidity ("Siz juda yoshdasiz"); ) else if (validityState_object. stepMismatch) { Sizlarga, blog saytining aziz o'quvchilari, salomlar. Bugun men shunga o'xshash kishi haqida gaplashmoqchiman HTML shakllari... Sizning saytingizning qaysi dvigateli bo'lmasin (cms), u albatta Form va Kiritish teglari yordamida yaratilgan shakllardan, shuningdek Tugma, Belgilangan, Qiymat, Belgilash qutisi, Radio, Checkbox, Submit-ni yoki boshqa shakllarda atributlar va parametrlardan foydalanadi. ... Bunga qo'shimcha ravishda ochiladigan ro'yxatlar va matn maydonlarini yaratish uchun elementlarni qo'shishingiz mumkin - Tanlash, Variant, Textarea, Label, Fieldset, Legend. Bizga nima uchun kerak va zamonaviy veb-saytlarda shakllar qanday ishlaydiXuddi shu sayt qidiruvi () ushbu teglar yordamida yaratiladi va keyin sizning loyihangiz bo'yicha qidirish majburiy bo'ladi. Shuning uchun, ularning qanday joylashtirilganligini va ishlashini tushunish dizayndagi muvaffaqiyatli ish uchun sizga hech qanday zarar etkazmaydi, hatto o'zini reklama qilish va targ'ib qilish bilan ham ortiqcha bo'lmaydi. Shunday qilib, ushbu elementlarni o'rganish zarurligini asoslagan holda, menimcha boshqa savollar bo'lmasligi kerak, shuning uchun to'g'ridan-to'g'ri ularning mumkin bo'lgan variantlarini o'rganishga o'tish vaqti keldi. Ha, shuni ham eslatib qo'ymoqchimanki, biz allaqachon gipermatnlarni belgilash tili mavzusidagi ko'plab materiallarni ko'rib chiqdik, masalan, uchta) va. Shakllar elementlardan iborat bo'lib, uni yaratish uchun asosiy teglar ichiga Form teglaridan har xil teglar kiritiladi - Checked, Value, Checkbox, Radio, Checkbox, Submit va hk. Shunchaki sayt kodining istalgan joyiga o'z kodini qo'yishimiz kerak. qanday ko'rinishi kerakligini teglar va ularning atributlari bilan belgilash orqali. Bu siz kiritgan so'rov uchun yuborish tugmachasi, radio tugmachalari bilan tanlov (bu erda faqat bitta tugmachani bosish mumkin), yuborish tugmachasi () bilan bir nechta matn qutilari va boshqalar bo'lishi mumkin. Masalan, "qidirish" holatida Value atributidan foydalanib, so'rovni kiritish uchun maydon yonida joylashgan tugmachada aniq nima yozilishini belgilashingiz mumkin. Shakllarga kiritilgan ma'lumotlar qo'shimcha ravishda biron bir tarzda qayta ishlanishi kerak. Masalan, ishda mulohaza foydalanuvchi maydonni o'z ismi bilan to'ldirgandan so'ng, o'zining elektron pochtasini va xabarning matnini kiritadi, so'ngra yuborish tugmachasini bosadi, sayt muallifining elektron pochta manziliga ma'lumot yuborishga umid qilish huquqiga ega bo'ladi. Ammo, afsuski, buni faqat bitta gipermatnni belgilash tili () yordamida amalga oshirish mumkin emas. Ushbu maqsadlar uchun sizga kerak bo'ladi maxsus dastur foydalanuvchi yuborish tugmachasini bosgandan so'ng, qayta aloqa maydonlaridan barcha ma'lumotlarni olib, elektron pochta orqali resurs egasiga yuboradigan ishlov beruvchi. Buni qaysi dastur amalga oshiradi, Action atributidan foydalanib o'zingizni ko'rsatishingiz kerak. Odatda, ishlov berish dasturi bu PHP-da yozilgan skriptdir. Shuning uchun, Form yorlig'ining Action atributida siz o'zingizning xosting serveringizda joylashgan ushbu skript fayliga yo'lni ro'yxatdan o'tkazishingiz kerak bo'ladi. Misol tariqasida elektron pochta orqali blogimning RSS lentasiga obuna bo'laman: Biroz tushunarsiz, ehtimol bu boshida ko'rinadi, lekin menimcha, voqea rivojlanib borishi bilan hammasi aniq bo'ladi. Tugmalar, katakchalar va radio tugmachalarni yaratish uchun shakl va kirish teglariHar qanday shakl ochilish va yopilish teglarida bo'lishi kerak Shakl... Bu ularni yaratish uchun bir xil konteyner. Ushbu yorliqda bir qator zarur va ixtiyoriy atributlar mavjud:
Turli xil veb-shakllarni yaratishga imkon beradigan qolgan teglarni ko'rib chiqing. Eng ko'p qirrali Kiritish... Uning ichida Type atributi tayinlanishi kerak, bu ushbu yorliq yordamida yaratilgan HTML formasi aynan qanday bo'lishini aniqlaydi. Kiritish va Tur yordamida quyidagi elementlarni yaratish mumkin:
Kiritishda tugatish yorlig'i yo'q. U bilan yaratilgan veb-shaklning aynan qanday ko'rinishi butunlay atributda ko'rsatilgan parametrga bog'liq. Agar Type ko'rsatilmagan bo'lsa, u holda matn maydoni sukut bo'yicha yaratiladi. Type uchun turli xil qiymatlarga ega bo'lgan Input-da yaratilgan shakllarning namunalariKiritish yorlig'ining boshqa atributlari va ulardan foydalanish misollariQolgan atributlar nima uchun ekanligini ko'rib chiqamiz:
Endi hamma narsani ko'rib chiqaylik kiritish bilan shakllarning namunalari... Matn maydonining ko'rinishi parol kiritish maydonining ko'rinishiga o'xshaydi, shuning uchun biz faqat matn yaratish variantini ko'rib chiqamiz, masalan, elektron pochta manzilini kiritish uchun: Shuni esda tutingki, ushbu formada har ikkala radio tugmachasini yaratish uchun Kiritish yorlig'i ikki marta ishlatiladi. Bundan tashqari, ularning har birida bir xil qiymatga ega bo'lgan Name atributi mavjud (rezultat) va qiymat qiymati har xil (YES va YO'Q). Bu shuni anglatadiki, uni qayta ishlashda, agar biron bir radio tugmachasi tanlansa, ismi nomi bilan yozilgan o'zgaruvchi yuboriladi, ammo bu o'zgaruvchining qiymati qaysi radio tugma tanlanganiga bog'liq bo'ladi. Belgilash katakchalari bilan veb-shakl yaratishning misolini ko'rib chiqamiz: Belgilash qutilari bir vaqtning o'zida bir nechta variantni tanlash imkoniyati bilan radio tugmalaridan farq qiladi. Ishora katakchasida qaysi katakcha joylashganligini aniqlash uchun nom ishlatiladi va qiymat ishlov beruvchiga yuboriladigan qiymatni belgilaydi (agar qiymat ko'rsatilmagan bo'lsa, u holda ushbu katakchaning yonida joylashgan matn ishlov beruvchiga yuboriladi). Select, Option, Textarea, Label, Fieldset, Legend - ochiladigan ro'yxatlar, matn maydonlari va veb-shakllarning boshqa elementlariDastlab, men sizga veb-shakllar nima ekanligini va sayt sahifalarida nima uchun kerakligi haqida ozgina eslatmoqchiman. Ular, birinchi navbatda, har qanday operatsion tizimda mavjud bo'lgan elementlarni foydalanuvchilarga qulay tarzda takrorlash uchun mo'ljallangan: tugmalar, matn kiritish maydonlari, ochiladigan ro'yxatlar, tasdiqlash qutilari, radio tugmalari va boshqalar. Barcha foydalanuvchilar hech qanday qo'shimcha tushuntirishlarsiz ushbu elementlarning maqsadini tushunishadi va agar ular formadagi Html tugmachasini ko'rsalar, uni bosish kerakligini tushunadilar. Bundan tashqari, uning tarkibidagi barcha elementlar (Select, Option, Textarea, Label, Fieldet, Legend kabi) allaqachon tugallangan ish qismlari (konteynerlar) bo'lib, ularga kerakli yorliqlardan kerakli atributlar va parametrlardan foydalanish kifoya qiladi. Brauzerlarning o'zi veb-shaklning ma'lum bir elementini qanday ko'rsatishni bilishadi. To'g'ri, uning bir xil elementini turli xil brauzerlarda namoyish qilish variantlari bir-biridan biroz farq qilishi mumkin, ammo, qoida tariqasida, unchalik katta emas. Shunday qilib Html-dagi veb-shakllar kalitni uzatishga urinish ekan har qanday operatsion tizimda ishlatiladigan elementlar, veb-sayt sahifalariga. Lekin nima uchun ular sayt sahifalarida kerak bo'lishi mumkin? Asos sifatida operatsion tizimlarda xuddi shunday elementlardan foydalaniladigan maqsad uchun - foydalanuvchidan ma'lumotlarni uzatish. Shakllar holatida foydalanuvchidan ma'lumotlar serverga uzatiladi, u erda u maxsus dastur tomonidan qayta ishlanadi (afsuski, gipermatnni belgilash tili ma'lumotlarni qayta ishlashga imkon bermaydi). Shunga qaramay, ma'lumotlar nafaqat serverga, balki, masalan, Form yorlig'ining Action atributida ko'rsatilgan manzilga elektron pochta orqali ham yuborilishi mumkin. Ma'lumotlarni HTML-dan elektron pochtaga yuborishda, maydonlarni to'ldirgan foydalanuvchi, ma'lumotlarni yuborish tugmachasini bosgandan so'ng, o'z kompyuterida ishlatilgan pochta dasturini sukut bo'yicha ishga tushiradi. Bunday holda, Form yorlig'i quyidagi ko'rinishga ega bo'lishi kerak:
Textarea bilan quyidagi atributlardan foydalanish mumkin:
Formadagi ushbu HTML yorlig'i nima uchun kerak?Html Label yorlig'i operatsion tizimlarda mavjud bo'lgan juda qiziqarli xususiyatlarni amalga oshirishga imkon beradi. U erda, agar esingizda bo'lsa, biron bir elementni faollashtirish uchun uni bosish shart emas, siz ushbu element nomini bosishingiz mumkin - u hali ham faollashtiriladi. Bu veb-shakllarda sukut bo'yicha sodir bo'lmaydi - uni faollashtirish uchun Html shaklining elementini bosishingiz kerak. Masalan, katakchani qo'yish uchun katakchani bosishingiz kerak. Belgilash katakchasi yonidagi matnni bosish hech qanday ta'sir qilmaydi. O'zingiz sinab ko'ring: Ko'rib turganingizdek, ushbu elementni faollashtirish uchun matnni bosish foydasiz - uni o'zingiz bosishingiz kerak. Aynan shu Label yorlig'i tuzatishga mo'ljallangan. Bu veb-shakl elementi yonidagi matnni chertish imkoniyatini beradi, bu shubhasiz foydalanishni yaxshilaydi. Ammo shakl va matnning HTML elementini qanday bog'lash mumkin? Buning uchun atributga noyob parametrga ega bo'lgan identifikatorni qo'shing va matnni ochish va yopish yorlig'i teglari bilan o'rab oling. Va bu hammasi emas. Ochilish yorlig'i yorlig'ida, formasi elementining Html yorlig'idagi parametri ID atributi bilan to'liq bir xil bo'lishi kerak bo'lgan For atributini ro'yxatdan o'tkazishingiz kerak. Bunga o'xshash narsa chiqadi: Ko'rib turganingizdek, endi Label-dan foydalanish tufayli veb-shakl elementlari uni bosish bilan emas, balki uning yonida joylashgan matnni bosish orqali ham faollashtirilishi mumkin. Fieldset va Legend - shaklni qismlarga ajratishHtml-dagi katta shakllar (Fieldset) guruhlarga bo'linib, ular ramka bilan o'ralgan va har bir guruh o'z nomiga (Legend) ega ekanligini siz tez-tez ko'rgansiz. Bu faqat ikkita teg bilan amalga oshiriladi: Fieldset va Legend. Ular juftlashgan, ya'ni. ularning ochilishi va yopilishi bo'lishi kerak. Shunday qilib, tarkibiy qismlar guruhini yaratish uchun ushbu qismlarni Fieldset teglarini ochish va yopish bilan o'rashingiz kerak. Va ushbu guruh uchun sarlavha (Afsona) o'rnatish uchun, Fieldset ochilgandan so'ng darhol ochilish va yopilish afsonasidan qurilish yozishingiz kerak, ular orasiga guruh sarlavhasi matnini kiritishingiz kerak. Fieldset va Legend-dan foydalangan holda guruhlarni yaratish misoli: Omad sizga! Yaqinda blog sayti sahifalarida ko'rishguncha orqali ko'proq video tomosha qilishingiz mumkin");"> ![]() Sizni qiziqtirishi mumkin Select, Option, Textarea, Label, Fieldset, Legend - ochiladigan va matn qutisi shaklidagi HTML teglari Teg (ingliz tilidan. kiritish - Kirish) ko'p qirrali shakl elementlaridan biri bo'lib, interfeysning turli qismlarini yaratishga va foydalanuvchi bilan o'zaro aloqani ta'minlashga imkon beradi. Asosan matn maydonlarini, turli tugmachalarni, radio tugmachalarini va tasdiqlash qutilarini yaratish uchun mo'ljallangan. Asosiy atribut elementning turini belgilaydigan - turi. Bu sizga quyidagi shakl elementlarini o'rnatishga imkon beradi: matn maydoni (matn), parol maydoni (parol), radio tugmasi, tasdiqlash qutisi, yashirin maydon, tugma, shaklni yuborish tugmasi (yuborish), tugma formani (qayta tiklash), faylni (faylni) jo'natish maydonini, tasvir (rasm) bilan tugmani va hokazolarni tozalash uchun har bir element o'zining tashqi ko'rinishini va xususiyatlarini aniqlaydigan atributlar ro'yxatiga ega. Bundan tashqari, HTML5-ga o'ndan ortiq yangi atributlar qo'shildi. SintaksisYopish yorlig'i talab qilinmaydi. WAI ARIAStandart rol qiymati yo'q. Rol uchun haqiqiy qiymatlar:
Xususiyatlar
qabul qilishFayllarni yuklash maydoni orqali yuborishingiz mumkin bo'lgan fayl turlari uchun filtrni o'rnatadi. Fayl turi MIME turi sifatida ko'rsatilgan, bir nechta qiymatlar vergul bilan ajratilgan. Agar fayl o'rnatilgan filtrga to'g'ri kelmasa, u faylni tanlash oynasida ko'rsatilmaydi. Faylni yuklash maydoniga taalluqlidir ( ). Brauzerni qo'llab-quvvatlash Standart qiymat altAlt atributi rasm maydoni uchun muqobil matnni o'rnatadi. Ushbu matn brauzerda rasmlarni yuklash o'chirilganda rasm haqida matnli ma'lumot olish imkonini beradi, shuningdek qidiruv tizimlari uchun mo'ljallangan. Sintaksis
Qadriyatlar Har qanday mos keladigan matn satri. Standart qiymat avtomatik to'ldirishUshbu atribut ariza maydonlarini avval ularga kiritilgan matn bilan to'ldirishga yordam beradi. Qadriyatlar brauzer tomonidan saqlanadi va almashtiriladi, xavfsizlik nuqtai nazaridan avtomatik to'ldirish foydalanuvchi tomonidan brauzer sozlamalarida o'chirib qo'yilishi mumkin va bu holda avtomatik to'ldirish atributi tomonidan boshqarilishi mumkin emas. Matnning birinchi harflarini kiritishda avval saqlangan qiymatlar ro'yxati ko'rsatiladi, ulardan kerakliini tanlashingiz mumkin. Muayyan forma maydonini avtomatik to'ldirish uning nomi atributi bilan bog'liq va qiymat o'zgartirilganda yo'qoladi. Sintaksis
Qadriyatlar
Standart qiymat Brauzer sozlamalariga bog'liq. avtofokusAvtomatik ravishda shakl maydoniga diqqatni o'rnatadi. Bunday maydonda siz darhol matnni sichqoncha kursori bilan aniq bosmasdan yozishingiz mumkin. Sintaksis
Qadriyatlar Standart qiymat Odatiy bo'lib, avtofokus atributi o'rnatilmagan. tekshirildiUshbu atribut tasdiqlash katakchasi yoki radio tugmachasi kabi shakl elementining oldindan belgilanganligini aniqlaydi. Radio tugmachasini ishlatishda guruhning faqat bitta elementini tekshirish mumkin, katakchalar uchun kamida barcha elementlarni tekshirish mumkin. Sintaksis
Qadriyatlar Standart qiymat dirnameAgar dirname atributi mavjud bo'lsa, serverga ism / qiymat juftligi yuboriladi, bu erda nom dirname atributi bilan belgilanadi va qiymati brauzer bilan almashtiriladi. Chapdan o'ngga matn uchun qiymat ltr, o'ngdan chapga (masalan, ibroniycha) uchun rtl bo'ladi. Sintaksis
Qadriyatlar Parametr nomi sifatida xizmat qiladigan ixtiyoriy matnli satr. Odatda, satr oxiriga dir qo'shiladi, bu parametr matn yo'nalishini ko'rsatishini bildiradi. Standart qiymat nogironShakl maydoniga kirishni va modifikatsiyani bloklaydi. Bunday holda, u kul rangda ko'rsatiladi va foydalanuvchi tomonidan faollashtirilishi mumkin emas. Bundan tashqari, bunday maydon Tab tugmachasini bosish orqali sichqoncha yordamida yoki boshqa yo'l bilan fokusni qabul qila olmaydi. Biroq, maydonning ushbu holatini skriptlar yordamida o'zgartirish mumkin. Maydonda bloklangan qiymat serverga uzatilmaydi. Sintaksis
Qadriyatlar Standart qiymat Ushbu xususiyat sukut bo'yicha o'chirilgan. shaklMaydonni identifikatori bilan forma bilan bog'laydi. Bunday ulanish maydon tashqarida joylashgan bo'lsa kerak Qadriyatlar Shakl identifikatori (element id atributining qiymati |