وانەی ٦٠: پێداچوونەوە: هەڵبژاردنی کۆنترۆڵی گونجاوی فۆرم

با ببینین چیت لەبیرە لە وانەکانی ٣٣ تا ٥٩. جۆری داتاکە وەسف دەکەم، و تۆ بڵێ کام کۆنترۆڵ و کام تایبەتمەندی بەکاردەهێنیت. وەڵامەکان لە خواروە هەن بەڵام هەوڵبدە خۆت وەڵامیان بدەیتەوە.

فۆرمەکە چوار کێشەی هەیە. هەندێکیان پەیوەندییان بە لەیبڵ و ناردنی داتاوە هەیە، و یەکێکیان هەڵبژاردنێکە کە بەکارهێنانی فۆرمەکە قورس دەکات. سەرەتا خۆت هەوڵ بدە بیان دۆزیتەوە.

<form action="thanks.html" method="get">
  <p>
    <input type="text" name="visitor" placeholder="ناوی تۆ">
  </p>
  <p>شوێنی دانیشتن:
    <label><input type="radio" name="seat1" value="inside"> ناوەوە</label>
    <label><input type="radio" name="seat2" value="garden"> باخچە</label>
  </p>
  <p>
    <label for="note">تێبینی</label>
    <textarea id="note"></textarea>
  </p>
  <button type="submit">ناردن</button>
  <button type="reset">گەڕاندنەوە بۆ سەرەتا</button>
</form>

کێشەی ١: خانەی ناو لەیبڵی نییە و تەنها placeholderی هەیە. لەیبڵێک زیاد بکە و بە for و id بە خانەکەوە بیبەستەرەوە.

کێشەی ٢: دوو دوگمەی ڕادیۆکە nameی جیاوازیان هەیە. بە هەردووکیان name="seat" بدە، بۆ ئەوەی یەک گروپ پێکبهێنن و تەنها یەکێکیان هەڵبژێردرێت.

کێشەی ٣: توخمی <textarea> تایبەتمەندی nameی نییە. لەم فۆرمەدا تێکستەکەی لە داتای نێردراودا دانانرێت. name="note" زیاد بکە.

کێشەی ٤: دوگمەی reset هەیە. ئەم دوگمەیە HTMLـی دروستە، بەڵام لێرەدا هەڵبژاردنێکی گونجاو نییە. لەوانەیە سەردانیکەر بە هەڵە کرتەی لێ بکات و وەڵامەکانی لەدەست بدات. لایبەرە.

جگە لەو چوار چاککردنەوەیە، هەڵبژاردنەکانی شوێنی دانیشتن لەناو <fieldset> دابنێ و بە <legend> ناونیشانیان بۆ دیاری بکە، وەک لە وانەی ٥٨ بینیمان.

 چاککردنەوەکان ئەنجام بدە، پاشەکەوتی بکە و لاپەڕەکە نوێ بکەرەوە. پاشان ئەم چوار تاقیکردنەوەیە ئەنجام بدە:

١. کرتە لە لەیبڵی «ناوی تۆ» بکە و ببینە نیشانەدەری نووسین دەچێتە ناو خانەکە.

٢. «ناوەوە» هەڵبژێرە، پاشان «باخچە». ببینە تەنها یەکێکیان هەڵبژێردراو دەمێنێتەوە.

٣. خانەی ناو و تێبینی پڕ بکەرەوە، شوێنێک هەڵبژێرە و کرتە لە «ناردن» بکە. بەهای هەر سێکیان لە دێڕی ناونیشاندا بدۆزەرەوە. بۆ ئاسان خوێندنەوەی ناونیشانەکە، دەتوانیت دەقی لاتینی وەک Sara و Hello بەکاربهێنیت.

٤. بگەڕێوە بۆ index.html و دڵنیابەرەوە دوگمەی reset نەماوە.

هەڵەیەکی باو: کۆنترۆڵێک تەنها بەپێی ڕووخسارەکەی هەڵبژێریت، لەجیاتی ئەوەی بەپێی جۆری داتاکە هەڵیبژێریت.

پوختە

• کۆنترۆڵەکە بەپێی جۆری داتاکە هەڵبژێرە: date، color، number، tel، email، password، hidden، چێکبۆکس، دوگمەی ڕادیۆ، لیستی دابەزین یان <textarea>.
• خانەکانی ئەم فۆرمە بۆ ناردنی بەهاکانیان پێویستیان بە name هەیە. دوگمەکانی ڕادیۆی یەک گروپ هەمان name بەکاردەهێنن.
• بۆ خانە و هەڵبژاردنەکانی سەردانکەر لەیبڵی دیار دابنێ. placeholder جێگەی لەیبڵ ناگرێتەوە.
• پشکنینی وێبگەڕ یارمەتی سەردانکەر دەدات، بەڵام ماڵپەڕێکی ڕاستەقینە دەبێت داتاکە لەسەر سێرڤەریش بپشکنێت.

ڕاهێنان

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

کۆدی چاککراو:

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>  حیجزکردن </title>
  </head>
  <body>
    <form action="thanks.html" method="get">
      <p>
        <label for="visitor">ناوی تۆ</label>
        <input id="visitor" type="text" name="visitor">
      </p>
      <fieldset>
        <legend>شوێنی دانیشتن</legend>
        <label><input type="radio" name="seat" value="inside"> ناوەوە</label>
        <label><input type="radio" name="seat" value="garden"> باخچە</label>
      </fieldset>
      <p>
        <label for="note">تێبینی</label>
        <textarea id="note" name="note"></textarea>
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>