وانەی 47 لە 67

وانەی ٤٧: گروپی چێکبۆکس: ناردنی چەند بەهایەک

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

index.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><input type="checkbox"> کێک</label></p>
    <p><label><input type="checkbox"> بسکیت</label></p>
    <p><label><input type="checkbox"> خورما</label></p>
    <button type="submit">داواکردن</button>
  </form>
  </body>
</html>

thanks.html:

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>سوپاس</title>
  </head>
  <body>
    <h1>سوپاس!</h1>
    <p>ئەمە لاپەڕەیەکی نموونەیە. ئەوەی نووسیوتە ناخوێنێتەوە و پاشەکەوتی ناکات.</p>
  </body>
</html>

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

بەشی ١: ناو و بەها name and value بەشی ٢: دووان نیشانە بکە و بینێرە بەشی ٣: هەڵەکان

بەشی ١: ناو و بەها name and value

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

لەم نموونەیەدا، هەمان بەهای name بۆ هەموویان بەکاردەهێنین، بۆ ئەوەی خواردنە هەڵبژێردراوەکان بە هەمان ناو بنێردرێن. بەڵام هەر خانەیەک valueـی جیاوازی هەیە:

<p><label><input type="checkbox" name="snack" value="cake"> کێک</label></p>
<p><label><input type="checkbox" name="snack" value="biscuits"> بسکیت</label></p>
<p><label><input type="checkbox" name="snack" value="dates"> خورما</label></p>

بەشی ٢: دووان نیشانە بکە و بینێرە

پاشەکەوتی بکە و لاپەڕەکە نوێ بکەرەوە. «کێک» و «خورما» نیشانە بکە و «بسکیت» بەبێ نیشانە بهێڵەرەوە. کرتە لە «داواکردن» بکە. ناونیشانەکە ئەم بەشە پیشان دەدات:

thanks.html?snack=cake&snack=dates

هەر خانەیەکی نیشانەکراو بەشێکی name=value بۆ داتاکە زیاد دەکات. لێرەدا ناوی snack دوو جار هاتووە: جارێک لەگەڵ cake و جارێک لەگەڵ dates. ئەمە ئاساییە؛ هەمان ناو دەتوانێت چەند بەهایەکی لەگەڵدا بنێردرێت.

بەهای خانەی «بسکیت» لە داتاکەدا نییە، چونکە نیشانەمان نەکردووە.

بەشی ٣: هەڵەکان

ئەگەر چێکبۆکسێک nameـی هەبێت، بەڵام تایبەتمەندی valueـی نەبێت، کاتێک نیشانە دەکرێت بەهای on دەنێرێت.

ئەگەر value لە هەر سێ خانەکە لاببەین و هەرسێکیان نیشانە بکەین، داتاکە بەم شێوەیە دەبێت:

snack=on&snack=on&snack=on

لەو بەهایانەوە نازانین کام خواردن هەڵبژێردراوە.

هەڵەیەکی باو: value لەبیر بکەیت، بۆیە لەجیاتی بەهایەکی ڕوون بۆ هەر خواردنێک، بەهای on بنێردرێت.

هەروەها دەتوانیت checked بەکاربهێنیت بۆ ئەوەی خانەیەک لە سەرەتاوە نیشانەکراو بێت، وەک لە وانەی ٣٤ بینیمان.

پوختە

چێکبۆکسەکان بە هەمان name دەتوانن چەند بەهایەک بنێرن.
هەر خانەیەکی نیشانەکراو بەشێکی name=value بۆ داتاکە زیاد دەکات.
بەهای خانە نیشانەنەکراوەکان لە داتای نێردراودا دانانرێت.
ئەگەر خانەیەکی نیشانەکراو nameـی هەبێت، بەڵام valueـی نەبێت، بەهای on دەنێرێت.

ڕاهێنان

١. سێ جار فۆرمەکە بنێرە: جارێک بەبێ نیشانەکردنی هیچ خانەیەک، جارێک بە نیشانەکردنی یەک خانە، و جارێک بە نیشانەکردنی هەرسێکیان. ناونیشانەکان بەراورد بکە. دوای هەر ناردنێک بگەڕێوە بۆ index.html.

٢. تایبەتمەندی valueـی یەک خانە لاببە، ئەو خانەیە نیشانە بکە و فۆرمەکە بنێرە. ببینە چ بەهایەک دەنێردرێت.

٣. خواردنێکی سووکی چوارەم زیاد بکە، بە هەمان name="snack" و بەهایەکی جیاوازی value.

نموونە

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><input type="checkbox" name="snack" value="cake"> کێک</label></p>
      <p><label><input type="checkbox" name="snack" value="biscuits"> بسکیت</label></p>
      <p><label><input type="checkbox" name="snack" value="dates"> خورما</label></p>
      <button type="submit">داواکردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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