Shakllarni to'ldirishda majburiy va ixtiyoriy maydonlar. Yulduzcha bilan belgilangan maydonlar talab qilinadi Maydonlar tomonidan talab qilinadi
Deyarli har bir veb-saytda siz ro'yxatdan o'tish shaklini ko'rishingiz mumkin. Albatta, boshqa birovning shaklini olib, uni o'ziga qo'ygan va keyin foydalanuvchi ro'yxatdan o'tishni xohlaydigan, lekin qila olmaydiganlar bor. Ro'yxatdan o'tish paytida ma'lum bir parolga ruxsat berilgan va siz ro'yxatdan o'tishingiz mumkin bo'lgan holatlar mavjud, ammo keyin saytga kirishga harakat qilganingizda, bu noto'g'ri parol degan xato paydo bo'ladi va shuning uchun sayt ma'lum miqdordagi tashrif buyuruvchilarni yo'qotadi, shuning uchun ehtiyot bo'ling.
Haqiqiy misolni bu erda ko'rish mumkin:
Yuklab olish
Bu ushbu mavzu bo'yicha birinchi dars emas, ehtimol siz avvalgilarini ko'rmagansiz va ular siz uchun qiziqarli bo'ladi:
HTML qismi
Keling, ushbu shakl nimadan iboratligini ko'rib chiqaylik:
| 21 22 23 24 25 26 27 28 29 | <forma sinfi = "contact_form" action = "#" method = "post" name = "contact_form" > <ul > <li > <h2 > Bizga yozing</h2> <span klassi = "required_notification" >* maydonlarni kiritish shart</span> </li> <li > <= "ism" > uchun yorliq Nomi:</yorliq> <kiritish turi = "matn" to'ldiruvchisi = "Petrov Aleksandr" zarur / > </li> <li > <= "elektron pochta" > uchun yorliq Email:</yorliq> <kiritish turi = "elektron pochta" nomi = "elektron pochta" to'ldiruvchisi = "name@site" required / > !} <span klassi = "form_hint" > Masalan, "ism@sayt"</span> </li> <li > <= "veb-sayt" > uchun yorliq Veb sayt:</yorliq> <kiritish turi = "url" nomi = "veb-sayt" to'ldiruvchisi = "https://site" required pattern= "(http|https)://.+" / > !} <span klassi = "form_hint" > Masalan, "https://site"</span> </li> <li > <= "xabar" > uchun yorliq Xabar:</yorliq> <textarea name = "xabar" cols = "40" qator = "6" kerak > </li> <li > <tugma sinfi = "yuborish" turi = "yuborish" > Yuborish</ tugmasi> </li> </ul> </form> |
Agar siz o'tgan darslarni o'rgangan bo'lsangiz, unda siz kabi atributlar bilan tanishasiz joy ushlagich Va talab qilinadi.
Lekin men yana takrorlayman:
joy ushlagich— bu atributning mavjudligi ushbu matn maydonining fonida ushbu atribut qiymatida koʻrsatilgan matn boʻlishini bildiradi. Va siz yozganingizda, u yo'qoladi.
talab qilinadi— agar maydonda ushbu atribut mavjud bo‘lsa, maydonni to‘ldirish talab qilinadi.
Va biz Javascript-dan foydalanmadik, chunki HTML5 buni o'z funktsiyalari bilan amalga oshirishga imkon beradi.
Bu erda yangi atribut ham mavjud pattern="(http|https)://.+"— bu saytning veb-manzili nimadan boshlanishi kerakligini belgilaydi, aks holda xatolik yuz beradi.
CSS qismi
Endi biz HTML qismi bilan tugatdik va biz formamizga qarashimiz kerak. Chunki barcha shakl elementlari tartibsiz ro'yxatda, shuning uchun tegishli selektorlar yordamida uslublar o'rnatiladi:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .contact_form ul (kengligi : 750px ; roʻyxat uslubi turi : yoʻq ; roʻyxat uslubi-pozitsiyasi : tashqarida ; chekka : 0px ; toʻldirish : 0px ; ) .kontakt_formasi li ( toʻldirish : 12px ; chegara-pastki : 1px qattiq #eee; pozitsiya : nisbiy; ) .aloqa_shakli li :birinchi farzand , .kontakt_shakli li :oxirgi bola (chegara-pastki: 1px qattiq #777 ; ) |
Oxirgi xususiyat ro'yxatning birinchi va oxirgi elementiga chegara o'rnatishimizni bildiradi. Keyinchalik, biz shakl elementlari uchun asosiy uslublarni aniqlaymiz:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .contact_form yorlig'i (kenglik : 150px ; chekka tepa : 3px ; displey : inline- blok ; float : chap ; to'ldirish : 3px ; ) .contact_form kiritish (balandlik : 20px ; en : 220px ; to'ldirish : _ px px )actform 8.ea ( to'ldirish : 8px ; kenglik : 300px ; ) .kontakt_formasi tugmasi (chap chetida : 156px ; ) |
Endi maydonlar qachon faol va qachon faol bo'lmasa uchun uslublarni yozamiz:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .contact_form kiritish, .contact_form textarea (chegara : 1px qattiq #aaa ; quti soyasi : 0px 0px 3px #ccc , 0 10px 15px #eee inset ; chegara radiusi : 2px ; toʻldirish-oʻng: 30px ; -moz-padding .25s; -webkit-o'tish: to'ldirish .25s; -o-o'tish: to'ldirish .25s; o'tish: to'ldirish .25s; ) .kontakt_formasi kiritish:fokus , .kontakt_formasi matn maydoni:fokus (fon: #fff ; chegara : 1px qattiq # 555; quti soyasi: 0 0 3px #aaa; toʻldirish-oʻng: 70px;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .contact_form kiritish:talab , .contact_form matn maydoni:majburiy ( fon : #fff url (rasmlar/red_asterisk.png ) takrorlanmaydigan 98% markaz ; ) .contact_form kiritish:talab :valid , .contact_form textarea (talab qilinadigan fon ::id). #fff url (images/valid.png ) takrorlanmaydigan 98% markaz ; quti soyasi : 0 0 5px #5cd053 ; chegara rangi : #28921f ; ) .contact_form input:focus :invalid , .contact_form textarea:invalid (fon: #fff url (rasmlar/invalid.png) takrorlanmaydi 98% markaz; quti soyasi: 0 0 5px #d45252; hoshiya rangi: #b03535 ) |
Bir oz qoldi :). Oxirgi qadam - maslahatlar uchun uslublarni o'rnatish:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .form_hint (fon : #d45252 ; chegara radiusi : 3px 3px 3px 3px ; rang : oq ; chap chekka : 8px ; toʻldirish : 1px 6px ; z-indeks : 999 ; /* bu asboblar maslahati barcha elementlarning ustiga chiqishini bildiradi */ pozitsiyasi: mutlaq; /* siz maslahatni ikki qatorga bo'lishingiz mumkin */ ko'rsatish: yo'q; ) .form_hint : :oldin ( kontent : " \25C0 "; rang: # d45252; pozitsiyasi: mutlaq; yuqori: 1px; chap: -6px; ) .contact_form kiritish:focus + .form_shint (displey: inline; ) .contact_form kiritish:talab :valid + .form_shint (fon: #28921f ; ) .contact_form kiritish:talab :valid + .form_hiint (rang: :12fore ;) |
Va oxirgi qadam "Yuborish" tugmasi uchun uslubni o'rnatishdir:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | button.submit ( fon rangi : #68b12f ; fon : -webkit-gradient(chiziqli , chap tepa , chap past , dan(#68b12f ) , to(#50911e ) ); fon: -webkit-linear-gradient(yuqori , #68b12f , #50911e ) ; fon : -moz-linear-gradient (yuqorida, #68b12f , #50911e ) ; fon: -ms-linear-gradient (yuqorida, #68b12f , #50911e ) ; fon: -o- chiziqli- gradient(yuqori , #68b12f , #50911e ); fon : chiziqli gradient (yuqori , #68b12f , #50911e ); chegara : 1px qattiq #509111 ; chegara-pastki : 1px qattiq #5b992b ; border-web radius ; border-web radius -chegara radiusi: 3px; -moz-chegara radiusi: 3px; -ms-chegara radiusi: 3px; -o-chegara radiusi: 3px; quti soyasi: inset 0 1px 0 0 #9fd574 ; -webkit-box -shadow: 0 1px 0 0 #9fd574 inset ; -moz-box-shadow : 0 1px 0 0 #9fd574 inset ; -ms-box-shadow: 0 1px 0 0 #9fd574 inset ; -o-box-shadow: 0 1px 0 0 #9fd574 inset ; rang : oq ; shrift og'irligi : qalin ; to'ldirish: 6px 20px; matnni tekislash: markaz; matn soyasi: 0 -1px 0 #396715; ) button.submit :hover ( shaffoflik : .85; kursor : ko‘rsatgich ; ) button.submit :faol (chegara: 1px qattiq #20911e; box-shadow: 0 0 10px 5px #356b0b inset ; -webkit-box-shadow: 0 10px 5px #356b0b inset ; -moz-box-shadow : 0 0 10px 5px #356b0b inset ; -ms-box-shadow: 0 0 10px 5px #356b0b inset ; -o-box-shadow : 0 px 050b kiritish;) |
Xulosa
OK, endi hammasi tugadi! 🙂 Internet texnologiyalari shu qadar tez rivojlanmoqdaki, siz sezmasdan hamma HTML5+CSS3 kombinatsiyasidan foydalana boshlaydi. Albatta, eski brauzerlarda u yoki bu element qanday ko'rinishini hisobga olishingiz kerak, lekin siz yangi xususiyatlar haqida unutmasligingiz kerak!
Ushbu skriptdan foydalanish sizga kerakli shakl maydonlarini to'ldirishni tahlil qilish imkonini beradi. Ko'pgina boshqa forma analizatorlaridan farqli o'laroq, ushbu versiyada tekshirish server tomonida emas, balki mijoz tomonida amalga oshiriladi. Va faqat kerakli maydonlar to'ldirilgan taqdirda, kiritilgan ma'lumotlar serverga uzatiladi. Agar kerakli maydonlar to'ldirilmasa, bo'sh maydonlar ro'yxati ko'rsatilgan xabar chiqariladi va forma serverga yuborilmaydi.
Men www.prtut.ru veb-saytini yaratishda ushbu skriptdan foydalanganman.
Skript namoyishi
Misolda barcha maydonlar talab qilinadi.
Tavsif
Shaklda kerakli maydonlarni o'rnatish uchun faqat majburiy kiritishni talab qiladigan maydonlar uchun ko'rsatilgan o'zboshimchalik bilan talab qilinadigan atributdan foydalaning. Masalan:
Bu brauzerda shunday ko'rinadi:
Endi biz formadagi ba'zi maydonlarni majburiy qilamiz:
Ana xolos. Biz 1 daqiqadan kamroq vaqt ichida barcha maydonlarni majburiy qilib qo'ydik. Agar biz kerakli maydonlarni to'ldirmasak, biz quyidagi xabarlarni ko'ramiz:
Va muhimi. Bu tekshirish barcha zamonaviy brauzerlarda va faqat html 5 spetsifikatsiyasi uchun ishlaydi.. Boshlanmaganlar uchun html kodining boshiga teg qo'yish kerak..
Kirish maydonlarini loyihalashda hech qanday murakkab narsa yo'qdek tuyuladi: ma'lumotlarni kiritish uchun bo'sh to'rtburchaklar chizing, qolganini foydalanuvchi o'zi qiladi. Biroq, hamma narsa juda oddiy emas. Maqolaning uzunligiga qarab, juda ko'p qoidalar va xususiyatlar mavjudligi aniq. Foydalanuvchiga ehtiyotkorlik bilan "qo'l bilan rahbarlik qilish", hamma narsani ko'rsatish, tushuntirish va yordam berish kerak. Shunda va shundan keyingina biz undan kerakli ma'lumotlarni olishimiz mumkin bo'ladi. Xo'sh, boshlaylik!
7+ kiritish maydoni qoidalari
Eng asosiy qoida, hamma joyda bo'lgani kabi, o'zingizni tashrif buyuruvchining o'rniga qo'yishdir. Hammasi aniqmi? Bir qarashda maydonga nimani kiritish kerakligini tushunish mumkinmi? Maydon kiritilgan ma'lumotlarga adekvat javob beradimi?
Tavsiflar va maslahatlar yozing
Qanday ma'lumotlarni kiritish kerakligini, uni qanday to'g'ri kiritish kerakligini va kelajakda sayt ushbu ma'lumotlardan qanday foydalanishini ko'rsatish uchun maslahatlar va tavsiflar kerak.
Bir necha turdagi maslahatlar mavjud:
1) Belgilar
Belgilar universal vizual tildir. Ular bir qarashda ham nima kiritish kerakligini tushunishga yordam beradi. Ha, piktogrammalar dizayn fetishidir =)
Biroq, ularni doimo tushuntirish kerakligini unutmasligimiz kerak.
2) Misollar
Maydonni qanday to'ldirishni aytishning eng oson yo'li misol ko'rsatishdir. Misol misol: " [elektron pochta himoyalangan]»
3) tushuntirishlar
Ushbu turdagi tavsif sayt ma'lumotlardan qanday foydalanishini va nima uchun kerakligini tushuntirishga xizmat qiladi. Masalan: “Buyurtmangiz holati haqida sizni xabardor qilish uchun bizga pochta kerak. Biz spam yubormaymiz."
Maskalardan foydalaning
Ma'lumotlarning ma'lum bir tarzda formatlanishini talab qiladigan maydonlar uchun (masalan, bank kartasi raqami yoki telefon raqami) niqoblardan foydalanish kerak. Shunday qilib, biz ma'lumotni formatlash ishini tashrif buyuruvchining elkasidan ruhsiz mashinaga o'tkazamiz.
Quyida turli xil maskalarga misollar keltirilgan:
Majburiy maydonlarni belgilang
Agar ixtiyoriy maydonlar orasida to'ldirilishi kerak bo'lgan maydonlar mavjud bo'lsa, ularni boshqalar qatorida ajratib ko'rsatish va ularni majburiy to'ldirishga urg'u berish kerak. Qoida tariqasida, talab qilinadigan maydonlar yulduzcha - * bilan ko'rsatiladi.
Barcha kerakli maydonlarni birgalikda guruhlash va ularni shaklning boshiga joylashtirish yaxshiroqdir.
Aytgancha, yuqoridagi misolda 2 turdagi maslahatlar ham ko'rsatilgan: misollar va tushuntirishlar.
Fokus va klaviatura
Kursor joylashgan faol maydon o'ziga xos xususiyatga ega bo'lishi kerak. Qoida tariqasida, brauzerlar faol maydonlarni mustaqil ravishda ajratib ko'rsatishadi. Biroq, siz hamma narsani tasodifga qoldirmasligingiz va ushbu funktsiyaning funksionalligini o'zingiz tekshirishingiz kerak.
Sahifa yuklanganda, birinchi kiritish maydoni avtomatik ravishda faollashishi kerak. Go'yo sizni butun shaklni to'ldirishga taklif qilgandek. Shaklni to'ldirishda sichqonchani ishlatmasdan kiritish maydonlari o'rtasida almashish imkoniyati bo'lishi kerak. Bu odatda Tab tugmasini bosish orqali sodir bo'ladi.
Avtomatik to'ldirish bilan maslahatlardan foydalanilganda (masalan, qidiruvda) strelkalar yordamida elementni tanlash va Enter tugmasini bosish orqali tasdiqlash mumkin bo'lishi kerak.
Maxfiy ma'lumotlarni kiritishda (masalan, parol) foydalanuvchining iltimosiga binoan ushbu ma'lumotlarni yashirish va ko'rsatish imkoniyati bo'lishi kerak.
Allaqachon kiritilgan ma'lumotlardan foydalaning
Kirish maydonlari oddiy odamlar unutadigan narsalarni eslab qolishlari kerak. Bir xil ma'lumotni ikki marta so'rash qo'pollikdir. Agar siz bir marta saytning pochta ro'yxatiga obuna bo'lgan bo'lsangiz, ro'yxatdan o'tish paytida sayt sizni eslab qolishi va tegishli maydonga elektron pochtangizni kiritishi kerak.
Guruh kiritish maydonlari
To'ldirish qulayligi uchun o'xshash maydonlarni birgalikda guruhlash yaxshiroqdir. Masalan, shaxsiy ma'lumotlarni kiritish uchun maydonlar (ism, familiya, elektron pochta) bitta blok, etkazib berish manzili bo'lgan maydonlar boshqa blokdir.
Maydon o'lchamidan xabardor bo'ling
Maydon o'lchami ko'p hollarda foydalanuvchidan talab qilinadigan ma'lumotlar miqdorini baholashga xizmat qiladi. Bular. uzoq manzilni kiritishingiz kerak bo'lgan joyda, maydon katta. Shunday qilib, 6 xonali indeks kerak bo'lgan joyda, maydon kichikdir.
Nihoyat
Kirish maydonlarining dizayni birinchi qarashda ko'rinadigan darajada oddiy emas. Siz ko'plab nuanslarni eslab qolishingiz va doimo o'zingizga savol berishingiz kerak: "foydalanuvchi uchun hamma narsa tushunarli bo'ladimi?"
Ko'p sinchkov yigitlar 7 ta qoida umuman yo'qligini aytishadi (va ba'zilari buni sezmaganlar ham, ha ha ha). Biroq, ko'pgina qoidalar kichik, shuning uchun men ularni yarmi deb hisobladim. Va umuman olganda, menga 7 raqami yoqadi =)
