Vaqti-vaqti bilan men umumiy xususiyatlarni yaratish uchun odatiy bo'lmagan matn maydonlariga duch kelaman HTML va CSS mumkin emasdek tuyuladi. Egri chiziqlar, gradientlar, soyalar va boshqa grafik qo'ng'iroqlar va hushtaklar mavjud. Va ushbu maqolada men sizga aytaman: HTML sahifasida chiroyli matn maydonini qanday qilish kerak , bu barcha grafik qo'ng'iroqlar va hushtaklarga ega.
Avvalo, siz qilishingiz kerak 3
matn maydonidan rasmlar:
Chap burchak . U chap tarafdagi matn maydonining eng boshiga (masalan, uning soyasiga) tegishi va yaxlitlash bo'lmaguncha davom etishi kerak.
O'ng burchak . Chap burchakka o'xshash, lekin boshqa tomonda.
Tana chizig'i . Ushbu chiziq keng bo'lishi kerak 1 piksel va matn maydonining o'rtasidan bir joyda kesilishi kerak.
Bu juda muhim nuqta 3 ta rasm ham bir xil balandlikda bo'lishi kerak . Keyingi bosqich HTML kodi :
Ko'rib turganingizdek, biz stol yasadik 1-qator va 3 ustun . Birinchi ustunda biz chap burchakni, ikkinchisida - matn maydonining o'zini, uchinchisida - o'ng burchakni rejalashtiramiz.
Va hozir CSS kodi :
kiritish_chap( fon: url("input_left.jpg") takrorlanmaydigan aylantirish 0 0 shaffof; //Chap burchagi bilan fon
} .input_right( fon: url("input_right.jpg") takrorlanmaydigan aylantirish 0 0 shaffof; //O'ng burchakli fon
} kiritish( fon: url("bg_input.jpg") takrorlash-x aylantirish 0 0 shaffof; //Matn maydoni foni chegara: yo'q; //Matn maydonidan standart ramkani olib tashlang balandligi: 35px; //Rasm balandligi kontur: yo'q; //IEda fokus ramkasini olib tashlang kengligi: 200px; //Matn maydonining kerakli kengligi
}
Agar siz hamma narsani to'g'ri bajargan bo'lsangiz, endi sahifangizdagi chiroyli matn maydoniga qoyil qolishingiz mumkin. Amalda, bu usul doimo qo'llaniladi (nafaqat matn maydonlari uchun), shuning uchun har qanday maket dizayneri buni bilishi kerak.
HTML shakllari veb-saytga tashrif buyuruvchilardan ma'lumot to'plash uchun foydalaniladigan boshqaruv elementlari.
Veb-shakllar sichqonchani bosish orqali faollashtiriladigan matn maydonlari, tugmalar, ro'yxatlar va boshqa boshqaruv elementlari to'plamidan iborat. Texnik jihatdan, shakllar foydalanuvchidan uzoq serverga ma'lumotlarni uzatadi.
Shakl ma'lumotlarini qabul qilish va qayta ishlash uchun veb-dasturlash tillari, masalan PHP , Perl .
HTML5 paydo bo'lishidan oldin veb-shakllar bir nechta elementlarning to'plami edi , tugma bilan tugaydi . Turli xil brauzerlarda shakllarni shakllantirish uchun ko'p kuch sarflandi. Bundan tashqari, shakllar kiritilgan ma'lumotlarni tekshirish uchun JavaScript-ni talab qildi va sanalar, elektron pochta manzillari va URL manzillari kabi kundalik ma'lumotlarni ko'rsatish uchun maxsus kiritish maydonlarining turlari yo'q edi.
HTML5 shakllari shakl elementlarining ko'rinishini o'zgartirish qobiliyatini ta'minlovchi yangi atributlar mavjudligi bilan ushbu umumiy muammolarning aksariyatini hal qildi. CSS3 .
Guruch. 1. HTML5 bilan yaxshilangan veb-shakllar HTML5 formasini yaratish
1. Element . U hech qanday kiritishni talab qilmaydi, chunki u konteyner bo'lib, barcha shakl boshqaruvlarini birga ushlab turadi - dalalar . Ushbu elementning atributlari barcha shakl maydonlari uchun umumiy bo'lgan ma'lumotlarni o'z ichiga oladi, shuning uchun mantiqiy birlashtirilgan maydonlar bitta shaklga kiritilishi kerak.
Jadval 1. Teg atributlari
2. Shakl elementlarini guruhlash
Element
... bir-biriga bog'liq bo'lgan elementlarni guruhlash uchun mo'ljallangan, shuning uchun shaklni mantiqiy bo'laklarga bo'linadi.
Har bir elementlar guruhini element yordamida nomlash mumkin , bu tegdan keyin darhol keladi
. Guruh nomi chap yuqori chegarada ko'rinadi . Misol uchun, agar elementda bo'lsa Aloqa ma'lumotlari saqlanadi:
Bog'lanish uchun ma'lumot
Ism *
Elektron pochta
Guruch. 2. Foydalanishda shakl elementlarini guruhlash
Jadval 2. Teg atributlari
Xususiyat
Ma'nosi/Ta'rifi
nogiron
Agar atribut mavjud bo'lsa, u holda konteyner ichida joylashgan tegishli shakl elementlari guruhi , to'ldirish va tahrirlash uchun o'chirilgan. Oldin kiritilgan ma'lumotlarni o'z ichiga olgan ma'lum shakl maydonlariga kirishni cheklash uchun foydalaniladi. Atribut qiymat ko'rsatmasdan ishlatiladi - .
shakl
xuddi shu hujjatda. Ushbu elementlar guruhi tegishli bo'lgan bir yoki bir nechta shakllarni bildiradi. Atribut hozircha hech bir brauzer tomonidan qo‘llab-quvvatlanmaydi.
nomi
Aniqlaydi Ism , bu JavaScript-dagi elementlarga havola qilish yoki shakl to'ldirilgandan va topshirilgandan so'ng shakl ma'lumotlariga havola qilish uchun ishlatiladi. Bu id atributiga o'xshash.
3. Forma maydonlarini yarating
Element ko'pgina shakl maydonlarini yaratadi. Elementning atributlari element yaratish uchun ishlatiladigan maydon turiga qarab farqlanadi.
CSS uslublaridan foydalanib, siz shrift o'lchamini, shrift turini, rangini va matnning boshqa xususiyatlarini o'zgartirishingiz, shuningdek, chegaralar, fon rangi va fon tasvirini qo'shishingiz mumkin. Maydonning kengligi width xususiyati bilan belgilanadi.
Jadval 3. Teg atributlari
Xususiyat
Ma'nosi/Ta'rifi
qabul qilish
Serverga yuborishga ruxsat berilgan fayl turini aniqlaydi. Faqat uchun ko'rsatilgan . Mumkin qiymatlar: file_extension - belgilangan kengaytmali fayllarni yuklab olish imkonini beradi, masalan, accept=".gif" , accept=".pdf" , accept=".doc" audio/* - audio fayllarni yuklab olish imkonini beradi video/* - videofayllarni yuklab olish imkonini beradi image/* - tasvirlarni yuklash imkonini beradi media_type - yuklab olingan fayllarning media turini ko'rsatadi.
muqobil
Aniqlaydi muqobil matn tasvirlar uchun, faqat uchun ko'rsatilgan .
avtomatik toʻldirish
Matn maydoniga kiritilgan qiymatlarni eslab qolish va keyingi kiritganingizda ularni avtomatik ravishda almashtirish uchun javobgar: yoqilgan - maydon himoyalanmaganligini va uning qiymatini saqlash va olish mumkinligini anglatadi; o'chirilgan - shakl maydonlari uchun avtomatik to'ldirishni o'chiradi.
avtofokus
Yuklangan shaklda u yoki bu kiritish maydonida qiymat kiritishga tayyor bo'lgan holda fokus (tanlangan) mavjudligiga ishonch hosil qilish imkonini beradi.
tekshirildi
Atribut, type="checkbox" va type="radio" kabi maydonlar uchun sahifa yuklashda standart belgilash katakchasi belgilangan yoki yo'qligini tekshiradi.
nogiron
shakl
Atribut qiymati elementning id atributiga teng bo'lishi kerak xuddi shu hujjatda. Ushbu shakl maydoni tegishli bo'lgan bir yoki bir nechta shakllarni aniqlaydi.
shakllanishi
Shaklni yuborishda maydonlarga kiritilgan ma'lumotlarni qayta ishlovchi faylning url manzilini belgilaydi. Faqat type="submit" va type="image" maydonlari uchun o'rnating. Atribut shaklning o'zi harakat atributining qiymatini bekor qiladi.
shakllanish turi
Shakl maydoni ma'lumotlari serverga yuborilganda qanday kodlanishini aniqlaydi. Shaklning enctype atributining qiymatini bekor qiladi. Faqat type="submit" va type="image" maydonlari uchun o'rnating. Variantlar: application/-x-www-form-urlencoded standart qiymatdir. Barcha belgilar yuborishdan oldin kodlanadi (bo'shliqlar + belgisi bilan almashtiriladi, maxsus belgilar ASCII HEX qiymatlariga aylantiriladi) multipart/form-data - belgilar kodlanmagan matn / tekis - bo'shliqlar + belgisi bilan almashtiriladi va maxsus belgilar kodlanmaydi.
shakl usuli
Atribut brauzer shakl ma'lumotlarini serverga yuborish uchun foydalanadigan usulni belgilaydi. Faqat type="submit" va type="image" maydonlari uchun o'rnating. Shaklning metod atributining qiymatini bekor qiladi. Variantlar: get standart qiymatdir. Shakldagi ma'lumotlar (nom/qiymat juftligi) url-ga qo'shiladi va serverga yuboriladi: URL?name=value&name=value post-forma ma'lumotlari http so'rovi sifatida yuboriladi.
shakl yangilash
Shakl topshirilganda shakl maydoni ma'lumotlari tasdiqlanmasligi kerakligini belgilaydi. Shaklning novalidate atributining qiymatini bekor qiladi. Atribut qiymatini ko'rsatmasdan foydalanish mumkin.
maqsadli format
Shaklni topshirgandan so'ng olingan javobni qayerda ko'rsatishni aniqlaydi. Faqat type="submit" va type="image" maydonlari uchun o'rnating. Shakl maqsad atributining qiymatini bekor qiladi. _parent - javobni asosiy ramkaga yuklaydi _top - javobni to'liq ekranda yuklaydi ramka nomi - javobni belgilangan nomdagi ramkaga yuklaydi.
balandligi
Atribut qiymati o'lchov birligini ko'rsatmasdan piksellar sonini o'z ichiga oladi. type="image" turidagi shakl maydonining balandligini o'rnatadi, masalan, . Bir vaqtning o'zida maydonning balandligi va kengligini o'rnatish tavsiya etiladi.
ro'yxati
Elementga havola , uning identifikatorini o'z ichiga oladi.Foydalanuvchiga tegishli maydonga qiymat kiritishni boshlaganda tanlash uchun bir nechta variantlarni taqdim etish imkonini beradi.
maks
Raqamli ma'lumotlarning ruxsat etilgan kiritilishini maksimal qiymatga cheklash imkonini beradi; atribut qiymati butun yoki kasr sonni o'z ichiga olishi mumkin. Bu atributni min atributi bilan birgalikda ishlatish tavsiya etiladi. Quyidagi maydon turlari bilan ishlaydi: raqam, diapazon, sana, datetime, datetime-lokal, oy, vaqt va hafta.
maksimal uzunlik
Atribut maydonga kiritilgan belgilarning maksimal sonini belgilaydi. Standart qiymat 524288 belgi.
min
Ruxsat etilgan raqamli kiritishni minimal qiymat bilan cheklash imkonini beradi.
bir nechta
Foydalanuvchiga vergul bilan ajratilgan bir nechta atribut qiymatlarini kiritish imkonini beradi. Fayllar va elektron pochta manzillari uchun amal qiladi. Atribut qiymatisiz ko'rsatilgan.
nomi
Elementga kirish uchun ishlatiladigan nomni belgilaydi , masalan, CSS uslublar jadvallarida. Bu id atributiga o'xshash.
naqsh
Foydalanishni aniqlash imkonini beradi muntazam ifoda ma'lum bir maydonga kiritilishiga ruxsat berilishi kerak bo'lgan ma'lumotlarning sintaksisi. Misol uchun, pattern="(3)-(3)" - kvadrat qavslar qabul qilinadigan belgilar oralig'ini o'rnatadi, bu holda - har qanday kichik harflar, jingalak qavslardagi raqam uchta kichik harf kerakligini ko'rsatadi, keyin chiziqcha, keyin 0 dan 9 gacha bo'lgan oraliqda uchta raqam.
joy ushlagich
To'ldirishdan oldin kiritish maydonida ko'rsatiladigan matnni o'z ichiga oladi (ko'pincha bu ko'rsatma bo'ladi).
faqat o'qish
Foydalanuvchiga shakl elementlarining qiymatlarini o'zgartirishga ruxsat bermaydi; matnni tanlash va nusxalash hali ham mavjud. Atribut qiymatisiz ko'rsatilgan.
talab qilinadi
Ushbu maydon zarurligini ko'rsatadigan xabarni ko'rsatadi. Agar foydalanuvchi ushbu maydonga kerakli qiymatni kiritmasdan shaklni topshirishga harakat qilsa, ekranda ogohlantirish xabari ko'rsatiladi. Atribut qiymatisiz ko'rsatilgan.
hajmi
Belgilar bilan maydonning ko'rinadigan kengligini o'rnatadi. Standart qiymat 20. Quyidagi maydon turlari bilan ishlaydi: matn, qidiruv, tel, url, elektron pochta va parol.
src
Shaklni yuborish tugmasi sifatida ishlatiladigan rasmning url manzilini belgilaydi. Faqat maydon uchun ko'rsatilgan .
qadam
Raqamli qiymatlarni kiritishni talab qiladigan elementlar uchun foydalaniladi, diapazonni sozlash jarayonida (qadam) qiymatlar oshirilgan yoki kamaygan miqdorni ko'rsatadi.
turi
tugma - tugma hosil qiladi.
checkbox - kiritish maydonini belgilash yoki olib tashlash mumkin bo'lgan katakchaga aylantiradi, masalan. Mening mashinam bor
rang - qo'llab-quvvatlovchi brauzerlarda ranglar palitralarini yaratadi, bu foydalanuvchilarga rang qiymatlarini o'n oltilik formatda tanlash imkonini beradi.
sana — sanani dd.aa.yyyy formatida kiritish imkonini beradi. Tug'ilgan kun:
datetime-local - dd.mm.yyyy hh:mm naqsh yordamida bosh inglizcha T harfi bilan ajratilgan sana va vaqtni kiritish imkonini beradi. Tug'ilgan kun - kun va vaqt:
elektron pochta - Ushbu atributni qo'llab-quvvatlaydigan brauzerlar foydalanuvchidan elektron pochta manzillari sintaksisiga mos keladigan ma'lumotlarni kiritishini kutadi. Email:
fayl - foydalanuvchi kompyuteridan fayllarni yuklab olish imkonini beradi. Faylni tanlang:
yashirin - brauzer tomonidan ko'rsatilmaydigan boshqaruvni yashiradi va foydalanuvchining standart qiymatlarni o'zgartirishiga yo'l qo'ymaydi.
image - tugmachaga matn o'rniga rasm qo'shish imkonini beruvchi tugma hosil qiladi.
oy - foydalanuvchiga yil va oy raqamini yyyy-mm naqsh yordamida kiritish imkonini beradi.
raqam - butun qiymatlarni kiritish uchun mo'ljallangan. Uning min , max va step atributlari mos ravishda yuqori, pastki chegaralar va qiymatlar orasidagi qadamni belgilaydi. Ushbu atributlar raqamli ko'rsatkichlarga ega bo'lgan barcha elementlar uchun qabul qilinadi. Ularning standart qiymatlari element turiga bog'liq. Iltimos, miqdorni ko'rsating (1 dan 5 gacha):
parol - foydalanuvchi tomonidan kiritilgan belgilar yulduzcha, o'q yoki brauzer tomonidan o'rnatilgan boshqa belgilar bilan almashtirilganda, shaklda matn maydonlarini yaratadi. Parolni kiriting:
radio - kalitni yaratadi - yoqish yoki o'chirish mumkin bo'lgan kichik doira shaklida boshqaruv. Vegetarian:
diapazon - slayder kabi interfeys elementini yaratishga imkon beradi, min / max - tanlash diapazonini o'rnatishga imkon beradi
qayta o'rnatish - foydalanuvchi kiritgan ma'lumotlarning forma maydonlarini tozalaydigan tugmani yaratadi.
qidiruv - qidiruv maydonini bildiradi, sukut bo'yicha kiritish maydoni to'rtburchaklar shaklida bo'ladi. Qidirmoq:
yuborish - sichqonchani bosish orqali faollashtirilgan standart tugmani yaratadi. Tugma shakldagi ma'lumotlarni to'playdi va uni qayta ishlash uchun yuboradi.
matn - formada matn maydonlarini yaratadi, matn kiritish uchun bir qatorli matn maydonini chiqaradi.
vaqt - ss: mm naqsh yordamida 24 soatlik formatda vaqtni kiritish imkonini beradi. Qo'llab-quvvatlovchi brauzerlarda u sichqoncha bilan tahrirlanadigan qiymatga ega raqamli kiritish maydoni boshqaruvi sifatida ko'rinadi va faqat vaqt qiymatlarini kiritishga imkon beradi. Vaqtni belgilang:
url - maydon URL manzillarini ko'rsatish uchun mo'ljallangan. Bosh sahifa:
hafta - Tegishli ko'rsatkich vositasi foydalanuvchiga yilning bir haftasini tanlash imkonini beradi, shundan so'ng u nn-yyyy formatida ma'lumotlarni kiritishni ta'minlaydi. Yilga qarab haftalar soni 52 yoki 53 bo'lishi mumkin. Haftani belgilang:
qiymat
Tugmada, maydonda yoki bog'langan matnda paydo bo'ladigan matnni aniqlaydi. Fayl tipidagi maydonlar uchun belgilanmagan.
kengligi
Atribut qiymati piksellar sonini o'z ichiga oladi. Shakl maydonlarining kengligini belgilash imkonini beradi.
4. Matn kiritish maydonlari
Element ... element o'rniga ishlatiladi katta matn maydonlarini yaratish kerak bo'lganda. Asl qiymat sifatida ko'rsatilgan matn teg ichiga joylashtiriladi. Maydon o'lchamlari cols - gorizontal o'lchamlar, qatorlar - vertikal o'lchamlar atributlari yordamida o'rnatiladi. Maydonning balandligi balandlik xususiyati yordamida o'rnatilishi mumkin. Barcha o'lchamlar monospace shriftidagi bitta belgi o'lchamiga qarab hisoblanadi.
Jadval 4. Teg atributlari
Xususiyat
Ma'nosi/Ta'rifi
avtofokus
Fokusni avtomatik ravishda kerakli boshlang'ich matn maydoniga o'rnatadi.
cols
Belgilar soni bo'yicha kenglikni o'rnatadi. Agar foydalanuvchi ko'proq matn kiritsa, aylantirish paneli paydo bo'ladi.
nogiron
Maydon tarkibini tahrirlash va nusxalash imkoniyatini o'chiradi.
shakl
Atribut qiymati elementning id atributi qiymatiga teng bo'lishi kerak xuddi shu hujjatda. Ushbu matn maydoni tegishli bo'lgan bir yoki bir nechta shakllarni aniqlaydi.
maksimal uzunlik
Atribut qiymati maydonga kiritiladigan belgilarning maksimal sonini belgilaydi.
nomi
Matn maydoni nomini belgilaydi.
joy ushlagich
Kutilgan kiritish qiymatini tavsiflovchi qisqa matn taklifini belgilaydi.
faqat o'qish
Maydon tarkibini tahrirlash imkoniyatini o'chiradi.
talab qilinadi
Ushbu maydon zarurligini ko'rsatadigan xabarni ko'rsatadi.
qatorlar
Matn maydonida qancha satr ko'rsatilishi kerakligini ko'rsatadigan raqamni belgilaydi.
o'rash
Shakl topshirilganda matnda qator uzilishlari saqlanib qolishi kerakligini aniqlaydi. Qattiq qiymat tashishni saqlaydi, ammo yumshoq qiymat saqlamaydi. Agar qattiq ishlatilsa, cols atributining qiymati ko'rsatilishi kerak.
5. Ochiladigan ro'yxat
Ro'yxatlar ko'p sonli narsalarni ixcham joylashtirish imkonini beradi. Ochiladigan ro'yxatlar element yordamida tuziladi ... . Ular sizga taklif qilingan to'plamdan bir yoki bir nechta qiymatlarni tanlash imkonini beradi. Odatiy bo'lib, ro'yxat oynasi o'zining birinchi elementini ko'rsatadi.
Elementlar ro'yxatga elementlar qo'shish uchun ishlatiladi ... , ular ichida joylashgan .
Ro'yxatlarni tizimlashtirish uchun elementdan foydalaning ... , bu ro'yxatlarda sarlavhalarni yaratadi.
Ro'yxatlar uchun siz shrift o'lchamini, shrift turini, rangini va boshqa matn xususiyatlarini o'zgartirishingiz, shuningdek, chegaralar, fon rangi va fon tasvirini qo'shishingiz mumkin.
Jadval 5. Teg atributlari
Xususiyat
Ma'nosi/Ta'rifi
avtofokus
Sahifani yuklaganda elementga avtomatik fokusni o'rnatadi.
nogiron
Ochiladigan ro'yxatni o'chiradi.
shakl
Ushbu ro'yxat qaysi shaklga tegishli ekanligini aniqlaydi. Atribut qiymati shakl identifikatoridir.
bir nechta
Bir yoki bir nechta elementni tanlash imkonini beradi, buning uchun tanlashda Ctrl tugmachasini bosib ushlab turish kerak.
nomi
Ochiladigan ro'yxat uchun nom belgilaydi. Atribut qiymati ro'yxat mavzusini aks ettiruvchi nomni o'z ichiga oladi.
talab qilinadi
Shaklni yuborishdan oldin foydalanuvchi ochiladigan ro'yxatdan qiymat tanlashi kerakligini bildiruvchi xabarni ko'rsatadi.
hajmi
Bir vaqtning o'zida ekranda ko'rinadigan ro'yxat elementlari sonini o'rnatadi. Agar ro'yxat elementlari soni belgilangan raqamdan oshsa, aylantirish paneli paydo bo'ladi. Atribut qiymati musbat butun son sifatida belgilanadi.
6. Shakl maydonlari uchun teglar
Shakl elementlari uchun teglar element yordamida yaratiladi ... . Yorliqlar va maydonlarni guruhlashning ikki yo'li mavjud. Agar maydon element ichida bo'lsa , u holda for atributini ko'rsatish shart emas.
Qachon oxirgi marta samolyotda uchgansiz?
Mushuk
7. Tugmalar
Element ... bosiladigan tugmalarni yaratadi. Yaratilgan tugmalardan farqli o'laroq ( , , , ), element ichida kontentni joylashtirishingiz mumkin - matn yoki rasm.
Elementni to'g'ri ko'rsatish uchun Turli xil brauzerlar type atributini ko'rsatishi kerak, masalan, .
Tugmalar foydalanuvchilarga ma'lumotlarni shaklga yuborish, shakl tarkibini tozalash yoki boshqa harakatlarni amalga oshirish imkonini beradi. Siz chegaralar yaratishingiz, fonni o'zgartirishingiz va tugmachadagi matnni tekislashingiz mumkin.
Jadval 9. Teg atributlari
Xususiyat
Ma'nosi/Ta'rifi
avtofokus
Sahifa yuklanganda fokusni tugmaga o'rnatadi.
nogiron
Tugmani o'chiradi, uni bosish mumkin emas.
shakl
Ushbu tugma tegishli bo'lgan bir yoki bir nechta shakllarni bildiradi. Atribut qiymati mos keladigan shaklning identifikatoridir.
shakllanishi
Atribut qiymati tugma bosilganda yuborilgan shakl ma'lumotlarini qayta ishlovchi URL manzilini o'z ichiga oladi. Faqat turi "yuborish" tugmasi uchun. Element uchun belgilangan harakat atributining qiymatini bekor qiladi .
shakllanish turi
Type="submit" kabi tugmalar bosilganda forma ma'lumotlarini serverga yuborishdan oldin kodlash turini o'rnatadi. Element uchun belgilangan enctype atributining qiymatini bekor qiladi . Mumkin qiymatlar: application/x-www-form-urlencoded standart qiymatdir. Barcha belgilar yuborishdan oldin kodlanadi. multipart/form-data - belgilar kodlanmagan. Shakl yordamida fayllar yuklanganda foydalaniladi. matn/tekis - belgilar kodlanmaydi va bo'shliqlar + belgisi bilan almashtiriladi.
shakl usuli
Atribut brauzer shaklni yuborish uchun foydalanadigan usulni belgilaydi. Element uchun belgilangan usul atributining qiymatini bekor qiladi . Faqat "yuborish" turidagi tugmalar uchun belgilangan. Mumkin qiymatlar: get - formadagi ma'lumotlar (nom/qiymat juftligi) url-ga qo'shiladi va serverga yuboriladi. Ushbu usul yuborilgan ma'lumotlar hajmi bo'yicha cheklovlarga ega va parollar va maxfiy ma'lumotlarni yuborish uchun mos emas. post - formadagi ma'lumotlar http so'rovi sifatida qo'shiladi. Usul olishdan ko'ra ishonchli va xavfsizroq va o'lcham cheklovlari yo'q.
shakl yangilash
Atribut shakl ma'lumotlari yuborilganda tasdiqlanmasligi kerakligini bildiradi. Faqat "yuborish" turidagi tugmalar uchun belgilangan.
maqsadli format
Atribut shaklni topshirgandan so'ng natijani qaysi oynada ko'rsatishni belgilaydi. Faqat "yuborish" turidagi tugmalar uchun belgilangan. Element uchun belgilangan maqsad atributining qiymatini bekor qiladi . _blank - javobni yangi oyna/tabga yuklaydi _self - javobni bir xil oynaga yuklaydi (standart) _parent - javobni asosiy ramkaga yuklaydi _top - javobni to'liq ekranda yuklaydi framename - javobni belgilangan nomdagi ramkaga yuklaydi.
nomi
Tugma nomini o'rnatadi, atribut qiymati - matn. Shakl topshirilgandan so'ng ma'lumotlarni shakllantirish yoki JavaScript-da berilgan tugma(lar)ga havola qilish uchun ishlatiladi.
turi
Tugma turini belgilaydi. Mumkin qiymatlar: tugma - bosiladigan tugma reset — reset tugmasi, asl qiymatini qaytaradi submit - forma ma'lumotlarini yuborish tugmasi.
qiymat
Tugma bosilganda yuboriladigan standart qiymatni o'rnatadi.
8. Shakllardagi tasdiqlash qutilari va radio tugmalari
Shakllardagi belgilash katakchalari konstruktsiya yordamida o'rnatiladi , va kalit - foydalanish .
Belgilash katakchalari, radio tugmalaridan farqli o'laroq, bir shaklda bir nechta qilib o'rnatilishi mumkin. Belgilangan atribut belgilash katakchalari uchun belgilangan bo'lsa, sahifa yuklanganda, tegishli shakl maydonlarida belgilash katakchalari allaqachon tanlanadi.
Element radio tugmalari va katakchalari yordamida tanlovni amalga oshirishda foydalaniladi. Siz shunchaki u bilan bog'langan matnni bosish orqali kerakli elementni tanlashingiz mumkin. Buni amalga oshirish uchun siz joylashtirishingiz kerak element ichida .
CSS veb-ishlab chiquvchiga HTML sahifalarini loyihalash uchun juda katta imkoniyatlarni taqdim etadi. Yangi boshlanuvchilar uchun ular murakkab ko'rinadi, lekin agar siz ularni diqqat bilan va uslubiy tushunsangiz, uslublar jadvali texnologiyasi zabt etiladi va veb-sayt tartibi endi qiyinchiliklarga olib kelmaydi. CSS-ning o'zgarmas xususiyatlaridan biri -
to'ldirish . U HTML sahifalar bloklari maydonlarini o'rnatish uchun ishlatiladi.
Bloklar nima? Sayt g'ishtdan - bloklardan qurilgan. Bundan tashqari, har bir element, uning mazmunidan qat'i nazar, to'rtburchaklar shaklga ega bo'lishi kerak. Ya'ni, barcha tasvirlar va yozuvlar ishlab chiquvchi tomonidan "qutilarga" o'ralgan bo'lib, u veb-sahifani yaratadi.
Ko'pincha bloklar teglar bilan belgilanadi
,
-, . CSS xususiyatlari har bir bunday elementga qo'llaniladi:
to'ldirish ,
marja ,
chegara ,
kengligi va boshqalar. To'rtburchaklar blokining kengligi xususiyat tomonidan belgilanadi
kengligi , keyin har bir element atribut yordamida chegaralangan maydonlar bilan bezatilgan
chegara. Nihoyat, sahifa komponentida tashqi chekkalar yoki to'ldirish bo'lishi mumkin -
marja , uni boshqa blokdan ajratib turadi.
CSS to'ldirish xususiyati sintaksisi Kaskadli uslublar jadvallarini yaratuvchilar maydonlarni o'rnatish uchun atribut yozish uchun bir nechta variantni taqdim etdilar. Blok ichida bo'sh joy yaratishning sakkiz xil usuli mavjud! Quyidagi jadvalda har bir variant uchun misollar ko'rsatilgan va ular haqida qisqacha tushuntirish berilgan.
Foydalanish misoli
Tushuntirish
to'ldirish: 15 px;
Agar atributdan keyin bitta raqam bo'lsa, bu element har tomondan teng chekkalarga ega bo'lishini anglatadi. Yozib olish px qiymat piksellarda ko'rsatilgan deb taxmin qiladi. Ya'ni, oxirida blokda 15 pikselli maydonlar bo'ladi.
to'ldirish: 18 px 36 px;
Ikki raqamning birinchisi vertikal chekkalar 18 piksel, yon chekkalari ikki barobar katta - 36 piksel bo'lishini ko'rsatadi.
to'ldirish: 6 px 12 px 18 px;
O'rta raqam - tomonlarning (chap va o'ng) chekkalari qiymati, qolgan ikkitasi - vertikal chegaralar. Bunday holda, birinchi raqam (6 piksel) yuqori chetga, oxirgisi (18 piksel) esa pastki qismga ishora qiladi.
to'ldirish: 6 piksel 12 piksel 18 piksel 36 piksel;
CSS mulkni qayd etish shakli to'ldirish to'rtta raqamni o'z ichiga olgan , blokning barcha tomonlarida chekka o'rnatish imkonini beradi. Raqamli qiymatlar ketma-ket yuqori chetga, so'ngra soat yo'nalishi bo'yicha o'ngga, pastga va chapga qo'llaniladi.
padding-chap: 14 piksel;
Postskript chap o'zi uchun gapiradi - chekka elementning faqat chap tomoniga o'rnatiladi.
to'ldirish - o'ng: 14 piksel;
Oldingi ro'yxatga olish variantiga o'xshash - maydon faqat blokning o'ng tomonida yaratiladi.
to'ldirish ustki qismi: 14 piksel;
Kirish yuqoridagi maydonni belgilaydi.
to'ldirish-pastki: 14 piksel;
Kirish quyidagi maydonni belgilaydi.
Shuni ta'kidlash kerakki, CSS-da standart to'ldirish nolga teng. Bu atribut meros qilib olinmaydi, ya'ni har bir blok uchun o'rnatilishi kerak. Oddiy va tushunarli piksellardan tashqari, bloklar atrofidagi bo'sh joyning kengligi ham nisbiy birliklarda ko'rsatilgan. Misol uchun, yuqoridagi misollarda siz 5% yozishingiz mumkin - natijada maydonning kengligi brauzer tomonidan avtomatik ravishda hisoblab chiqiladi.
Mulkdan qanday foydalanish kerak? Shunday qilib, biz atribut yozish shakllarini ko'rib chiqdik, ammo uni HTML sahifasida qanday ishlatish kerak? Birinchi variant yanada "chiroyli", CSS texnologiyasi bilan bog'liq hamma narsa HTML-da yozilmagan, lekin tegishli kengaytmali alohida faylga joylashtirilgan.
Ikkinchi variant - to'g'ridan-to'g'ri tegga yozish<uslub >. CSS to'ldirish bu holda u quyidagicha belgilanadi:
<
div style=" to'ldirish: 22 px">
Layout dizayneri atributni qanday yozishni tanlaydi. Har qanday holatda, agar kerak bo'lsa, uni ishlatish uchun maydonlarni aniqlash uchun mulkdan foydalanishning barcha usullarini bilishingiz kerak.
Ushbu bobda biz maydonlar (mulk marja ) va toʻldirish (mulk to'ldirish ) element. Bu ikki xususiyat bir-biriga juda o'xshash, ammo ular hali ham ikkita butunlay boshqa xususiyatdir.
Keling, ushbu tushunchalarni tushunaylik ...
Maydon ( marja ) - Bu elementning tashqi chegarasidan brauzer oynasi yoki asosiy elementning chegarasigacha bo'lgan masofa ... yaxshi, bizning elementimiz joylashtirilgan blokning chegarasi.
Chekish ( to'ldirish ) - Ular elementning ichki chegarasidan matn, rasmlar, jadvallar mazmunigacha bo'lgan masofani chaqiradilar.
Rasmda bu masofalar, shuningdek, chekka egallagan joy aniq ko'rsatilgan ( chegara ) biz ham u haqida unutmasligimiz kerak.
Masofalar marja Va to'ldirish ko'rsatilgan:
px - Piksellarda yoki boshqa CSS o'lchov birliklarida.%
- foizlarda.avto - Chegara va chekinishlar hajmi brauzer tomonidan avtomatik ravishda hisoblab chiqiladi.
Keling, rasmda ko'rsatilganidek, bloklar yordamida xuddi shu narsani qilishga harakat qilaylik
va CSS xususiyatlari.
Chegaralar va to'ldirish
Mulk qiymatlarini o'zgartirishga harakat qiling marja Va to'ldirish va siz nima ekanligini tushunasiz .. va agar u allaqachon aniq bo'lsa, davom etaylik ..
Mumkin bo'lgan chegara va to'ldirish qiymatlari.
Yuqoridagi misolda xususiyatlarni belgilash marja Va to'ldirish bitta qiymatdan foydalanib, biz to'rt tomondan elementning chekkalari va to'ldirishlarini aniqladik. Elementning har bir tomoni uchun turli chekkalar va to'ldirish o'lchamlarini belgilash uchun siz bo'sh joy bilan ajratilgan ikkita, uchta yoki to'rtta argumentni ko'rsatishingiz kerak. Bundan tashqari, qiymatlar soniga qarab, natija boshqacha bo'ladi.
Mana misollar:
chegara: 5px ; - bitta qiymat . Bitta qiymat - chegaralar har tomondan bir xil.
chegara: 5px 40px; - ikki ma'no. Birinchi qiymat - yuqori va pastki chegaralardan chekkalarni o'rnatadi.
hoshiya: 5px 40px 20px; - uchta ma'no. Ikkinchi qiymat - elementning chap va o'ng chegaralaridan chekkalarni o'rnatadi.
hoshiya: 5px 40px 20px 1px; -to'rt ma'nosi. Birinchi qiymat - elementning yuqori chegarasidan chetni o'rnatadi. Ikkinchi qiymat - elementning o'ng chegarasidan chetini o'rnatadi. Uchinchi qiymat - elementning pastki chegarasidan chetini o'rnatadi. To'rtinchi qiymat - elementning chap chegarasidan chetini o'rnatadi.
BILAN to'ldirish masala bilan bir xil tamoyilga amal qiladi marja , elementning ichki chegaralaridan tarkibga to'ldirish argumentlar soni va ularning qiymatlariga qarab o'lchamlarni oladi.
Chegaralar va to'ldirish
Fikrlarni ma'no ma'nosida anglash orqali, aqlga sig'maydigan narsalar haqida o'ylash mantiqiy bo'ladi!
Child xususiyatlari chegarasi va to'ldirish.
CSS xususiyatlari marja Va to'ldirish asosiy va bir qator bolalar xususiyatlariga ega.
U marja bu:
chekka tepa - Asosiy elementning yuqori chegarasidan chekka,chekka-chap - Asosiy elementning chap chegarasidan chekka,chekka o'ng - Asosiy elementning o'ng chegarasidan chekka,chekka-pastki - Asosiy elementning pastki chegarasidan chekka.
Va to'ldirish mos ravishda:
to'ldiruvchi-usti - elementning yuqori chegarasidan uning mazmuniga chekinish,to'ldirish - chap - elementning chap chegarasidan uning mazmuniga chekinish,to'ldirish - o'ng - elementning o'ng chegarasidan uning mazmuniga chekinish,to'ldirish - pastki - Elementning pastki chegarasidan uning mazmuniga chekinish.
Xo'sh, menimcha, bu tushunarli ... agar elementning bir tomonidan chekinish yoki chegarani aniqlash kerak bo'lsa, yuqoridagi xususiyatlardan birini qo'llash yaxshiroqdir.
Chegaralar va to'ldirish
Fikrlarni ma'no ma'nosida anglash orqali, aqlga sig'maydigan narsalar haqida o'ylash mantiqiy bo'ladi!
Biz oz narsani bilishimiz uchun qanchalar bilishimiz kerakligini kam odam biladi!
Chegara va toʻldirish veb-sayt dizaynining asosiy tarkibiy qismlaridan biri boʻlib, bu borada amal qilish kerak boʻlgan bir qancha koʻrsatmalar mavjud.
Tarkibdan element chegaralarigacha, ayniqsa matn bloklari uchun qisqa va undan ham ko'proq nol to'ldirishdan saqlaning. Kichkina chekkalari va chekinishlari bo'lgan matnni o'qish qiyin va yopishqoq.
Bitta element uchun ham, butun sahifa (elementlar tarkibi) uchun ham chekka va chekinishlarning mutanosibligi va mutanosibligi qoidalariga rioya qiling.
Sahifaga tashrif buyuruvchining e'tiborini kerakli joyga qaratish usullaridan biri odatdagidan kattaroq chekinishlardan foydalanishdir; bunday kontrast tomoshabinni matndagi "maxsus" joylarga qarashga va e'tibor berishga majbur qiladi.
Oldingi bobda biz margin va plomba kabi CSS xususiyatlarini eslatib o'tdik. Endi biz ularni batafsil ko'rib chiqamiz va ular bir-biridan qanday farq qilishini va qanday xususiyatlarga ega ekanligini ko'rib chiqamiz.
Elementlar orasidagi bo'shliqlarni u yoki bu yo'l bilan yaratishingiz mumkin, lekin agar to'ldirish - bu tarkibdan blokning chetiga qadar bo'sh joy bo'lsa, u holda chekka bir blokdan ikkinchisiga masofa, bloklararo bo'shliqdir. Skrinshotda aniq misol ko'rsatilgan:
To'ldirish kontentni blok chegarasidan ajratadi va chekka bloklar orasidagi bo'shliqlarni yaratadi
Ko'rib turganingizdek, CSS chegaralari va to'ldirish bir-biridan farq qiladi, garchi ba'zida kodga qaramasdan masofani o'rnatish uchun qaysi xususiyatdan foydalanishni aniqlash mumkin emas. Bu kontent blokining ramkasi yoki foni yo'q bo'lganda sodir bo'ladi.
Elementning har bir tomonida CSS-da chekka yoki to'ldirishni o'rnatish uchun quyidagi xususiyatlar mavjud:
To'ldirish:
to'ldiruvchi ustki: ma'nosi;
to'ldirish - o'ng: ma'nosi;
pastki qism: ma'nosi;
to'ldirish-chap: ma'nosi;
Maydonlar:
yuqori chegarasi: ma'nosi;
o'ng chekka: ma'nosi;
pastki chet: ma'nosi;
chap chekka: ma'nosi;
Qiymatlar istalgan CSS birliklarida ko'rsatilishi mumkin - px, em, % va hokazo. Misol: margin-top: 15px .
kabi juda qulay narsa ham bor chegara va to'ldirish CSS uchun stenografiya . Agar elementning toʻrt tomonida chekka yoki toʻldirishni oʻrnatishingiz kerak boʻlsa, har bir tomon uchun xususiyatni alohida yozishingiz shart emas. Hammasi soddalashtirilgan: chekka va to'ldirish uchun siz bir vaqtning o'zida 1, 2, 3 yoki 4 qiymatni belgilashingiz mumkin. Qiymatlar soni sozlamalar qanday taqsimlanishini aniqlaydi:
4 ta qiymat: toʻldirish elementning barcha tomonlari uchun quyidagi ketma-ketlikda oʻrnatiladi: yuqori, oʻng, past, chap: toʻldirish: 2px 4px 5px 10px;
3 ta qiymat: to'ldirish avval yuqori tomon uchun, keyin bir vaqtning o'zida chap va o'ng uchun, so'ngra pastki qism uchun o'rnatiladi: to'ldirish: 3px 6px 9px;
2 ta qiymat: to'ldirish avval yuqori va pastki tomondan bir vaqtning o'zida, keyin esa chap va o'ng uchun bir vaqtning o'zida o'rnatiladi: to'ldirish: 6px 12px;
1 qiymat: elementning barcha tomonlari uchun teng to'ldirish o'rnatiladi: to'ldirish: 3px;
Xuddi shu qoidalar CSS margin xususiyatiga nisbatan qo'llaniladi. Iltimos, marja uchun salbiy qiymatlardan ham foydalanishingiz mumkinligini unutmang (masalan, -3px), bu ba'zan juda foydali bo'lishi mumkin.
Chetni yig‘ish
Vaziyatni tasavvur qiling: ikkita blok elementi bir-birining ustiga joylashgan va ularga chekka maydonlar berilgan. Yuqori blok chekkaga o'rnatiladi: 60px , pastki blok esa chekkaga o'rnatiladi: 30px . Ikki elementning ikkita chegaradosh maydoni shunchaki tegib ketadi va natijada bloklar orasidagi bo'shliq 90 pikselga teng bo'ladi deb taxmin qilish mantiqan to'g'ri bo'ladi.
Biroq, narsalar boshqacha. Aslida, bunday vaziyatda elementlarning ikkita qo'shni maydonidan eng katta o'lcham tanlanganda qulash deb ataladigan effekt paydo bo'ladi. Bizning misolimizda elementlar orasidagi yakuniy bo'shliq 60 piksel bo'ladi.
Bloklar orasidagi masofa kattaroq qiymatga teng
Yig'ish chegarasi faqat elementlarning yuqori va pastki chetlari uchun ishlaydi va o'ng va chap tomonlardagi chekkalarga taalluqli emas. Yakuniy bo'shliq qiymati turli holatlarda turlicha hisoblanadi:
Ikkala chegara qiymati ham ijobiy bo'lsa, natijada olingan marja kattaligi kattaroq qiymatga teng bo'ladi.
Agar qiymatlardan biri salbiy bo'lsa, maydon hajmini hisoblash uchun siz qiymatlar yig'indisini olishingiz kerak. Masalan, 20px va -18px qiymatlari bilan maydon hajmi quyidagicha bo'ladi: 20 + (-18) = 20 – 18 = 2 piksel.
Agar ikkala qiymat ham manfiy bo'lsa, bu raqamlarning modullari solishtiriladi va moduli katta bo'lgan raqam (shuning uchun manfiy raqamlardan kichikroq) tanlanadi. Misol: -6px va -8px maydonlarining qiymatlarini solishtirish kerak. Taqqoslanayotgan raqamlarning modullari mos ravishda 6 va 8 ga teng. Bundan kelib chiqadiki, 6-8. Olingan maydon hajmi -8 piksel.
Agar qiymatlar turli CSS birliklarida ko'rsatilgan bo'lsa, ular bittaga aylantiriladi, shundan so'ng ular taqqoslanadi va kattaroq qiymat tanlanadi.
To'liq elementlar uchun chekka o'lchami yanada qiziqarli tarzda aniqlanadi: agar bolaning ota-onasiga qaraganda kattaroq chegarasi bo'lsa, u holda unga ustunlik beriladi. Bunday holda, ota-onaning yuqori va pastki chetlarining o'lchamlari bola uchun belgilanganlari bilan bir xil bo'ladi. Bunday holda, ota-ona va bola o'rtasida masofa bo'lmaydi.