وانەی 49 لە 67

وانەی ٤٩: خانەی مەودا: range

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-49 لەگەڵ index.html و thanks.html. فۆرمەکە:

index.html:

<form action="thanks.html" method="get">
  <h2>چاکەت چەند بەهێز بێت؟</h2>
  <button type="submit">ناردن</button>
</form>

thanks.html:

    <h1>سوپاس!</h1>
    <p>ئەمە لاپەڕەیەکی نموونەیە. ئەوەی نووسیوتە ناخوێنێتەوە و پاشەکەوتی ناکات.</p>

ناوەڕۆکی ئەم وانەیە

بەشی ١: هەڵبژاردنی بەهایەک لە مەودایەکدا بەشی ٢: دەستگرەکە بجوڵێنە و بەهاکە بنێرە بەشی ٣: چی ناکات

بەشی ١: هەڵبژاردنی بەهایەک لە مەودایەکدا

کاتێک ژمارەیەکی نزیکەیی بەسە، دەتوانین خانەی مەودا بەکاربهێنین. ئەمە توخمی <input>ـە بە type="range". سەردانکەر بە ڕاکێشانی دەستگرەکە، بەهایەک لە نێوان دوو سنووردا هەڵدەبژێرێت.

یەکێک لەگەڵ لەیبڵەکەی پێش دوگمەکە زیاد بکە:

<p>
  <label for="strength">بەهێزیی چا (١ تا ٥)</label>
  <input id="strength" name="strength" type="range" min="1" max="5" step="1">
</p>

لاپەڕەکە لە تابێکی نوێدا بکەرەوە. خانەی مەوداکە دەردەکەوێت کە دەستگرەکەی لە ناوەڕاستدایە.

بەشی ٢: دەستگرەکە بجوڵێنە و بەهاکە بنێرە

سەرەتا، بەبێ گۆڕینی بەهای خانەکە، کرتە لە «ناردن» بکە.

دێڕی ناونیشان thanks.html?strength=3 پیشان دەدات. پاشان بگەڕێوە بۆ index.html، دەستگرەکە بۆ گەورەترین بەها بجوڵێنە و کرتە لە «ناردن» بکە. ناونیشانەکە thanks.html?strength=5 پیشان دەدات.

خانەی مەودا هەمیشە بەهایەکی هەیە. لەم نموونەیەدا، چونکە valueمان دیاری نەکردووە، بەهای دەستپێک ٣ـە، کە ناوەڕاستی مەوداکەیە. دەتوانین بە تایبەتمەندی value بەهایەکی تری دەستپێک دیاری بکەین.

بەشی ٣: چی ناکات

دوو شت لەبیر بێت. خانەی مەودا بە خۆی ژمارەی بەهاکە لەسەر شاشە پیشان نادات. بۆ پیشاندانی ژمارەکە و نوێکردنەوەی لە کاتی ڕاکێشانی دەستگرەکەدا، پێویستمان بە سکریپت هەیە.

هەروەها، چونکە خانەی مەودا هەمیشە بەهایەکی هەیە، تایبەتمەندی required بۆ ئەم جۆرە خانەیە بەکارنایەت و کاریگەریی نییە.

هەڵەیەکی باو: چاوەڕێی ئەوە بیت خانەی مەوداکە بە خۆی ژمارەی بەهاکە پیشان بدات.

پوختە

type="range" خانەی مەودا دروست دەکات. min و max سنوورەکان دیاری دەکەن، و step بڕی گۆڕانی بەهاکە دیاری دەکات.
خانەی مەودا هەمیشە بەهایەکی هەیە. لەم نموونەیەدا، بەبێ value بە 3 دەست پێدەکات.
دوای ناردنی فۆرمەکە، بەهای هەڵبژێردراو لە دێڕی ناونیشاندا دەردەکەوێت.
خانەی مەودا بە خۆی ژمارەی بەهاکە لەسەر شاشە پیشان نادات.

ڕاهێنان

١. خانەی مەودایەک بۆ «شیرینی» زیاد بکە، لە 0 تا 3، بە لەیبڵ و id و nameـی تایبەت بە خۆی.

٢. دەستگری هەردوو خانەکە بجوڵێنە، فۆرمەکە بنێرە و بەهاکان لە دێڕی ناونیشاندا بخوێنەرەوە.

٣. stepی خانەی مەودای یەکەم بگۆڕە بۆ 2، و ببینە کام بەهاکان دەتوانیت هەڵبژێریت.

نموونە

html

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>فۆڕمی چا</title>
  </head>
  <body>
    <form action="thanks.html" method="get">
      <h2>چاکەت چەند بەهێز بێت؟</h2>
      <p>
        <label for="strength">بەهێزیی چا (١ تا ٥)</label>
        <input id="strength" name="strength" type="range" min="1" max="5" step="1">
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام

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