وانەی 43 لە 67

وانەی ٤٣: خانەی گەڕان

ماوە: نزیکەی ٣ خولەک، لە ٣ بەشی کورت.
فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-43 لەگەڵ index.html و thanks.html. فۆرمەکە:
<form action="thanks.html" method="get">
  <button type="submit">گەڕان</button>
</form>
ناوەڕۆکی ئەم وانەیە بەشی ١: خانەیەکی گەڕان بەشی ٢: وشەی گەڕان بنێرە بەشی ٣: خانەی گەڕان بە خۆی ناگەڕێت

بەشی ١: خانەیەکی گەڕان

با خانەیەکی گەڕان زیاد بکەین. لەیبڵێک و توخمێکی <input> بە type="search" لەناو فۆرمەکە دابنێ، پێش دوگمەکە:
<p>
  <label for="q">لە چاکاندا بگەڕێ</label>
  <input id="q" name="q" type="search">
</p>

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

بەشی ٢: وشەی گەڕان بنێرە

jasmine بنووسە و کرتە لە «گەڕان» بکە.
لەسەر شاشە: وێبگەڕ thanks.html دەکاتەوە. ناونیشانەکە ئەم بەشە پیشان دەدات:  thanks.html?q=jasmine
q ئەو ناوەیە کە بە تایبەتمەندی name بە خانەکەمان داوە. ناوێکی باوە بۆ خانەی گەڕان و کورتکراوەی وشەی ئینگلیزی queryـە، واتە دەقی گەڕان. ناوێکی تایبەتی HTML نییە؛ دەتوانین ناوێکی تریش بەکاربهێنین

بەشی ٣: خانەی گەڕان بە خۆی ناگەڕێت

خانەی گەڕان تەنها ئەو دەقە وەردەگرێت کە سەردانکەر دەینووسێت. بۆ دۆزینەوە و پیشاندانی ئەنجامەکان، پێویستمان بە کۆدی سەر سێرڤەر یان JavaScript هەیە. HTML بە تەنها ئەو کارە ناکات.
لەم نموونەیەدا، داتای نێردراو لە دێڕی ناونیشانی وێبگەڕدا دەبینین. خودی thanks.html داتاکە ناخوێنێتەوە و ئەنجامی گەڕان پیشان نادات.

کەواتە بۆچی type="search" لەجیاتی type="text" بەکاردەهێنین؟ چونکە مەبەستی خانەکە بۆ وێبگەڕ ڕوون دەکاتەوە، و وێبگەڕ دەتوانێت تایبەتمەندیی یارمەتیدەر زیاد بکات، وەک دوگمەی بەتاڵکردنەوەی خانەکە.
هەڵەیەکی باو: چاوەڕێی ئەوە بیت خانەی گەڕان بە خۆی ئەنجامەکان بدۆزێتەوە.
پوختە
  • type="search" خانەیەکی تێکست بۆ نووسینی دەقی گەڕان دروست دەکات.
  • لەم نموونەیەدا، دەقەکە لە ناونیشاندا بە شێوەی q=... دەردەکەوێت، چونکە name="q"ـمان بەکارهێناوە.
  • خانەی گەڕان تەنها دەقەکە وەردەگرێت. دۆزینەوە و پیشاندانی ئەنجامەکان کۆدی سەر سێرڤەر یان JavaScript دەوێت.
ڕاهێنان
١. دوو وشە لە خانەی گەڕاندا بنووسە و فۆرمەکە بنێرە. ببینە بۆشایی نێوانیان لە ناونیشانەکەدا چۆن دەردەکەوێت.
٢. بگەڕێوە بۆ index.html. خانەکە بگۆڕە بۆ type="text"، پاشەکەوتی بکە و لاپەڕەکە نوێ بکەرەوە. شێوە و ڕەفتاری خانەکە بەراورد بکە؛ لەوانەیە لە وێبگەڕەکەتدا جیاوازییەکی دیار نەبێت.
٣. بەهای name لە q بگۆڕە بۆ search و id و for وەک خۆیان بهێڵەرەوە. فۆرمەکە بنێرە و ببینە ناوی بەهاکە لە ناونیشاندا چۆن دەگۆڕێت.

نموونە

html
<!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="q">لە چاکاندا بگەڕێ</label>
        <input id="q" name="q" type="search" />
      </p>
      <button type="submit">گەڕان</button>
    </form>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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