Global HTML atributlari. Global atributlar atributlari HTML5
Muallifdan: Shubhasiz, siz har kuni tarmoqda kamida bitta shakl bilan aloqada bo'lasiz. Siz tarkibni qidirasizmi yoki Facebook sahifasida hisob qaydnomangizni kiriting - veb-ilova shakllari bo'yicha eng keng tarqalgan vazifalardan biridir. Dizaynerlar va ishlab chiquvchilar uchun shakllar yaratish ba'zi monotiya, ayniqsa ma'lumotlar tekshiruvi skriptlari bilan ajralib turadi. HTML5-dagi ko'plab yangi atributlar, kirish va boshqa elementlar elementlari va boshqa elementlar elementlarini aks ettiradi.
Ushbu maqolada biz yangi atributlarni o'rganishga qaratamiz va quyidagilar ma'lumotlarga kirish turlarini ko'rib chiqamiz.
Ko'rinib turibdiki, yangi xususiyatlar foydalanuvchilarga taassurot qoldirganingizda, hayotimizni sezilarli darajada osonlashtiradi. Eng jozibali nima? Siz ularni hozir ishlatishingiz mumkin. Biz HTML5 shakllarining qisqa tarixi bilan boshlaymiz.
Ushbu maqola - kitoblarning 6-bobidan parcha HTML5 va CSS3: Tarmoq evolyutsiyasi (NOBML5 va CSS3-ni o'rganish) Ko'plab Kristofer Merkuma, Richard Klark va Richard Klark, Divya Manian) ARPES nashriyot uyi tomonidan nashr etilgan.
Eslatma: Ushbu maqola kitobdan parchalanganligi sababli, ekran rasmlari yaratilgan paytdan boshlab brauzer va ma'lumotlar kirishi turlari o'zgarishi mumkin. Bundan tashqari, nashr etilgan paytdan boshlab brauzerning qo'llab-quvvatlashi kengayishi mumkin, shuning uchun hozirgi holati to'g'risida ma'lumot berilgan havolalarga murojaat qiling.
HTML5 shakllari tarixi
HTML5-ning shakllari dastlab 2,0 shakl deb ataladigan spetsifikatsiyani keltirib chiqardi, bu esa yangi shakllarning yangi turlarini qo'shadi. Opera-da boshlangan va keyin Opera Opera Ovin Xikson (Ian Xikson) tomonidan 2005 yil boshida W3C tomonidan tasdiqlangan. Ish dastlab W3C tomonidan o'tkazildi. Keyin u WebML5 spetsifikatsiyasining "WhatwG" (Whatwg) WebML-ni HTML5 spetsifikatsiyasining "HTML5" spetsifikatsiyasini yaratish uchun 1.0 arizalar bilan birlashtirildi.
HTML5 dizayn tamoyillarini qo'llash
HTML5 shaklning eng yaxshi xususiyatlaridan biri bu siz darhol barcha yangi ma'lumotlar va atributlarning barcha yangi turlarini qo'llashingiz mumkin. Ular qo'shimcha chiplar, xakerlar va boshqa yamalarni talab qilmaydi. Ularning barchasi "qo'llab-quvvatlanadigan", ammo zamonaviy brauzerlarda ularni chinakam qo'llab-quvvatlaydigan zamonaviy brauzerlarda ular ajoyib narsalarni yaratishga qodir - va ularni tushunmaydigan brauzerlarda chiroyli jihatdan tanazzul. Bularning barchasi HTML5 dizayn tamoyillari bilan bog'liq. Bunday holda, biz ayniqsa go'zal tanazzul printsipiga murojaat qilamiz. Umuman olganda, bu funktsiyalarni darhol qo'llash murosasiz bo'lmaydi. Aslida, bu siz hammamiz sayyoramizdan oldinda ekanligingizni anglatadi.
HTML5 forma atributlari
Ushbu maqolada biz quyidagi 14 ta yangi atributni ko'rib chiqamiz.
joy olish joyi.
Birinchisi, yaqinda HTML4-da qiymat atributlaridan foydalangan holda, matn agregatsiyasini o'rnatishga imkon beradigan maksimal atribut. Bu faqat qisqacha tavsiflar uchun qo'llanilishi mumkin. Uzoq vaqt davomida sarlavha atributi foydalaning. HTML4-ning farq shundaki, matn faqat maydon bo'sh bo'lganda va diqqat markazida ko'rsatilgan. Dala diqqat markaziga kirishi bilanoq (masalan, sichqonchani yoki maydonni bosganingizda) va siz bosib chiqarishni boshlaysiz, matn shunchaki yo'qoladi. Safaridagi qidiruv maydoniga juda o'xshash.
Keling, pul vakili atributini qanday amalga oshirishni aniqlaymiz.
<
input
type
=
"text"
name
=
"user-name"
id
=
"user-name"
placeholder
=
"kamida 3 ta belgi"
>
Mana bunday! Siz qanday fikrda ekaningizni eshitaman: "Unda nima diqqatga sazovor? Men buni butun hayotim JavaScript-da qildim. " Ha to'g'ri. Biroq, html5 bilan u brauzerning bir qismiga aylanadi, ya'ni kamroq arzonroq brauzer eritmasiga erishish uchun kamroq skriptni yozish kerakligini (hatto JavaScript o'chirilgan bo'lsa). Raqam Chrome-dagi yalpi matn atributining ishlashi ko'rsatilgan.
Bajaruvchisining atributini qo'llab-quvvatlamaydigan brauzerlar buni e'tiborsiz qoldiradilar, shuning uchun u bajarilmaydi. Biroq, burab uni yoqing, brauzerlar uning qo'llab-quvvatlashini ta'minlaydigan va sizning saytingizni istiqbolli bo'lishini kafolatlaysiz. Barcha zamonaviy brauzerlar umumiy matnni qo'llab-quvvatlaydi.
autofuse.
Autofokus aniq nimani anglatadi. Uni kiritish uchun uni kompyuter ko'rsatganda avtomatik ravishda yo'naltirilgan. To'xtatuvchisi bo'lgani kabi, biz o'tmishda avtofokus uchun JavaScript-dan foydalandik.
Biroq, an'anaviy JavaScript usullariga jiddiy muammolar mavjud. Masalan, agar foydalanuvchi shaklni to'ldirishni boshlasa, skript to'liq yuklanmaguncha, u (yoqimsiz) birinchi maydon shaklida yuklangandan keyin qaytariladi. HTML5-da avtofokusning atributi ushbu muammoni chetlab o'tib, hujjatni yuklab olishda diqqatni jalb qiladi, JavaScript yukini kutish kerak emas. Biroq, biz faqat ushbu sahifalar shaklidagi shakl (Google turi) uchun imkoniyatlarning oldini olish uchun murojaat qilishni tavsiya etamiz (Google turi).
Bu Boolean atributi (XHTML5-ni yozganingizdan tashqari) va bu erda bajarilganda bajariladi:
<
input
type
=
"text"
name
=
"first-name"
id
=
"first-name"
autofocus
>
U barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi va avtomatik brauzerlarni ishlamaydigan joyga ega bo'lgan transport egasi kabi uni e'tiborsiz qoldiradi.
Eslatma: yangi HTML5-kambag'al shakl xususiyatlari. Bu shunchaki ular mavjud bo'lsa, ular o'rnatilgan va o'rnatilmagan bo'lsa, agar yo'q bo'lsa. HTML5-da ular bir necha xil usullarda yozilishi mumkin.
Biroq, XHTML5-ni yozayotganda siz Autofocus \u003d "Autofus" uslubini qo'llashingiz kerak.
avtoulov.
Avtomatik atribut foydalanuvchilarga oldingi ma'lumotni joriy etishga asoslangan shakllarni to'ldirishga yordam beradi. Atribut IE5,5 martadan beri ishlatiladi, ammo html5-ning bir qismi sifatida nihoyatda standartlashtirildi. Odatiy bo'lib, u faol. Bu shuni anglatadiki, biz asosan uni qo'llashimiz shart emas. Biroq, agar siz har safar to'ldirilgandan keyin forma maydoniga kirishni talab qilmoqchi bo'lsangiz (brauzer kontasi Auther maydonidan farqli o'laroq), so'ngra quyidagicha bajaring:
<
input
type
=
"text"
name
=
"tracking-code"
id
=
"tracking-code"
autocomplete
=
"off"
>
Dala sohasi sohasi shakldagi avtoulovning har qanday avtoulovi o'rnatilgan holatini tasdiqlaydi.
talab qilinadi.
Kerakli atribut topshirishni talab qilmaydi; Autofocus kabi, u siz undan nimani kutayotganingizni qiladi. Agar siz brauzer forma maydoniga qo'shsangiz, siz formani yuborishdan oldin foydalanuvchidan ushbu maydonga ma'lumotlarni kiritishni talab qilasiz. U asosiy shaklni tasdiqlashni o'zgartiradi, bu vaqtda JavaScript-dan foydalanib, uni yanada qulayroq va tejashga aylantirmoqda. Talab qilinadi avtofokus sifatida boolon atributi. Keling, buni amalda ko'rib chiqaylik.
<
input
type
=
"text"
id
=
"given-name"
name
=
"given-name"
required
>
Hozirgi vaqtda talab qilinadigan 9.5+, Firefox 4+, Safari 5+, Safari 5+, Safari 5+, Chrome 5+, boshqa brauzerlarning mijozlar tomonidagi dalalarni to'ldirish uchun skriptlarni yozishni davom ettirishingiz kerak ( * Xe- Xe * ya'ni!). Opera, Chrome va Firefox foydalanuvchiga xato xabari shaklini yuborishda ko'rsatadi. Ko'plab xato brauzerlari e'lon qilingan til asosida mahalliylashtirilgan. Safari yuborishda xato xabarini ko'rsatmaydi va o'rniga ushbu maydonni diqqat markazida joylashtiradi.
"Kerakli" standart xato xabarini ko'rsatish alohida brauzerga bog'liq; Hozirgi vaqtda "pufak" barcha brauzerlarda xato xabari bilan CSS uslublarini tayinlash mumkin emas. Xrom, ammo bu uslubga xato xabarini tayinlash uchun ishlatilishi mumkin bo'lgan o'ziga xos xususiyatiga ega. Shuningdek, siz soxta sinfdan foydalanib ma'lumotlarni kiritish uchun uslublarni tayinlashingiz mumkin: talab qilinadi. Alternativ - bu setccementfity () usulidan foydalanib JavaScript-dagi so'z va uslublarni bekor qilish. Bunday brauzerni tekshirish serverni tasdiqlashni o'zgartirmasligini unutmaslik juda muhimdir.
naqsh.
Naqsh atributi odatda ko'plab ishlab chiqaruvchilarni tashvishga soladi (yaxshi, bu shakldagi har qanday shaklda qayg'uradi). Ushbu sohani tekshirish kerak bo'lgan maydon uchun JavaScript-ni aniqlaydi. Dastur bizni kodlar, hisob raqamlarini, shuningdek, boshqa tekshiruvdan o'tishni osonlashtiradi. Dastur xususiyatlari keng va bu mahsulot raqamidan foydalanib bitta oddiy misol.
<
label
> Mahsulot raqami:
<
input
pattern
=
"{3}"
name
=
"product"
type
=
"text"
title
=
"Yagona raqamdan keyin uchta katta harf."/
>
<
/
label
>
Ushbu shablon mahsulot raqami bitta raqamdan keyin uchta harfdan iborat bo'lishi kerak (3). Siz HTML5 shablon veb-saytida siz ular bilan ishlashni boshlashingiz uchun "StyransY-da" uslublar shablonlarining odatiy muntazam ifodalari ro'yxati mavjud.
Kerakli, opera 9.5+, Firefox 4+, Safari 5+, Safari 5+, Safari 5+, Chrome 5+ hozirda shablonlarni qo'llab-quvvatlaydigan yagona brauzerlardir. Biroq, qolganlari brauzer bozorining jadal surishgani sababli tez orada qaytib keladi.
Ro'yxat va ma'lumotlar standart elementlari
Ro'yxat atributi foydalanuvchiga alohida maydon bilan variantlar ro'yxatini bog'lash qobiliyatini beradi. Ro'yxat ro'yxati atribut qiymati bir xil hujjatda ma'lumotlar elementlari identifikatori bilan bir xil bo'lishi kerak. HTML5 uchun ma'lumotlar bazasi yangi va boshqarish uchun oldindan variantlarning oldindan belgilangan ro'yxatini aks ettiradi. U ichki qidiruv maydonlariga o'xshash ishlaydi, matn kiritishda so'zlarni to'ldiradigan so'zlarni to'ldiradi.
Quyidagi misol ro'yxati va ma'lumotlar jadvalida qanday biriktirilganligini ko'rsatadi.
<
label
> Sizning sevimli mevalaringiz:
<
datalist
id
=
"fruits"
>
<
option
value
=
"BlackBerry."
> BlackBerry.<
/
option
>
<
option
value
=
"Qora rangda."
> Qora rangda.<
/
option
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
Ma'lumotlar ostidagi tanlash elementini kiritish orqali siz a'lo darajada defkrazani ko'rsatishingiz mumkin, shunchaki variant elementini qo'llashingiz mumkin. Mana, Jeremi Kate (Jeremi keit) tomonidan yaratilgan oqlangan stsenariyning shablosi, HTML5-ning asta-sekin buzilishining tamoyillari uchun ideal.
<
label
> Sizning sevimli mevalaringiz:
<
datalist
id
=
"fruits"
>
<
select
name
=
"fruits"
>
<
option
value
=
"BlackBerry."
> BlackBerry.<
/
option
>
<
option
value
=
"Qora rangda."
> Qora rangda.<
/
option
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
Ro'yxat va ma'lumotlar bo'yicha brauzerni qo'llab-quvvatlash hozirda 9.5+, Chrome 20+, Internet Explorer 10 va Firefox 4+ bilan cheklangan.
bir nechta
Siz ma'lumotlar ro'yxatidan bir nechta qiymatga ega bo'lishingiz uchun siz bir nechta to'ldirilgan atributni qo'llash orqali sizning ro'yxatingiz va ma'lumotlaringizni oldinga surishtirishingiz mumkin. Mana misol.
<
label
> Sizning sevimli mevalaringiz:
<
datalist
id
=
"fruits"
>
<
select
name
=
"fruits"
>
<
option
value
=
"BlackBerry."
> BlackBerry.<
/
option
>
<
option
value
=
"Qora rangda."
> Qora rangda.<
/
option
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
multiple
>
<
/
label
>
Biroq, bir nechta ma'lumotlar faqat ma'lumotlar bo'yicha amal qiladi. Bu erda ko'rsatilgandek ko'rsatilganidek, bir nechta bir nechta masalani ishlatishda bir nechta misol, do'st yoki fayl qo'shimchalariga elementlarni yuborish mumkin bo'lgan elektron pochta manzillari bo'lishi mumkin:
<
label
> Fayllarni yuklash:
<
input
type
=
"file"
multiple
name
=
"upload"
>
<
/
label
>
firefox 3.6+, Safari-4+, Opera 11.5+, Internet Explorer 10 va Chrome 4+ da qo'llab-quvvatlanadi.
novoleid va shakllantiring.
Novoleidlate va FormaNevalid atributlari, shaklni yuborayotganda, siz ma'lumotlarning to'g'riligini tekshirishingiz shart emas. Ikkalasi ham - Boolean atributlari. Fornynevalelate kirish yoki tasvir turi bilan kirish-lant kabi qo'llanilishi mumkin. Novoleate atributi faqat shakl elementiga o'rnatilishi mumkin.
"Saqlash" atributini ishlatishning misoli "Saqlash Loyiha" tugmachasini "Saqlash Loyiha" tugmachasida ko'rsatish mumkin, ammo bu erda shakllar qurilishi kerak bo'lgan, ammo qoralamani saqlash shart emas. Novolidate Siz forma tekshiruvini amalga oshirishingiz shart bo'lmagan holatlarda qo'llaniladi, ammo siz yangi ma'lumotlar kirish turlari tomonidan taqdim etilgan foydalanuvchi interfeysining afzalliklariga erishishingiz kerak.
Formadan foydalanishni quyidagi misolda ko'rish mumkin:
<
form
action
=
"process.php"
>
<
label
for
=
"email"
> Elektron pochta:<
/
label
>
<
input
type
=
"text"
name
=
"email"
value
=
"\u003ca href \u003d"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caada5b8aea58aafb2aba7baa6afe4a9a5a7">[Elektron pochta bilan himoyalangan]"
>
<
input
type
=
"submit"
formnovalidate
value
=
"Topshirmoq"
>
<
/
form
>
Va bu misolda Novoleate dasturini ko'rsatadi:
<
form
action
=
"process.php"
novalidate
>
Atributlar element haqida qo'shimcha ma'lumotlarni taqdim etadilar, ular doimo boshlang'ich yorliqda aniqlanadi, ular juftlikdan qat'iy nazar, bu yorliq yoki bitta.
HTML-da bir qator atributlar mavjud universal va deyarli har qanday teglarga qo'llanilishi mumkin, shuning uchun ushbu guruhga kiritilgan atributlar global atributlar deb nomlanadi.
Global atributlar ko'pincha ushbu darslikning namunalarida uchrashadi, men sizga eng yaqin maqolalarda ko'rib chiqiladigan global atributlar bilan tanishgan sifatlarni takrorlashingizni va tanishishingizni maslahat beraman:
Mavzudagi savollar va vazifalar
Quyidagi mavzuni o'rganishga o'tishdan oldin amaliy vazifani bajaring:
Maslahat: Sahifaning tilini va kerak bo'lganda tilini aniqlashni unutmang. Jismoniy mashqlar bajarganingizdan so'ng, siz to'g'ri bajarilganingizga ishonch hosil qilish uchun, alohida oynada alohida oynada tekshiring.
HTML5-da barcha zamonaviy brauzerlar ushbu standartni qo'llab-quvvatlasalar ham. 2011 yil dekabr holatiga standart rivojlanish holatida.
HTML5-da ko'plab yangi sintaktik xususiyatlar qo'shildi - . Ushbu elementlar o'z plaginlari va apislariga murojaat qilmasdan Internetda grafik va multimedia ob'ektlarini amalga oshirish va boshqarish uchun mo'ljallangan. Kabi boshqa yangi elementlar , , va Hujjatning semantik tarkibini (sahifalar) boyitish uchun mo'ljallangan.
