Html shakli namunasi. HTML formatidagi shakllar

Tavsif

teg

Idishning ichida ruxsat berilgan

Sintaksis

Atributlar

Server ma'lumotlarni qabul qilishi va qayta ishlashi mumkin bo'lgan kodlashni o'rnatadi.

Majburiy.

Guruch. 1. Brauzer oynasida forma elementlarini ko'rish

HTML formasi hujjatning bir qismi bo'lib, foydalanuvchini qiziqtirgan ma'lumotlarni kiritish imkonini beradi, keyinchalik uni server tomonida qabul qilish va qayta ishlash mumkin. Boshqacha qilib aytganda, shakllar foydalanuvchilar tomonidan kiritilgan ma'lumotlarni yig'ish uchun ishlatiladi.

Joriy yorliq qaysi shakl elementiga tegishli ekanligini aniqlash uchun tegning for atributidan foydalanish kerak . For atributining qiymati teg qo'llaniladigan shakl elementining global atributining qiymatiga mos kelishi kerak. Agar element bo'lsa for atributidan foydalanilmasligi mumkin element ichida bo'ladi .

Keling, foydalanish misolini ko'rib chiqaylik:

Ushbu misolda biz:

• Ichkarida birinchi shakllari:
  • Joylashtirilgan ikki radio tugmalari ( ) cheklangan miqdordagi variantlardan birini tanlash uchun. Yana bir bor e'tibor bering, bir xil shakldagi radio tugmalari uchun bir xil nom ko'rsatilishi kerak, biz turli qiymatlarni belgiladik. uchun birinchi Belgilangan , bu sahifa yuklanganda elementni oldindan tanlash kerakligini bildiradi (in Ushbu holatda yes qiymati bilan radio tugmasi). Bundan tashqari, biz element uchun noyob identifikatorni belgilaydigan radio tugmalar uchun global atributlarni aniqladik.
  • Ikki element joylashtirilgan , bu bizning matn maydonlarimiz uchun matn teglarini belgilaydi. E'tibor bering, biz joriy yorliq qaysi shakl elementiga tegishli ekanligini aniqlash uchun for atributidan foydalanganmiz. For atributining qiymati bizga kerak bo'lgan radio tugmachasining global atributining qiymatiga mos keladi.
• Ichkarida ikkinchi shakllari:
  • Joylashtirilgan ikki radio tugmalari ( ) cheklangan miqdordagi variantlardan birini tanlash uchun. uchun ikkinchi Radio tugmalari uchun biz tekshirilgan atributni belgilab oldik, bu sahifa yuklanganda elementni oldindan tanlash kerakligini ko'rsatadi (bu holda, no qiymatiga ega radio tugmasi). Bundan tashqari, biz formadagi radio tugmalari va bir xil nomlar uchun noyob qiymatlarni belgilab oldik.
  • Ikki element joylashtirilgan , biz ularning ichiga radio tugmachalarimizni joylashtirdik. Oldingi usuldan farqli o'laroq, radio tugmalar uchun global atributlarni (element uchun identifikator) belgilashning hojati yo'q va ularga murojaat qilish uchun matn teglari uchun for atributidan foydalaning (bog'lash).

Brauzerda matn belgilaridan foydalanishning ikkala varianti (usullari) bir xil ko'rinadi:

Kirish maydonlari uchun maslahat

Keling, foydalanish misolini ko'rib chiqaylik:

Ushbu misolda biz element uchun belgiladik matnni yozing (bir qatorli matn maydoni) va parolni kiriting (parol maydoni), kiritish uchun kutilgan qiymatni tavsiflovchi foydalanuvchi uchun matnli maslahat (to'ldiruvchi atribut).

Bizning misolimiz natijasi:

Mavzu bo'yicha savol va topshiriqlar

Keyingi mavzuga o'tishdan oldin amaliy topshiriqni bajaring:

• Olingan bilimlaringizdan foydalanib, quyidagi buyurtma shaklini yarating:

Ogohlantirish: tanlov kutilayotgan maydonlarda faqat elementning o'zida emas, balki matnni bosish orqali tanlash mumkin bo'lishi kerak.

Mashqni bajarganingizdan so'ng, hamma narsani to'g'ri bajarganingizga ishonch hosil qilish uchun misolni alohida oynada ochib, sahifa kodini tekshiring.

Saytdagi HTML shakllarini belgilaydigan HTML teglari

Biz Internetda veb-saytlar va individual sahifalar yaratamiz tashrif buyuruvchilar bilan muloqot qilish.

HTML shakllari saytga tashrif buyuruvchilarni ro'yxatdan o'tkazish, interaktiv so'rovlar va ovoz berish uchun ishlatiladi, xabarlar yuborish, xaridlarni amalga oshirish va hokazo. HTML Shakl bitta maqsad uchun yaratilgan: dasturiy ta'minot skripti yoki elektron pochta orqali qayta ishlash uchun ma'lumotlarni to'plash va keyinchalik uzatish.

Misol HTML formasi | Saytga kiring

Teglar, atributlar va qiymatlar

• - shaklini aniqlang.
• name="" - shakl nomini belgilaydi.
• method="" - formadan ma'lumotlarni jo'natish usulini belgilaydi. Qiymatlar: "olish" (standart) va "post" . "Post" usuli tez-tez ishlatiladi, chunki u katta hajmdagi ma'lumotlarni uzatish imkonini beradi.
• action="" - ma'lumotlar qayta ishlash uchun yuboriladigan urlni belgilaydi. Bizning holatda - enter_data.php ..
• - tugmalar, kalitlar, ma'lumotlarni kiritish uchun matn maydonlari kabi shakl elementlarini aniqlash.
• type="text" - ma'lumotlarni kiritish uchun matn maydonini belgilaydi.
• type="password" - parolni kiritish maydonini belgilaydi, matn yulduzcha yoki doira shaklida ko'rsatiladi.
• type="checkbox" - radio tugmani belgilaydi.
• type="hidden" - yashirin shakl elementini belgilaydi - uzatish uchun ishlatiladi Qo'shimcha ma'lumot serverga.
• size="25" - matn maydonining belgilar bilan uzunligi.
• maxlength="30" - kiritilgan belgilarning ruxsat etilgan maksimal soni.
• value="" - agar u radio tugmalari yoki kalitlarga tegishli bo'lsa, ishlov berish uchun yuboriladigan qiymatni belgilaydi. Matn maydoni yoki tugma qismi sifatida ushbu atributning qiymati yuqoridagi misolda, masalan, Vasya yoki Login sifatida ko'rsatiladi.

Misol HTML formasi | Saytdagi sharhlar

Teglar, atributlar va qiymatlar

• action="http://site/comments.php" - formadagi ma'lumotlar yuboriladigan urlni belgilaydi.
• id="" - forma elementining nomi va identifikatorini belgilaydi.
• name="" - shakl elementining nomini belgilaydi.
• - shaklning bir qismi sifatida matn maydonini belgilash.
• cols="" - shakl matn maydonining ustunlar sonini aniqlaydi.
• rows="" - shakl matn maydonining qatorlar sonini belgilaydi.

Agar orasida matnni joylashtiring, u osongina olib tashlanishi mumkin bo'lgan misol sifatida maydon ichida ko'rsatiladi.

Misol HTML formasi | Ochiladigan ro'yxat

Teglar, atributlar va qiymatlar

• - tanlash uchun pozitsiyalar bilan ro'yxatni belgilang.
• size="" - ko'rinadigan ro'yxat pozitsiyalari sonini aniqlaydi. Agar qiymat 1 bo'lsa, biz ochiladigan ro'yxat bilan ishlaymiz.
• - ro'yxatning pozitsiyalarini (bandlarini) aniqlash.
• value="" - shakl tomonidan ko'rsatilgan url-ga ishlov berish uchun yuboriladigan qiymatni o'z ichiga oladi.
• seçilmiş="tanlangan" - misol sifatida ro'yxat elementini ajratib ko'rsatadi.

Misol HTML formasi | O'tkazish paneli bilan ro'yxat

Size="" atributining qiymatini oshirish orqali biz aylantirish paneli bilan ro'yxatni olamiz:

Ushbu parametr uchun bir nechta pozitsiyani tanlash imkonini beruvchi multiple="multiple" bayrog'idan foydalaning. Uning yo'qligi faqat bitta elementni tanlash imkonini beradi.

Qo'shimcha qarang:

Shakllar foydalanuvchidan veb-serverga ma'lumotlarni yuborish uchun mo'ljallangan. HTML formatidagi shakllar matn maydonlari va matn maydonlari, belgilash katakchalari va radio tugmalar va ochiladigan ro'yxatlardan iborat bo'lishi mumkin. Bularning barchasi shakl elementlari. Har bir element saytga qandaydir ma'no etkazishga xizmat qiladi.
Asosan, HTML formasi veb-sahifa bo'lib, unda siz ma'lumotlaringizni kiritish joylarini ko'rasiz. Shaklni to'ldirib, "yuborish" tugmasini bosganingizdan so'ng, shakldagi ma'lumotlar paketlanadi va server tomonidagi skript (ishlovchi fayli) tomonidan qayta ishlash uchun veb-serverga yuboriladi. Qayta ishlashdan so'ng sizga javob sifatida boshqa veb-sahifa qaytariladi. Quyidagi rasmda shakl qanday ishlashi aniq ko'rsatilgan:

HTML shakllarini yaratishda hech qanday qiyin narsa yo'q. Shakllar haqida tasavvurga ega bo'lishning eng oson yo'li - ozgina HTML kodini tahlil qilish va keyin uning qanday ishlashini ko'rish. Quyidagi misolda oddiy HTML formasini yaratish sintaksisi ko'rsatilgan:

Misol: Oddiy HTML formasi

• O'zingiz sinab ko'ring »

Mening birinchi shaklim:
Nomi:
Familiya:

Element

Shakllar element yordamida veb-sahifalarga kiritiladi . U barcha shakl mazmuni, jumladan, matn maydonlari va tugmalar kabi elementlar hamda boshqa HTML teglari uchun konteynerni taqdim etadi. Biroq, u boshqa elementni o'z ichiga olmaydi .
Shaklni serverga yuborish uchun “Yuborish” tugmasidan foydalaning, forma ichidagi “Enter” tugmasini bossangiz xuddi shunday natijaga erishiladi. Agar formada "Yuborish" tugmasi bo'lmasa, "Enter" tugmasi orqali yuborish mumkin.
Ko'pgina element atributlari uning dizayni emas, balki shaklni qayta ishlashga ta'sir qiladi. Ulardan eng keng tarqalganlari harakat Va usuli. Atribut harakat forma ma'lumotlari server tomonidan qayta ishlash uchun yuboriladigan URL manzilini o'z ichiga oladi. Atribut usuli brauzerlar shakl ma'lumotlarini yuborish uchun foydalanishi kerak bo'lgan HTTP usulidir.

Element

Deyarli barcha shakl maydonlari element yordamida yaratilgan (inglizcha kiritishdan - kiritish). Tashqi ko'rinish element atributining qiymatiga qarab o'zgaradi turi:

Bu erda ba'zi atribut qiymatlari turi:

Matn va parolni kiritish

Shakl elementlarining eng oddiy turlaridan biri matn maydoni bo'lib, matnni bir qatorga kiritish uchun mo'ljallangan. Bu tur matn kiritish sukut bo'yicha o'rnatiladi va shuning uchun agar siz atributni belgilashni unutib qo'ysangiz, u bir qatorli maydon ko'rsatiladi. turi. Shaklga bir qatorli matn kiritish maydonini qo'shish uchun siz element ichiga kirishingiz kerak atributni ro'yxatdan o'tkazing turi matn qiymati bilan:

Parolni kiritish maydoni oddiy matn maydonining bir turi. U bir qatorli matn maydoni bilan bir xil atributlarni qo'llab-quvvatlaydi. Atribut nomi foydalanuvchi kiritgan parol bilan birga serverga yuboriladigan parolni kiritish maydoni nomini belgilaydi. Parol maydonini yaratish uchun parol atributini o'rnatishingiz kerak turi(parol (ingliz) - parol):

Parol maydoni bilan shakl yaratish misoli:

Misol: Parol maydoni

• O'zingiz sinab ko'ring »

Sizning login:

Parol:

Sizning login:

Parol:

Ushbu atribut bilan birgalikda atributdan foydalanishingiz mumkin maksimal uzunlik, uning qiymati berilgan satrga kiritilishi mumkin bo'lgan belgilarning maksimal sonini belgilaydi. Bundan tashqari, atribut yordamida kiritish maydonining uzunligini belgilashingiz mumkin hajmi. Odatiy bo'lib, ko'pchilik brauzerlar matn maydonining kengligini 20 belgigacha cheklaydi. Atribut o'rniga yangi shakl elementlarining kengligini boshqarish uchun hajmi, biz kaskadli uslublar jadvallaridan (CSS) foydalanishni tavsiya qilamiz.
Atribut qiymat forma yuklanganda matn maydonida sukut bo'yicha ko'rsatiladigan qiymatni belgilaydi. Maydonga standart qiymatni kiritish orqali siz foydalanuvchiga aynan qaysi ma'lumotlarni va qaysi formatda foydalanuvchini bu yerga kiritishini istayotganingizni tushuntirishingiz mumkin. Bu namunaga o'xshaydi, chunki foydalanuvchi oldida misolni ko'rib, shaklni to'ldirish ancha qulayroqdir.

Kalitlar (radio)

Element turi radio mantiqiy "YOKI" tamoyilidan foydalanadigan kalitlarni yaratadi, bu sizga bir nechta qiymatlardan faqat bittasini tanlash imkonini beradi: agar siz bitta pozitsiyani tanlasangiz, qolganlari nofaol bo'ladi. O'zgartirish elementining asosiy sintaksisi:

Atribut nomi for switches talab qilinadi va bir nechta kalit elementlarini guruhga birlashtirishda muhim rol o'ynaydi. Radio tugmalarini guruhga birlashtirish uchun siz bir xil atribut qiymatini o'rnatishingiz kerak nomi va har xil atribut qiymati qiymat. Atribut qiymat serverga yuboriladigan tanlangan radio tugma qiymatini belgilaydi. Har bir radio tugma elementining qiymati guruh ichida noyob bo'lishi kerak, shunda server foydalanuvchi qaysi javob variantini tanlaganini biladi.
Atribut mavjudligi tekshirildi(ingliz tilidan - o'rnatilgan) almashtirish elementida, agar kerak bo'lsa, sahifani yuklashda taklif qilingan variantlardan qaysi biri sukut bo'yicha tanlanishi kerakligini ko'rsatadi. Ushbu atribut faqat guruhdagi bitta radio tugma elementi uchun o'rnatilishi mumkin:

• O'zingiz sinab ko'ring »

Yoshingiz nechida?

1. 18 yoshdan kichik
2. 18 dan 24 gacha
3. 25 dan 35 gacha
4. 35 dan ortiq

Harakat atributi.

Element uchun asosiy

Qayta ishlash fayli serverda joylashgan mytestserver.com papkada nom papkasi va ma'lumotlarni qayta ishlaydigan server skriptining nomi - obrabotchik.php. Veb-sahifadagi shaklga kiritilgan barcha ma'lumotlar unga o'tkaziladi. .php kengaytmasi belgilangan shakl PHP da yozilgan skript tomonidan qayta ishlanishini bildiradi. Ishlovchining o'zi boshqa tilda yozilishi mumkin, masalan, Python, Ruby va boshqalar skript tili bo'lishi mumkin.
Har doim atribut qiymatini o'rnatish tavsiya etiladi harakat. Agar forma qiymatlarni o'zi joylashgan sahifaga o'tkazishi kerak bo'lsa, harakat atributining qiymati sifatida bo'sh qatorni kiriting: action="".

usul atributi

Atribut usuli ma'lumotlarning serverga qanday uzatilishi kerakligini belgilaydi. Siz tanlagan shaklni yuborish usuli shakl bilan yubormoqchi bo'lgan ma'lumotlaringizga bog'liq. Bu erda ma'lumotlarning hajmi katta rol o'ynaydi. Shakl manbasi ma'lumotlarini brauzerdan serverga o'tkazishning eng mashhur ikki usuli: OLISH Va POST. Usul siz tanlagan har qanday usulga o'rnatilishi mumkin va agar siz uni belgilamasangiz, sukut bo'yicha foydalaniladi OLISH. Keling, ularning har biridan foydalanishni ko'rib chiqaylik.

POST usuli

Usul POST paketlar ma'lumotlarni shakllantiradi va uni serverga foydalanuvchi sezdirmasdan yuboradi, chunki ma'lumotlar xabarning asosiy qismida joylashgan. Veb-brauzer, usuldan foydalanganda POST serverga maxsus sarlavhalardan so'ng forma ma'lumotlaridan iborat so'rov yuboradi. Ushbu so'rovning mazmuni faqat serverda mavjud bo'lganligi sababli, usul POST parollar, bank kartasi tafsilotlari va foydalanuvchilarning boshqa shaxsiy ma'lumotlari kabi maxfiy ma'lumotlarni uzatish uchun foydalaniladi. Usul POST usuldan farqli o'laroq, katta hajmdagi ma'lumotlarni yuborish uchun ham javob beradi OLISH, u uzatilgan belgilar soni bo'yicha hech qanday cheklovlarga ega emas.

GET usuli

Ma'lumki, brauzerning asosiy vazifasi serverdan veb-sahifalarni qabul qilishdir. Shunday qilib, siz usuldan foydalanganda OLISH, brauzeringiz har doimgidek veb-sahifani oddiygina oladi. Usul OLISH forma ma'lumotlarini ham o'rab oladi, lekin so'rovni serverga yuborishdan oldin uni URL oxiriga qo'shadi. Usul qanday ishlashini tushunish uchun OLISH, keling, buni amalda ko'rib chiqaylik. Ushbu darsdan birinchi misolni (Misol: Oddiy HTML formasi) Notepadda (masalan, Notepad++) oching va HTML kodiga kichik o'zgartirish kiriting: