uy - Xizmat
Qanday qilib chiroyli matn maydonini yaratish kerak. Matn maydonlari Flexbox moslashtirish misoli

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:

  1. Chap burchak. U chap tarafdagi matn maydonining eng boshiga (masalan, uning soyasiga) tegishi va yaxlitlash bo'lmaguncha davom etishi kerak.
  2. O'ng burchak. Chap burchakka o'xshash, lekin boshqa tomonda.
  3. 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

Har qanday shaklning asosi element hisoblanadi .... 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
Xususiyat Ma'nosi/Ta'rifi
qabul qilish-charset Atribut qiymati ajratilgan bo'shliqdir belgilarni kodlash ro'yxati, bu shaklni yuborish uchun ishlatiladi, masalan, .
harakat Majburiy atribut, bu ma'lumotlar yuboriladigan serverdagi forma ishlov beruvchisining url manzilini belgilaydi. Bu forma ma'lumotlari bilan nima qilish kerakligini tavsiflovchi fayl (masalan, action.php). Agar atribut qiymati ko'rsatilmagan bo'lsa, sahifa qayta yuklangandan so'ng, shakl elementlari standart qiymatlarini oladi.
Agar barcha ishlar mijoz tomonida JavaScript skriptlari orqali amalga oshirilsa, harakat atributi uchun # qiymatini belgilashingiz mumkin.
Shuningdek, tashrif buyuruvchi tomonidan to'ldirilgan shaklni sizga elektron pochta orqali yuborishni ham tashkil qilishingiz mumkin. Buning uchun siz quyidagi yozuvni kiritishingiz kerak:
avtomatik toʻldirish

enttip Ko'rsatish uchun ishlatiladi MIME-shakl bilan birga yuborilgan ma'lumotlar turi, masalan, enctype="multipart/form-data" . Faqat method="post" holatida ko'rsatilgan.
application/x-www-form-urlencoded standart kontent turi bo‘lib, uzatilgan ma’lumotlar URL-kodlangan shakl o‘zgaruvchilari ro‘yxatini ifodalashini ko‘rsatadi. Bo'shliq belgilari (ASCII 32) + sifatida kodlanadi va maxsus belgi, masalan, ! o'n oltilik tizimda %21 sifatida kodlanadi.
multipart/form-ma'lumotlar - fayllar, ASCII bo'lmagan ma'lumotlar va ikkilik ma'lumotlarni o'z ichiga olgan shakllarni yuborish uchun ishlatiladi, bir nechta qismlardan iborat bo'lib, ularning har biri alohida shakl elementining mazmunini ifodalaydi.
text/plain - oddiy (html emas) matn uzatilayotganligini bildiradi.
usuli Shakl ma'lumotlari qanday yuborilishini belgilaydi.
Get usuli brauzerning manzil satri orqali serverga ma'lumotlarni uzatadi. Serverga so'rovni yaratishda barcha o'zgaruvchilar va ularning qiymatlari www.anysite.ru/form.php?var1=1&var2=2 kabi ketma-ketlikni hosil qiladi. Belgidan keyin server manziliga o'zgaruvchilar nomlari va qiymatlari qo'shiladimi? va & bilan ajratiladi. Barcha maxsus belgilar va lotin bo'lmagan harflar %nn formatida kodlanadi, bo'sh joy + bilan almashtiriladi. Agar siz katta hajmdagi ma'lumotlarni uzatmasangiz, bu usuldan foydalanish kerak. Agar siz faylni forma bilan birga yuborishingiz kerak bo'lsa, bu usul ishlamaydi.
Post usuli katta hajmdagi ma'lumotlarni, shuningdek, maxfiy ma'lumotlar va parollarni yuborish uchun ishlatiladi. Ushbu usul yordamida yuborilgan ma'lumotlar URL sarlavhasida ko'rinmaydi, chunki u xabarning asosiy qismida joylashgan.
nomi Setlar shakl nomi, bu skriptlar orqali forma elementlariga kirish uchun ishlatiladi, masalan name="opros" .
yangilash Shaklni yuborish tugmasidagi tekshirishni o'chiradi. Atribut qiymat ko'rsatmasdan ishlatiladi
maqsad Ma'lumot yuboriladigan oynani belgilaydi:
_blank - yangi oyna
_self - bir xil ramka
_parent - ota-ona ramkasi (agar u mavjud bo'lsa, agar mavjud bo'lmasa, hozirgisiga)
_top - bu kadrga nisbatan yuqori darajadagi oyna. Agar qo'ng'iroq bola ramkadan kelmasa, u holda xuddi shu ramkaga.

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


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

7. Tugmalar

Element bosiladigan tugmalarni yaratadi. Yaratilgan tugmalardan farqli o'laroq ( , , , ), element ichida .

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

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: 15px;

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: 18px 36px;

Ikki raqamning birinchisi vertikal chekkalar 18 piksel, yon chekkalari ikki barobar katta - 36 piksel bo'lishini ko'rsatadi.

to'ldirish: 6px 12px 18px;

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:

< divstyle="to'ldirish: 22px">

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.


 


O'qing:



isnull() funksiyasidan foydalanish

isnull() funksiyasidan foydalanish

27.06.2017 1C so'rovlarida NULL, ISNULL() va IS NULL So'rov natijasida NULL NULL nima qiymat yo'qligini bildiradi (bu bo'sh emas...

Pedagogik vaziyatlarga oid keyslar Pedagogika fanidan keys topshiriqlari

Pedagogik vaziyatlarga oid keyslar Pedagogika fanidan keys topshiriqlari

ROSSIYA TA'LIM VA FAN VAZIRLIGI "Xakass davlati" oliy kasbiy ta'lim federal davlat ta'lim muassasasi ...

Pratchett qo'riqchisi. (S. Juzhunava tomonidan tarjima qilingan, A. Jikarentsev tahriri ostida) fb2 yuklab olish. Kitobdan iqtiboslar "Qo'riqchilar! Soqchilar! Terri Pratchett

Pratchett qo'riqchisi.  (S. Juzhunava tomonidan tarjima qilingan, A. Jikarentsev tahriri ostida) fb2 yuklab olish.  Kitobdan iqtiboslar

2-fevral, 2017-yil Soqchilar! Soqchilar! Terri Pratchett (Hozircha reytinglar yo'q) Sarlavha: Qo'riqchi! Soqchilar! Muallif: Terri Pratchett Yil: 1989 Janr: Xorijiy...

1s buxgalteriya hisobidagi nomenklatura 8

1s buxgalteriya hisobidagi nomenklatura 8

Buxgalteriya hisoblari qayerda o'zgaradi (1C Buxgalteriya 8.3, nashr 3.0) 2016-12-08T11:33:27+00:00 Buxgalterlar mendan qayerda... haqida so'rashadi.

tasma tasviri RSS