HTML Formalar
HTML forma foydalanuvchi ma'lumotlarini yig'ish uchun ishlatiladi. Foydalanuvchi kiritgan ma'lumotlar ko'pincha serverga qayta ishlash uchun yuboriladi.
Misol
<form action="/amal_sahifa.php" target="_blank">
<label for="ism">Ism:</label><br>
<input type="text" id="ism" name="ism" value="Jahon"><br>
<label for="familiya">Familiya:</label><br>
<input type="text" id="familiya" name="familiya" value="Do"><br><br>
<input type="submit" value="Yuborish">
</form><form> Elementi
HTML <form> elementi foydalanuvchi ma'lumotlarini kiritish uchun forma yaratadi:
<form>
<!-- forma elementlari -->
</form><form> elementi turli input elementlari uchun konteyner hisoblanadi, masalan: matn maydonlari, checkboxlar, radio tugmalar, yuborish tugmalari va boshqalar.
Barcha turli forma elementlari bu bobda ko'rsatilgan: HTML Forma Elementlari.
<input> Elementi
HTML <input> elementi eng ko'p ishlatiladigan forma elementi hisoblanadi.
<input> elementi ko'plab ko'rinishlarda namoyon bo'lishi mumkin, type atributiga qarab.
Quyida ba'zi misollar:
| Type | Tavsifi |
|---|---|
<input type="text"> | Bir qatorli matn kiritish maydoni |
<input type="radio"> | Radio tugma (birini tanlash uchun) |
<input type="checkbox"> | Checkbox (bir yoki bir nechta tanlash uchun) |
<input type="submit"> | Formani yuborish tugmasi |
<input type="button"> | Bosiladigan tugma |
Barcha input turlari bu bobda ko'rsatilgan: HTML Input Turlari.
Matn Maydonlari
<input type="text"> bir qatorli matn kiritish maydonini belgilaydi.
Misol
Matn kiritish maydonlari bilan forma:
<form>
<label for="ism">Ism:</label><br>
<input type="text" id="ism" name="ism"><br>
<label for="familiya">Familiya:</label><br>
<input type="text" id="familiya" name="familiya">
</form>Yuqoridagi HTML kod brauzerda quyidagicha ko'rsatiladi:
Eslatma
Forma o'zi ko'rinmaydi. Shuningdek, input maydonining standart eni 20 ta belgidan iborat.
<label> Elementi
Yuqoridagi misolda <label> elementidan foydalanilganiga e'tibor bering.
<label> tegi ko'plab forma elementlari uchun yorliq belgilaydi.
<label> elementi ekranni o'qiydigan foydalanuvchilar uchun foydali, chunki input elementiga fokuslanganda yorliq ovozli o'qiladi.
<label> elementi kichik joylarni bosishda qiynaladigan foydalanuvchilar uchun ham qulay - chunki <label> ichidagi matn bosilganda radio tugma yoki checkbox faollashadi.
<label> tegining for atributi <input> elementining id atributiga teng bo'lishi kerak, ularni bog'lash uchun.
Radio Tugmalar
<input type="radio"> radio tugmani belgilaydi.
Radio tugmalar foydalanuvchiga cheklangan variantlardan BITTASINI tanlash imkonini beradi.
Misol
Radio tugmalar bilan forma:
<p>Sevimli Web tilingizni tanlang:</p>
<form>
<input type="radio" id="html" name="sevimli_til" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="sevimli_til" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="sevimli_til" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>Yuqoridagi HTML kod brauzerda quyidagicha ko'rsatiladi:
Sevimli Web tilingizni tanlang:
Checkboxlar
<input type="checkbox"> checkbox belgilaydi.
Checkboxlar foydalanuvchiga cheklangan variantlardan BIR YOKI BIR NECHTASINI tanlash imkonini beradi.
Misol
Checkboxlar bilan forma:
<form>
<input type="checkbox" id="velosiped" name="velosiped" value="Velosiped">
<label for="velosiped"> Menda velosiped bor</label><br>
<input type="checkbox" id="mashina" name="mashina" value="Mashina">
<label for="mashina"> Menda mashina bor</label><br>
<input type="checkbox" id="qayiq" name="qayiq" value="Qayiq">
<label for="qayiq"> Menda qayiq bor</label>
</form>Yuqoridagi HTML kod brauzerda quyidagicha ko'rsatiladi:
Yuborish Tugmasi
<input type="submit"> forma ma'lumotlarini forma-handlerga yuborish tugmasini belgilaydi.
Forma-handler odatda serverda input ma'lumotlarini qayta ishlovchi fayl hisoblanadi.
Forma-handler formaning action atributida ko'rsatiladi.
Misol
Yuborish tugmasi bilan forma:
<form action="/amal_sahifa.php">
<label for="ism">Ism:</label><br>
<input type="text" id="ism" name="ism" value="Jahon"><br>
<label for="familiya">Familiya:</label><br>
<input type="text" id="familiya" name="familiya" value="Do"><br><br>
<input type="submit" value="Yuborish">
</form>Yuqoridagi HTML kod brauzerda quyidagicha ko'rsatiladi:
<input> uchun Name atributi
Har bir input maydoni name atributiga ega bo'lishi kerak, aks holda yuborilmaydi.
Agar name atributi bo'lmasa, input maydonining qiymati umuman yuborilmaydi.
Misol
Quyidagi misolda "Ism" input maydonining qiymati yuborilmaydi:
<form action="/amal_sahifa.php">
<label for="ism">Ism:</label><br>
<input type="text" id="ism" value="Jahon"><br><br>
<input type="submit" value="Yuborish">
</form>