3. Formalar

Forma
Forma – foydalanuvchiga o'z ma'lumotlarini web sahifa orqali serverga jo'natishda (qayta ishlash uchun) imkonini beradi.
QODIRBEK MAXAROV

Forma va server
QODIRBEK MAXAROV
Name="John Smith"
Email="[e-mail]"
Web application
Response
(HTML)

form elementi
...
Atributlari:
action – forma ma'lumotlari jo'natiladigan manzil (server manzili)
method – forma ma'lumotlarini jo'natish metodi (GET | POST)
accept-charset – forma ma'lumotlarini serverga jo'natish kodirovkasi
autocomplete – ushbu formaga foydalanuvchi tomonidan oldin kiritilgan ma'lumotlardan avtomatik foydalanish imkoniyati (on | off)
novalidate – forma ma'lumotlarini serverga jo'natishdan oldin validatsiyadan o'tkazmaslik (qiymatsiz atribut)
enctype – forma ma'lumotlarini serverga jo'natishdagi kodlash
(text/plain – probellar + belgisiga almashtiriladi | multipart/form-data hech narsa kodlanmaydi, fayllar jo'natishda ishlatiladi | application/x-www-form-urlencoded – probellar + belgisiga, maxsus belgilar ASCII HEX qiymatlariga almashtiriladi)
QODIRBEK MAXAROV

Forma elementlari
Forma quyidagi elementlardan tashkil topishi mumkin:
<br><button><br><fieldset><br><legend><br><datalist><br><option><br><optgroup><br><output><br><progress><br><meter><br><p>QODIRBEK MAXAROV<br></div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-4.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Forma elementlari Forma quyidagi elementlardan tashkil topishi mumkin: QODIRBEK MAXAROV" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-4.jpg 1440w" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-5.jpg" target="_blank" rel="noopener">Слайд 6</a><h3 class="slides-content text-center font-bold"><div><p>input elementi<br><p>input elementi turlari:<br><input type="button"><br><input type="checkbox"><br><input type="color"><br><input type="date"><br><input type="datetime-local"><br><input type="email"><br><input type="file"><br><input type="hidden"><br><input</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-5.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="input elementi input elementi turlari: QODIRBEK MAXAROV" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-5.jpg 1440w" class="slides-image"><!----><div class="slides-content">type="image"><br><input type="month"><br><input type="number"><br><input type="password"><br><input type="radio"><br><input type="range"><br><input type="reset"><br><input type="search"><br><input type="submit"><br><input type="tel"><br><input type="text"><br><input type="time"><br><input type="url"><br><input type="week"><br><p>QODIRBEK MAXAROV<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-6.jpg" target="_blank" rel="noopener">Слайд 7</a><h3 class="slides-content text-center font-bold"><div><p>Elementlar atributlari<br><p>name – element nomi<br>value – element qiymati<br>readonly – element faqat o'qish</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-6.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Elementlar atributlari name – element nomi value – element qiymati readonly –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-6.jpg 1440w" class="slides-image"><!----><div class="slides-content">uchun mo'ljallangan<br>required – element majburiy<br>disabled – element noaktiv<br>size – foydalanuvchiga ko'rinadigan belgilar miqdori orqali kenglik (text, search, tel, url, email va password)<br>minlength, maxlength – kiritish mumkin bo'lgan minimal va maksimal belgilar miqdori<br>min, max – input maydonining minimal va maksimal qiymati (number, range, date, datetime-local, month, time va week)<br>multiple – input maydoniga bir nechta qiymat kiritish mumkinligi (email va file)<br>pattern – input maydoni qiymatini regulyar ifoda orqali tekshirish (text, date, search, url, tel, email va password)<br>placeholder – input maydoni qiymati uchun yordamchi matn (text, search, url, tel, email va password)<br>step – input maydonidagi sonli qiymatlar uchun qadamni aniqlash (number, range, date, datetime-local, month, time and week)<br>autofocus – sahifa yuklanganda element avtomatik fokusni olishini aniqlash<br>list – input elementi qiymatlarini oldindan aniqlangan <datalist> orqali olishni ko'rsatish<br>autocomplete – avtomatik to'ldirish uchun yordam (text, search, url, tel, email, password, datepickers, range va color)<br>id - identifikator<br>class – sinf (stillar uchun)<br><p>QODIRBEK MAXAROV<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-7.jpg" target="_blank" rel="noopener">Слайд 8</a><h3 class="slides-content text-center font-bold"><div><p>Matn kiritish elementlari<br><p><form action="" method="GET"><br> <input type="text" placeholder="Biror matn kiriting" minlength="4"><br> <input</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-7.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Matn kiritish elementlari QODIRBEK MAXAROV" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-7.jpg 1440w" class="slides-image"><!----><div class="slides-content">type="email" placeholder="Pochta manzilini kiriting"><br> <input type="password"><br> <input type="search" placeholder="Qidirish"><br> <input type="url" placeholder="URL manzil kiritasiz" size="15"><br> <input type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br></form><br><p>QODIRBEK MAXAROV<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-8.jpg" target="_blank" rel="noopener">Слайд 9</a><h3 class="slides-content text-center font-bold"><div><p>Matn kiritish elementlari<br><p>QODIRBEK MAXAROV<br></div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-8.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Matn kiritish elementlari QODIRBEK MAXAROV" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-8.jpg 1440w" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>Matn kiritish elementlari<br><p><form action="" method="GET"><br> <input type="text" value="Oldindan kiritilgan matn" disabled><br> <input type="email" placeholder="Pochta manzilini kiriting" required><br> <input type="password"><br> <input type="search" placeholder="Qidirish" minlength="4" required><br> <input type="url" placeholder="URL manzil kiritasiz" size="15"><br> <input type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br> <input type="submit" value="Jo'natish"><br></form><br><p>QODIRBEK MAXAROV<br></div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Matn kiritish elementlari QODIRBEK MAXAROV" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-9.jpg 1440w" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p>Tugmalar<br><p><input type="submit"> - serverga jo'natish<br><input type="reset"> - formani tozalash<br><input type="image"> - rasmli tugma<br><input type="button"> - ixtiyoriy</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-10.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Tugmalar - serverga jo'natish - formani tozalash - rasmli tugma - ixtiyoriy" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/981961/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/981961/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/981961/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/981961/slide-10.jpg 1440w" class="slides-image"><!----><div class="slides-content">tugma<br><button></button> - tugma (qo'shimcha imkoniyatlari mavjud)<br><input type="submit" value="Jo'natish"><br><input type="reset" value="Tozalash"><br><input type="image" src="workplace.jpg" width="100"><br><input type="button" value="Tekshirish"><br><button><b>Salom</b> <i>olam</i></button><br><p>QODIRBEK MAXAROV<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/981961/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Matn kiritish elementlari<br><p><textarea>...
- ko'p qatorli matn kiritish
Atributlari:
cols – ko'rinadigan soha kengligi
rows
– ko'rinadigan soha uzunligi
QODIRBEK MAXAROV
Слайд 13
WYSIWYG tahrirlovchilar
WYSIWYG = What You See Is What You Get
CKEditor
Froala
TinyMCE
Dreamweaver
QODIRBEK MAXAROV
Слайд 14
radio va checkbox elementlari
How old are you?
under 24
25 to 34
35 to 44
45+
What type of music do you listen to?
Indie
Pop music
Rock
Folk music
Hip hop music
QODIRBEK MAXAROV
Слайд 15
Vizual guruhlash va nomlash
How old are you?
under 24
25 to 34
35 to 44
45+
What type of music do you listen to?
Indie
Pop music
Rock
Folk music
Hip hop music
QODIRBEK MAXAROV
Слайд 16
Fayl tanlash
QODIRBEK MAXAROV
Слайд 17
Raqamli elementlar
QODIRBEK MAXAROV
Слайд 18
Sana va vaqtli elementlar
- sana elementi
- vaqt elementi – ko'rinadigan soha uzunligi
QODIRBEK MAXAROV

WYSIWYG tahrirlovchilar
WYSIWYG = What You See Is What You Get
CKEditor
Froala
TinyMCE
Dreamweaver
QODIRBEK MAXAROV

radio va checkbox elementlari
How old are you?
under 24
25 to 34
35 to 44
45+
What type of music do you listen to?
Indie
Pop music
Rock
Folk music
Hip hop music
QODIRBEK MAXAROV

Vizual guruhlash va nomlash
How old are you?
under 24
25 to 34
35 to 44
45+
What type of music do you listen to?
Indie
Pop music
Rock
Folk music
Hip hop music
QODIRBEK MAXAROV

Fayl tanlash
QODIRBEK MAXAROV

Raqamli elementlar
QODIRBEK MAXAROV

Sana va vaqtli elementlar

Sana va vaqtli elementlar
QODIRBEK MAXAROV

Yashirin element
Ushbu element foydalanuvchi uchun ko'rinmaydi.
QODIRBEK MAXAROV

label elementi
Familiya
Ism
1-kurs
2-kurs
3-kurs
QODIRBEK MAXAROV

select, option va optgroup
select – ochiladigan (dropdown) ro'yxat yaratish
autofocus – avtomatik focus olish
disabled – aktiv bo'lmagan ro'yxat
multiple – ro'yxatda bir nechta element tanlash imkoniyati
required – majburiy bo'lgan element
size – ro'yxatdagi ko'rinib turuvchi elementlar miqdori
option – ro'yxatning har bir elementini aniqlash
disabled – aktiv bo'lmagan ro'yxat elementi
selected – tanlangan ro'yxat elementi
value – ro'yxat elementi qiymati
optgroup – ro'yxat elementlarini mantiqiy (vizual) guruhlash
disabled – aktiv bo'lmagan ro'yxat elementi
QODIRBEK MAXAROV

select, option va optgroup
Choose a car:
Volvo
Saab
Mercedes
Audi
Toyota
VAZ
QODIRBEK MAXAROV

datalist elementi
datalist – input elementi uchun oldindan aniqlangan qiymatlar ro'yxati.
Choose your browser from the list:
QODIRBEK MAXAROV

progress va meter elementlari
progress – biror jarayonning bajarilish indikatori
max – jarayon bajarilishi uchun zarur bo'lgan umumiy ish (topshiriq) hajmi
value – tugallangan topshiriqlar
meter – oldindan aniq bo'lgan diapazondagi skalyar o'lchov yoki kasr qiymat (datchik)
min – minimum qiymat
max – maksimum qiymat
low – past qiymat chegarasi
high – yuqori qiymat chegarasi
optimum – optimal qiymat
value – joriy qiymat
QODIRBEK MAXAROV

progress va meter elementlari
Downloading progress:
32%
Disk usage C:
90%
Disk usage D:
60%
Anna's score:
Peter's score:
Linda's score:
QODIRBEK MAXAROV