Select, Textarea, Button — ishlatish va farqlari

~15 daq · HTML · Formalar

Muammodan boshlaylik

Uchta vazifa:

Foydalanuvchi 14 ta viloyatdan birini tanlashi kerak. 14 ta radio tugma — butun ekranni egallaydi
Izoh yoki xabar uchun bir necha paragraf matn. <input type="text"> — bitta qator, Enter bosilsa forma yuboriladi
Saytda "Saqlash", "Bekor qilish", "Menyuni ochish" tugmalari. Ba'zilari formani yuboradi, ba'zilari yo'q

Bu darsda — input dan tashqari uchta asosiy forma elementi.

select — ochiladigan ro'yxat

<label for="viloyat">Viloyat</label>
<select id="viloyat" name="viloyat">
  <option value="">— Tanlang —</option>
  <option value="toshkent-sh">Toshkent shahri</option>
  <option value="toshkent">Toshkent viloyati</option>
  <option value="samarqand">Samarqand</option>
  <option value="buxoro">Buxoro</option>
  <option value="fargona">Farg'ona</option>
  <!-- ... -->
</select>

viloyat=samarqand

Har bir <option> — bitta variant; value — serverga ketadigan qiymat, ichidagi matn — foydalanuvchi ko'radigan nom
value yozilmasa — matnning o'zi yuboriladi
Birinchi bo'sh variant (value="") + required — foydalanuvchi albatta tanlashga majbur (19-dars)

selected va disabled

<select name="til">
  <option value="uz" selected>O'zbekcha</option>
  <option value="ru">Русский</option>
  <option value="en" disabled>English (tez kunda)</option>
</select>

selected — boshlang'ich tanlangan variant
disabled — ko'rinadi, lekin tanlab bo'lmaydi

optgroup — guruhlash

<label for="kurs">Kurs</label>
<select id="kurs" name="kurs">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="php">PHP</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Guruh nomlari tanlab bo'lmaydigan sarlavha sifatida ko'rinadi.

multiple — bir nechta tanlash

<select name="kurslar" multiple size="5">...</select>

Ctrl (Mac da Cmd) bosib bir nechta tanlanadi. Lekin foydalanuvchilarning ko'pchiligi bu usulni bilmaydi — bir nechta tanlov uchun checkbox lar (17-dars) ancha tushunarli.

select yoki radio?

Holat	Tanlov
2–5 ta variant, hammasini birdan ko'rish foydali	Radio
6+ variant, yoki joy kam	`<select>`
Juda ko'p variant (davlatlar, shaharlar) va qidirish kerak	`<input list>` + `<datalist>` yoki maxsus komponent

datalist — takliflar ro'yxati

<label for="shahar">Shahar</label>
<input id="shahar" name="shahar" list="shaharlar">

<datalist id="shaharlar">
  <option value="Toshkent">
  <option value="Samarqand">
  <option value="Buxoro">
  <option value="Namangan">
</datalist>

Foydalanuvchi yozishni boshlaydi — mos variantlar taklif qilinadi. <select> dan farqi: ro'yxatda yo'q qiymatni ham yozish mumkin. Avtoto'ldiruvchi qidiruv uchun JavaScript siz oddiy yechim.

textarea — ko'p qatorli matn

<label for="xabar">Xabaringiz</label>
<textarea id="xabar" name="xabar" rows="5" maxlength="1000"></textarea>

Ko'p qatorli matn: izoh, xabar, tavsif, manzil
Enter — yangi qator, formani yubormaydi
rows — ko'rinadigan qatorlar soni (balandlik); cols — kenglik (odatda CSS bilan)
maxlength, minlength, required, placeholder, readonly, disabled — input dagidek

value yo'q — kontent ichida

<!-- ❌ textarea da value atributi ishlamaydi -->
<textarea name="bio" value="Salom"></textarea>

<!-- ✅ boshlang'ich matn — teglar orasida -->
<textarea name="bio">Salom, men frontend dasturchiman.</textarea>

[!WARNING] Teglar orasidagi har bir bo'sh joy va qator qiymatga kiradi. <textarea> va </textarea> ni alohida qatorlarga yozib, ichiga chekinish qo'ysangiz, maydon bo'sh ko'rinmaydi — boshida bo'sh joylar bo'ladi, placeholder ko'rinmaydi va required ishlamaydi. Ochuvchi va yopuvchi teglarni yonma-yon yozing: <textarea ...></textarea>.

O'lchamni boshqarish

textarea {
  resize: vertical;      /* faqat balandlik bo'yicha cho'zish */
  min-height: 8rem;
  field-sizing: content; /* yangi: matnga qarab avtomatik o'sadi */
}

resize: none dan ehtiyot bo'ling — uzun matn yozayotgan foydalanuvchi maydonni kattalashtira olmaydi.

button — tugma

<button type="submit">Yuborish</button>
<button type="button" id="menyu">Menyu</button>
<button type="reset">Tozalash</button>

15-darsdan eslatma: forma ichida type yozilmagan <button> — submit. Shuning uchun har doim type ni aniq yozing.

button yoki input type="submit"?

<input type="submit" value="Yuborish">

<button type="submit">
  <svg aria-hidden="true">...</svg>
  Yuborish
</button>

<button> ichida HTML bo'lishi mumkin — ikonka, <strong>, <span>. <input type="submit"> faqat oddiy matn. Zamonaviy kodda — <button>.

Bir formada bir nechta submit

<form action="/maqola" method="post">
  <textarea name="matn"></textarea>
  <button type="submit" name="amal" value="qoralama">Qoralama sifatida saqlash</button>
  <button type="submit" name="amal" value="nashr">Nashr qilish</button>
</form>

Qaysi tugma bosilgan bo'lsa, faqat uning name=value si yuboriladi: amal=nashr. Server qaysi amal tanlanganini biladi. Tugma boshqa manzilga yuborishi ham mumkin: formaction="/oldindan-korish".

button, a yoki div?

Element	Qachon
`<button>`	Sahifada amal: yuborish, modal ochish, menyu, "yoqtirish"
`<a href>`	Boshqa sahifaga yoki manzilga o'tish
`<div onclick>`	Hech qachon — Tab, Enter, Space, ekran o'quvchi ishlamaydi

[!TIP] disabled tugma Tab bilan tanlanmaydi va ekran o'quvchilar uni ko'pincha "o'tkazib" yuboradi — foydalanuvchi tugma nima uchun ishlamayotganini bilmaydi. Ko'p hollarda tugmani faol qoldirib, bosilganda nima yetishmayotganini (masalan, bo'sh maydonlarni) ko'rsatish yaxshiroq.

output — natijani ko'rsatish

<form oninput="jami.value = Number(narx.value) * Number(soni.value)">
  <input id="narx" type="number" value="25000"> ×
  <input id="soni" type="number" value="2"> =
  <output id="jami" for="narx soni">50000</output> so'm
</form>

<output> — hisoblangan natija uchun semantik element. Ekran o'quvchilar qiymat o'zgarganda uni o'qiydi. Formaga yuborilmaydi.

Nima uchun shunday?

Nima uchun <select> va boshqa forma elementlarini CSS bilan to'liq bezab bo'lmaydi — ko'p dizaynerlar ularni JavaScript bilan noldan yozadi?

Chunki forma elementlari brauzer va operatsion tizim tomonidan chiziladi: telefonda <select> bosilsa, pastdan tizimning qulay g'ildirakli ro'yxati chiqadi, kompyuterda — klaviatura bilan qidirsa bo'ladigan ro'yxat. Bu foydalanuvchiga tanish, barcha qurilmalarda ishlaydi va accessibility bilan to'liq mos. Noldan yozilgan "chiroyli select" ko'pincha telefonda noqulay, klaviatura bilan ishlamaydi va ekran o'quvchiga ko'rinmaydi. Brauzerlar bu muammoni tushunadi va yangi appearance: base-select kabi xususiyatlar orqali tabiiy elementlarni bezash imkonini kengaytirmoqda. Qoida: avval tabiiy elementni ishlating, faqat haqiqatan zarur bo'lsa — maxsus komponent.

Xulosa

Eslab qoling:

<select> + <option value> — ko'p variantdan bittasi; selected, disabled, <optgroup>
2–5 variant — radio; 6+ — select; multiple o'rniga checkbox lar tushunarliroq
<datalist> — takliflar, lekin erkin yozish ham mumkin
<textarea> — ko'p qatorli; qiymat teglar orasida, value emas; teglarni yonma-yon yozing
<button> — har doim type bilan; ichida HTML bo'lishi mumkin
Bir nechta submit — name + value bilan farqlash
Amal — <button>, o'tish — <a href>, <div onclick> — hech qachon
<output> — hisoblangan natija

Keyingi dars

19-dars: Forma validatsiyasi — required, min, max, minlength, pattern