وانەی 59 لە 67

وانەی ٥٩: جۆرەکانی دوگمە

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-59 لەگەڵ index.html و thanks.html. فۆرمەکە:
index.html:
<form action="thanks.html" method="get">
  <h2>داواکارییەکەت</h2>
  <p>
    <label for="who">ناو</label>
    <input id="who" name="who" type="text" value="Guest">
  </p>
  <p><label><input type="checkbox" name="sugar" value="yes"> بە شەکر</label></p>
  <button>ناردن</button>
</form>

thanks.html:

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

ناوەڕۆکی ئەم وانەیە بەشی ١: کاری دوگمەکە دیاری بکە بەشی ٢: دوگمەی گەڕاندنەوە بۆ دۆخی سەرەتا بەشی ٣: دوگمەیەکی ئاسایی

بەشی ١: کاری دوگمەکە دیاری بکە

سەیری دوگمەکەی فایلی دەستپێک بکە. تایبەتمەندی typeی نییە. لەم فۆرمەدا، دوگمەکە بە شێوەی بنەڕەتی دوگمەی ناردنە. ئەوە کار دەکات، بەڵام باشترە مەبەستمان بە ڕوونی لە کۆدەکەدا بنووسین:
<button type="submit">ناردن</button>

تایبەتمەندی type بۆ دوگمە ئەم سێ بەهایە وەردەگرێت: submit، reset و button.

بەشی ٢: دوگمەی گەڕاندنەوە بۆ دۆخی سەرەتا

لەناو فۆرمەکە، دوگمەیەک بە type="reset" زیاد بکە:
<button type="reset">گەڕاندنەوە بۆ سەرەتا</button>

پاشەکەوتی بکە و نوێی بکەرەوە. ناوەکە بگۆڕە بۆ Awat و «بە شەکر» نیشانە بکە. کرتە لە «گەڕاندنەوە بۆ سەرەتا» بکە. ناوەکە دەگەڕێتەوە بۆ Guest و چێکبۆکسەکە دووبارە بەبێ نیشانە دەبێت.

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


لەوانەیە سەردانیکەر بە هەڵە کرتە لە دوگمەی reset بکات و گۆڕانکارییەکانی لەدەست بدات. بۆیە زۆربەی کات باشترە ئەم دوگمەیە زیاد نەکەین.

بەشی ٣: دوگمەیەکی ئاسایی

جۆری سێیەم buttonـە. لەم نموونەیەدا، بە خۆی هیچ کارێک ئەنجام نادات:
<button type="button">ئامۆژگارییەکان پیشان بدە</button>

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

دەتوانین بە سکریپت کارێک بۆ ئەم دوگمەیە دیاری بکەین. لە وانەی ٧٦، نموونەیەکی ئەوە دەبینین.

هەڵەیەکی باو: type لەسەر دوگمەیەکی ناو فۆرم لەبیر بکەیت، بۆیە بە کرتەکردنی فۆرمەکە بنێردرێت، لەکاتێکدا مەبەستت کارێکی تر بوو.

پوختە

  • type="submit" فۆرمەکە دەنێرێت. لەم نموونەیەدا، لابردنی typeیش هەمان ئەنجامی هەیە.
  • type="reset" خانەکان دەگەڕێنێتەوە بۆ دۆخی سەرەتایان. زۆربەی کات باشترە ئەم دوگمەیە زیاد نەکەین.
  • type="button" فۆرمەکە نانێرێت. لەم نموونەیەدا، تا کارێکی بۆ دیاری نەکەین هیچ ئەنجامێکی نییە.
  • هەمیشە type بنووسە بۆ ئەوەی کاری دوگمەکە ڕوون بێت.

ڕاهێنان

١. دوگمەیەکی reset زیاد بکە، بەهای خانەکان بگۆڕە و کرتەی لێ بکە.

٢. دوگمەی reset دووبارە لابەرە.

٣. type لە دوگمەی «ناردن» لابەرە و تاقی بکەرەوە کە هێشتا فۆرمەکە دەنێرێت. پاشان type="submit" بگەڕێنەرەوە.

نموونە

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="who">ناو</label>
        <input id="who" name="who" type="text" value="Guest">
      </p>
      <p><label><input type="checkbox" name="sugar" value="yes"> بە شەکر</label></p>
      <button type="submit">ناردن</button>
      <button type="button">ئامۆژگارییەکان پیشان بدە</button>
    </form>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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