Formalar va boshqaruv elementlari

Forma xossalari va metodlari

Formalar (<form>) va ular ichidagi boshqaruv elementlari (input, textarea, select va boshqalar) foydalanuvchi bilan ma'lumot almashishning asosiy vositasi. Ular DOM'da o'ziga xos xossa va metodlarga ega bo'lib, ularni oddiy DOM elementlaridan qulayroq topish va boshqarish imkonini beradi. Ushbu darsda formalarga navigatsiya qilishni va boshqaruv elementlari bilan ishlashni chuqur o'rganamiz.

Formalarga navigatsiya: document.forms

Formalar hujjatdagi maxsus to'plam — document.formsning bir qismidir. Bu "nomlangan to'plam" (named collection): unga ham tartib raqami, ham forma name atributi orqali murojaat qilish mumkin.

document.forms.my;   // name="my" bo'lgan forma
document.forms[0];   // hujjatdagi birinchi forma

Formani olganimizdan so'ng, uning ichidagi istalgan elementga form.elements to'plami orqali yetib boramiz:

<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
  // formani olamiz
  let form = document.forms.my;

  // element olamiz
  let elem = form.elements.one;

  alert(elem.value); // 1
</script>

Bir nechta element bir xil namega ega bo'lishi mumkin (masalan, radio tugmalar). Bunday holatda form.elements[name] to'plam (collection) qaytaradi:

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
  let form = document.forms[0];

  let ageElems = form.elements.age;

  alert(ageElems[0]); // [object HTMLInputElement]
</script>
Bu navigatsiya xossalari HTML tuzilmasining chuqurligiga bog'liq emas. Element nechanchi darajada joylashganidan qat'i nazar, form.elements orqali barcha boshqaruv elementlari to'g'ridan-to'g'ri mavjud bo'ladi.

Fieldset "kichik forma" sifatida

Forma ichida bir yoki bir nechta <fieldset> elementi bo'lishi mumkin. Ular ham elements xossasiga ega bo'lib, o'z ichidagi boshqaruv elementlarini saqlaydi:

<form id="form">
  <fieldset name="userFields">
    <legend>info</legend>
    <input name="login" type="text">
  </fieldset>
</form>

<script>
  alert(form.elements.login); // input orqali

  let fieldset = form.elements.userFields;
  alert(fieldset); // HTMLFieldSetElement

  // login ni ham forma orqali, ham fieldset orqali olsak bo'ladi
  alert(fieldset.elements.login === form.elements.login); // true
</script>

Qisqa yozuv: form.name

Uzun form.elements.login o'rniga qisqaroq form.login yozuvi ham ishlaydi — forma o'zi ham o'z elementlariga nom orqali kirishga imkon beradi:

<form id="form">
  <input name="login">
</form>

<script>
  // ikkalasi bir xil elementga ishora qiladi
  alert(form.elements.login == form.login); // true

  form.login.name = 'username'; // name ni o'zgartiramiz

  // form.login endi ishlamaydi, chunki name o'zgardi!
  alert(form.elements.username); // input
  alert(form.login); // undefined
</script>
Qisqa yozuv (form.login) qulay, lekin bitta "nozik" kamchiligi bor: elementning nameini kodda o'zgartirsak, u eski nom orqali darhol topilmay qoladi. Bu odatiy holat, lekin nomni dinamik o'zgartirganda esda tutish kerak. Aksincha, form.elements to'plami esa o'zgargan yangi nomni to'g'ri qaytaradi.

Orqaga havola: element.form

Har bir forma elementi o'zi tegishli bo'lgan formaga element.form xossasi orqali murojaat qila oladi. Ya'ni forma o'z elementlariga ishora qiladi, elementlar esa formaga qaytadan ishora qiladi:

<form id="form">
  <input type="text" name="login">
</form>

<script>
  // form -> element
  let login = form.login;

  // element -> form
  alert(login.form); // HTMLFormElement
</script>
element.form hodisa ishlovchilarida juda qulay: masalan, tugma bosilganda uning event.target.form orqali qaysi formaga tegishli ekanligini darhol bilib olish mumkin — DOM bo'ylab qidirish shart emas.

Elementlar bilan ishlash: input va textarea

Matnli input va textareaning qiymatiga input.value (string) orqali kiramiz yoki checkbox/radio uchun input.checked (boolean) orqali:

input.value = 'Yangi qiymat';
textarea.value = 'Yangi matn';

input.checked = true; // checkbox yoki radio uchun
textareaning qiymatini o'qish uchun har doim textarea.valuedan foydalaning, textarea.innerHTMLdan emas! innerHTML faqat sahifa dastlab yuklangandagi HTML'ni saqlaydi va foydalanuvchi kiritgan yangi matnni aks ettirmaydi.

select va option bilan ishlash

<select> elementi (ochiladigan ro'yxat) uch muhim xossaga ega:

Ular <select> uchun qiymat belgilashning uch xil usulini beradi:

  1. Kerakli <option>ning tartib raqamini toping va select.selectedIndexga bering;
  2. Kerakli qiymatni select.valuega to'g'ridan-to'g'ri bering;
  3. Kerakli <option>ning option.selected xossasiga true bering.
<select id="select">
  <option value="apple">Olma</option>
  <option value="pear">Nok</option>
  <option value="banana">Banan</option>
</select>

<script>
  // uch usul ham "Nok" ni tanlaydi:
  select.selectedIndex = 1;
  select.value = 'pear';
  select.options[1].selected = true;
</script>

Boshqa boshqaruv elementlaridan farqli, <select> multiple atributi bilan bir nechta qiymatni tanlashga ruxsat beradi (garchi kamdan-kam ishlatilsa ham). Bu holatda tanlangan qiymatlarni olish uchun option.selectedni tekshirib chiqish kerak:

<select id="select" multiple>
  <option value="blues" selected>Blyuz</option>
  <option value="rock" selected>Rok</option>
  <option value="classic">Klassik</option>
</select>

<script>
  // barcha tanlangan qiymatlarni yig'amiz
  let selected = Array.from(select.options)
    .filter(option => option.selected)
    .map(option => option.value);

  alert(selected); // blues,rock
</script>

new Option

<option> elementlarini dinamik yaratish uchun qisqa maxsus sintaksis mavjud — new Option konstruktori:

let option = new Option(text, value, defaultSelected, selected);
// oddiy holat: matn va value bilan
let option = new Option('Matn', 'value');

// tanlangan holatda
let option2 = new Option('Matn', 'value', true, true);

// keyin uni select ichiga qo'shamiz
select.append(option);
<option> elementlari yana bir necha foydali xossaga ega: option.selected (tanlanganmi?), option.index (ro'yxatdagi raqami), option.text (ko'rinadigan matni).

Xulosa