وانەی 35 لە 67

وانەی ٣٥: لیستی دابەزین: select و option

ناوەڕۆکی ئەم وانەیە بەشی ٢: هەڵبژاردنی دەستپێک بەشی ٣: کیبۆرد و یاساکان
کاتێک سەردانیکەر دەیەوێت یەک بەند لە لیستێک هەڵبژێرێت، دەتوانین لیستی دابەزین (Dropdown) بەکاربهێنین. بە دوو توخم دروست دەکرێت: <select> و <option>.
ئەمە لەناو <body> بنووسە:
<label>چا:
  <select>
    <option>ڕەش</option>
    <option>سەوز</option>
    <option>گیایی</option>
  </select>
</label>


توخمی <select> خودی لیستەکە دروست دەکات. هەر <option>ـێک یەکێکە لە بەندەکانی لیستەکە، و تێکستی ناوی ئەوەیە کە سەردانکەر دەیبینێت.

تێبینی: شێوەی دەرکەوتنی لیستی دابەزین بەپێی وێبگەڕ و ئامێرەکە دەگۆڕێت.

بەشی ٢: هەڵبژاردنی دەستپێک

بە شێوەی بنەڕەتی، لیستەکە یەکەم بەندی خۆی پیشان دەدات. بۆ ئەوەی لە سەرەتاوە بەندێکی تر هەڵبژێردراو بێت، تایبەتمەندی selected بۆ ئەو <option>ـە زیاد بکە. ئەمەش تایبەتمەندییەکی بوولییە، بۆیە دەتوانین بەبێ بەها بینووسین.
<option selected>سەوز</option>

بەشی ٣: کیبۆرد و یاساکان

لیستی دابەزین بە کیبۆردیش کار دەکات. دوگمەی Tab دابگرە تا فۆکەس بگاتە سەر لیستەکە، پاشان دوگمەکانی تیر بەکاربهێنە بۆ گۆڕینی هەڵبژاردنەکە.
دوو یاسا بۆ ئەم لیستە: هەر <option>ـێک لەناو <select> دابنێ. هەروەها لەم جۆرە لیستەدا، تەنها یەک بەند لە هەمان کاتدا هەڵدەبژێردرێت.
هەڵەیەکی باو: بەندەکانی ئەم لیستە، واتە توخمەکانی <option>، لە دەرەوەی <select> دابنێیت.
هەڵەیەکی باو: لە لیستێکی تاک‌هەڵبژاردندا، selected بۆ چەند بەندێک زیاد بکەیت. لەو حاڵەتەدا، دوا بەندی هەڵگری selected هەڵبژێردراو دەبێت.
پوختە
  • <select> لیستی دابەزین دروست دەکات، و هەر <option>ـێک بەندێکە لەناویدا.
  • تێکستی ناو <option> ئەوەیە کە سەردانیکەر دەیبینێت.
  • تایبەتمەندی بوولی selected هەڵبژاردنی دەستپێک دیاری دەکات.
  • لەم جۆرە لیستەدا تەنها یەک بەند لە هەمان کاتدا هەڵدەبژێردرێت.
ڕاهێنان
١. چای چوارەم زیاد بکە، «نەعنا».
٢. «نەعنا» بکە بە هەڵبژاردنی دەستپێک. سەرەتا selected لە «سەوز» لاببە، پاشان بۆ «نەعنا» زیادی بکە.
٣. تەنها بە کیبۆرد هەڵبژاردنەکە بگۆڕە.

نموونە

html
<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>چایخانە</title>
  </head>
  <body>
    <h1>چایەکەت هەڵبژێرە</h1>
    <p>
      <label>چا:
        <select>
          <option>ڕەش</option>
          <option selected>سەوز</option>
          <option>گیایی</option>
        </select>
      </label>
    </p>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.