Mavzu: Bootstrapda formalar bilan ishlash

Download 25.26 Kb.
Sana	24.02.2024
Hajmi	25.26 Kb.
	#161689

Bog'liq
nodirbek. mustaqil ish
Diyorbek, 13-лекция узб, Mavzu Kimyo fanini rivojlantirishda o’z xissalarini qo’shgan O’, 29096 4. Modda tuzilishi-2015, MAQOLA, MILLIY VA ADABIY TIL, 6-bayon 8-mart, 6-bayon 8-mart, Tazalaw stanciyasi , Doc1, Nazariy materiallar 1-mavzu pedagogik kreativlik mohiyati, mazm-fayllar.org (5), 01-01-867, content, Boranbaeva Janagul (2)

S.914-22 GURUH TALABASI RAZZOQOV NODIRBEKNING WEB DASTURLASHGA KIRISH FANIDAN MUSTAQIL ISHI.
Mavzu: Bootstrapda formalar bilan ishlash.
Reja:

Formani Bootstrapda yaratishdagi 6 ta usul.

Bootstrapda formalar bilan ishlashni osonlashtiruvchi elementlar.

3. Bootstrap orqali formalar bilan ishlashning asosiy qadamlari.

Bootstrap, veb saytlar yaratish uchun mashhur bir CSS va JavaScript frameworkidir. Formalar bilan ishlash uchun esa Bootstrapning form komponentlaridan foydalanish mumkin.

Formani Bootstrapda yaratish uchun quyidagi usulni amalga oshirishingiz mumkin:

tegini veb sahifedagi formga belgilang.

div elementini ichida kerakli input, label va boshqa elementlarni joylashtiring.
3. label va input elementlarni form-group div elementining ichida birgam chiqaring.
4. elementiga atributini qo'shing.
5. Boshqa form elementlarini ham Responsive Grid System bilan birgalikda joylashtirish mumkin.
6.

Checkbox misol

Bu tanlovlar va form elementlari kodingizda ko'rinadigan joylarga joylashtirilgan shaklga ega bo'lishi mumkin. Umid qilamanki bu sizga kodingizni amalga oshirishda yordam beradi.
Bootstrapda formalar bilan ishlashni osonlashtirish uchun quyidagi Elementlardan foydalanishingiz mumkin:

- Formani belgilash uchun ishlatiladi.

2. - Qabul qilish uchun matn, email manzili, raqam va boshqalar kabi ma'lumotlarni kiritish imkonini beradi.
3.

- Ko'p qatorli matn qabul qilish uchun ishlatiladi.
<br />5. <label> - Qo'shimcha matn elementiga asoslanuvchi matnlar uchun ishlatiladi.
<br />6. <button> - Formani yuborish tugmasini yaratish uchun ishlatiladi.
<br />7. <div > - Elementlarni guruhlarga bo'lish uchun ishlatiladi.
<br />
<p>Shuningdek, Bootstrap form komponentlaridan foydalanishingiz mumkin. Masalan:</p>

<br />
<p>- <div > - Checkbox va radio tugmalari uchun ishlatiladi.</p>

<br />- <div > - Form elementlarini ranglangan bir kukorgan div elementiga kiritish imkonini beradi.
<br />
<p>Bu bilan birga, siz Bootstrapning grid tizimidan ham foydalanishingiz mumkin, shu yerdagi sinov shakli:</p>

<br />
<br />
<br /><div >
<br /><div >
<br /><div >
<br /><form>
<br /><div >
<br /><label for="exampleFormControlInput1">Email manzili</label>
<br /><input type="email" id="exampleFormControlInput1" placeholder="name@example.com">
<br /></div>
<br /><div >
<br /><label for="exampleFormControlSelect1">Tanlov</label>
<br /><select id="exampleFormControlSelect1">
<br /><option>Tanlov 1</option>
<br /><option>Tanlov 2</option>
<br /><option>Tanlov 3</option>
<br /></select>
<br /></div>
<br /><div >
<br /><label for="exampleFormControlTextarea1">Matn kiritish</label>
<br /><textarea id="exampleFormControlTextarea1" rows="3">

Checkbox misol

Bu tanlovlar va form elementlari kodingizda ko'rinadigan joylarga joylashtirilgan shaklga ega bo'lishi mumkin. Umid qilamanki bu sizga kodingizni amalga oshirishda yordam beradi

Bootstrap orqali yayilgan veb-saytingizda formalar bilan ishlash juda oson. Sizga qo'llanma Evolyutsionaryord xo'yasini topishingiz kerak. Bu qo'llanmada Bootstrap formalaridan foydalanishni to'liq o'rganish mumkin. Asosiy qo'llanmalarni o'qish orqali siz formaning oxirida "submit" tugmasini qo'yish va formulardagi ma'lumotlarni to'lov bilan qabul qilish mumkin. Formani tasdiqlash uchun JS va PHP kodlarini ham qo'shishingiz kerak. Jiddiy loyihalarda esa formani serverning tomonidan tekshirish javoblari sifatida server ishchi skriptdan keladigan xatoliklarni qaytarib, ulardan foydalanuvchining kiritgan xatolarni tuzatish mumkin. Bunda AJAX ham ishlatishingiz, shunda sayt sahifadagi ma'lumotlar yagona sahifada aylanib ketmay, chunki siz sahifani doimiy yangilash kerak emas. Bu barcha bilan osonroq qilinishi mumkin.

Bootstrapda formalar bilan ishlashni osonlashtirish uchun quyidagi Elementlardan foydalanishingiz mumkin:

- Formani belgilash uchun ishlatiladi.

2. - Qabul qilish uchun matn, email manzili, raqam va boshqalar kabi ma'lumotlarni kiritish imkonini beradi.
3.

<br />
<p>- <div > - Checkbox va radio tugmalari uchun ishlatiladi.</p>

Checkbox misol

Bu tanlovlar va form elementlari kodingizda ko'rinadigan joylarga joylashtirilgan shaklga ega bo'lishi mumkin. Umid qilamanki bu sizga kodingizni amalga oshirishda yordam beradi
Bootstrap orqali formalar bilan ishlashning asosiy qadamalari quyidagicha:

1. Bootstrap kutubxonasini sahifangizga qo'shib oling. Bu uchun, tegini HTML bo'limiga qo'shing:

2. Formani yaratish uchun

3. Raqamli "form-control" sinfi yordamida "input" elementini stilizatsiyalang. "for" attributi "label" element bilan bog'langanligini bildiradi.

4. "button" tugmasi "btn" va "btn-primary" sinflari bilan stilizatsiyalang.

5. "form-control" sinfi textarea elementlariga ham qo'l keladi.

6. Formaning shaklini ko'rsatish uchun Bootstrapning grid tizimini ham ishlatishingiz mumkin.

Bu shuningdek, siz Bootstrapdan foydalanib, formaning yana qo'shimchalarni va yangi elementlarni qo'shishingiz mumkin. Shuningdek, formaning konfiguratsiyasi va validatsiyasi uchun Bootstrap yordamida yaratilgan JavaScript kodlariga ham ega bo'lishingiz mumkin.

Bootstrapda formalar bilan ishlashni osonlashtirish uchun quyidagi Elementlardan foydalanishingiz mumkin:

- Formani belgilash uchun ishlatiladi.

2. - Qabul qilish uchun matn, email manzili, raqam va boshqalar kabi ma'lumotlarni kiritish imkonini beradi.
3.

<br />
<p>- <div > - Checkbox va radio tugmalari uchun ishlatiladi.</p>

Checkbox misol

Bu tanlovlar va form elementlari kodingizda ko'rinadigan joylarga joylashtirilgan shaklga ega bo'lishi mumkin. Umid qilamanki bu sizga kodingizni amalga oshirishda yordam beradi

Bootstrap formalarisini ishlash uchun quyidagi qadamalar ma'lum:

1. Bootstrapni ma'lumotlardan yuklang (CSS va JS fayllari). Shuningdek, HTML sahifaga va
2. HTML sahifada formani yaratish uchun

3. Bootstrap formani shakllantirish uchun classlardan foydalanishingiz mumkin. Masalan, form-control klasisini input elementlariga qo'shing va btn, btn-primary klaslarini tugma (button) elementiga qo'shing. Bu klaslar Bootstrapning standart joylashtirilgan klasslari hisoblanadi.

Shu tarzda, Bootstrap bilan shakllantirilgan formalar yaratishingiz mumkin. Bootstrapning boshqa xususiyatlari va classlari mavjudligi sizga keng imkoniyatlar beradi, shuning uchun dokumentatsiyadan foydalanishingiz foydalidir.

Download 25.26 Kb.