وانەی 54 لە 67

وانەی ٥٤: تایبەتمەندی required

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-54 لەگەڵ index.html و thanks.html. فۆرمەکە:
index.html:
<form action="thanks.html" method="get">
  <h2>بەشدار بە لە هەواڵنامەکەمان</h2>
  <p>
    <label for="email">ئیمەیڵ</label>
    <input dir="ltr" id="email" name="email" type="email">
  </p>
  <p>
    <label><input type="checkbox" name="agree" value="yes"> ڕازیم هەواڵنامەکە وەربگرم</label>
  </p>
  <button type="submit">بەشداربوون</button>
</form>

thanks.html:

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



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

بەشی ١: خانەیەک کە دەبێت پڕ بکرێتەوە

ئێستا سەردانیکەر دەتوانێت خانەی ئیمەیڵ بەتاڵ بهێڵێتەوە و کرتە لە «بەشداربوون» بکات. بۆ ئەوەی پڕکردنەوەی خانەکە مەرج بێت، تایبەتمەندی required زیاد بکە.
ئەمە تایبەتمەندییەکی بوولییە، وەک ئەوانەی لە وانەی ٦ بینیمان. بۆیە دەتوانین بەبێ بەها بینووسین؛ بوونی تایبەتمەندییەکە مەرجەکە چالاک دەکات:
<input dir="ltr" id="email" name="email" type="email" required>

پاشەکەوتی بکە و نوێی بکەرەوە. خانەکە بەتاڵ بهێڵەرەوە و کرتە لە «بەشداربوون» بکە. وێبگەڕ پەیامێک پیشان دەدات و فۆرمەکە نانێرێت. دەقی پەیامەکە بەپێی وێبگەڕ دەگۆڕێت. ئێستا hello@example.com بنووسە و دووبارە کرتە لە «بەشداربوون» بکە. فۆرمەکە دەنێردرێت

بەشی ٢: چێکبۆکسێک کە دەبێت نیشانە بکرێت

required لەسەر چێکبۆکسیش کار دەکات. لێرەدا واتای ئەوەیە کە دەبێت چێکبۆکسەکە نیشانە بکرێت. بۆ چێکبۆکسی ڕازیبوون زیادی بکە:
<input type="checkbox" name="agree" value="yes" required>

بگەڕێوە بۆ index.html، گۆڕانکارییەکە پاشەکەوت بکە و نوێی بکەرەوە. hello@example.com لە خانەی ئیمەیڵ بنووسە، بەڵام چێکبۆکسەکە بەبێ نیشانە بهێڵەرەوە. کرتە لە «بەشداربوون» بکە. وێبگەڕ داوا دەکات چێکبۆکسەکە نیشانە بکەیت. نیشانەی بکە و دووبارە کرتە لە «بەشداربوون» بکە. فۆرمەکە دەنێردرێت.

بەشی ٣: پشکنین لە وێبگەڕدا

ئەم پشکنینە لەناو وێبگەڕدا ئەنجام دەدرێت، بۆ ئەوەی سەردانیکەران بتوانن هەڵەکانیان بە خێرایی چاک بکەنەوە. بەڵام دەکرێت ئەم پشکنینە تێپەڕێنرێت. بۆیە ماڵپەڕێکی ڕاستەقینە دەبێت داتاکە دووبارە لەسەر سێرڤەر بپشکنێت.

هەروەها، لە لەیبڵی خانەکاندا دیاری بکە کامیان پڕکردنەوەیان پێویستە؛ بۆ نموونە، بە زیادکردنی «(داواکراوە)». بەم شێوەیە سەردانکەر پێش ناردنی فۆرمەکە مەرجەکە دەزانێت. 
هەڵەیەکی باو: تەنها پشت بە پشکنینی وێبگەڕ ببەستیت و داتاکە لەسەر سێرڤەر نە پشکنیتەوە.
هەڵەیەکی باو: required="false" بنووسیت بۆ لابردنی مەرجەکە. بوونی تایبەتمەندییەکە هێشتا مەرجەکە چالاک دەکات. بۆ لابردنی، خودی تایبەتمەندی required بسڕەوە.
پوختە
  • required وا دەکات وێبگەڕ ڕێگە نەدات فۆرمەکە بنێردرێت کاتێک خانەی پێویست بەتاڵە.
  • لەسەر چێکبۆکس، required واتە دەبێت خانەکە نیشانە بکرێت.
  • تایبەتمەندییەکی بوولییە و لەسەر چەند جۆرێکی خانە کار دەکات.
  • ماڵپەڕێکی ڕاستەقینە دەبێت داتاکە لەسەر سێرڤەریش بپشکنێت.
  • required="false" مەرجەکە لانا‌بات؛ دەبێت تایبەتمەندییەکە بسڕیتەوە.
ڕاهێنان
١. خانەیەکی «ناو» بە لەیبڵ و id و nameـەوە زیاد بکە، و تایبەتمەندی requiredی پێ بدە.
٢. هەوڵ بدە فۆرمەکە بنێریت لەکاتێکدا تەنها هەندێک لە خانە پێویستەکان پڕ کراونەتەوە.
٣. required لە چێکبۆکسەکە لابەرە و جیاوازییەکە ببینە. دەقی «(داواکراوە)»ش لە لەیبڵەکەی لابەرە.

نموونە

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="email">ئیمەیڵ (پێویستە)</label>
        <input dir="ltr" id="email" name="email" type="email" required>
      </p>
      <p>
        <label><input type="checkbox" name="agree" value="yes" required> ڕازیم هەواڵنامەکە وەربگرم (پێویستە)</label>
      </p>
      <button type="submit">بەشداربوون</button>
    </form>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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