وانەی 37 لە 67

وانەی ٣٧: تایبەتمەندی name

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

index.html:

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>ڕاپرسی چا</title>
  </head>
  <body>
    <h1>ڕاپرسی چا</h1>
    <form action="thanks.html" method="get">
      <p><label>چای دڵخواز: <input type="text"></label></p>
      <p>
        <label>جۆری چا:
          <select>
            <option>ڕەش</option>
            <option>سەوز</option>
          </select>
        </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 یان id؟

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

فایلی دەستپێک بکەرەوە. «Ceylon» لەناو خانەکەدا بنووسە و کرتە لە «ناردن» بکە.

لەسەر شاشە: وێبگەڕ thanks.html دەکاتەوە. سەیری دێڕی ناونیشان بکە؛ هیچ بەهایەک بۆ ئەوەی نووسیومان لە ناونیشانەکەدا نییە.

هیچ شتێک دەربارەی «Ceylon» نییە. بۆ ئەوەی بەهای ئەم خانەی تێکستە و لیستی هەڵبژاردنەکە لە داتای نێردراودا بن، پێویستیان بە name هەیە. با بۆ خانەی تێکستەکە زیادی بکەین:

<input type="text" name="favorite">

بگەڕێوە بۆ index.html. گۆڕانکارییەکە پاشەکەوت بکە و لاپەڕەکە نوێ بکەرەوە. «Ceylon» بنووسە و کرتە لە «ناردن» بکە. دێڕی ناونیشان ئێستا ئەم بەشە پیشان دەدات:

thanks.html?favorite=Ceylon

browser response لەم ناونیشانەدا، داتای فۆرمەکە دوای هێمای ? دێت: ناوی خانەکە، هێمای یەکسان =، و ئەوەی سەردانیکەر نووسیویەتی. ئەگەر دوو وشە بنووسیت، بۆشایی نێوانیان وەک هێمای + دەردەکەوێت.

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

تێبینی: لەم نموونەیەدا Ceylon بەکاربهێنە بۆ ئەوەی ناونیشانەکە ئاسان بخوێنرێتەوە. پیتە کوردییەکانیش کار دەکەن، بەڵام لەوانەیە لە ناونیشانەکەدا بە شێوەی کۆدکراو، وەک %...، پیشان بدرێن. ئەمە هەڵە نییە.

بەشی ٢: ناوێک بۆ لیستی هەڵبژاردن

<select name="tea">

لە index.html گۆڕانکارییەکە پاشەکەوت بکە و لاپەڕەکە نوێ بکەرەوە. «Ceylon» بنووسە، «سەوز» هەڵبژێرە و کرتە لە «ناردن» بکە. پیشان بدە کە ئێستا ناونیشانەکە هەردوو بەشی favorite=Ceylon و tea= لەگەڵ بەهای «سەوز» لەخۆ دەگرێت.

دوو بەشەکە بە هێمای & لێک جیا کراونەتەوە. سەرنج بدە کە لیستەکە تێکستی بەندی هەڵبژێردراوی ناردووە؛ واتە «سەوز». لەوانەیە ئەم وشەیە لە ناونیشانەکەدا بە شێوەی کۆدکراو پیشان بدرێت.

ئێستا بە هەر <option>ـێک تایبەتمەندی value بدە:

<option value="black">ڕەش</option>
<option value="green">سەوز</option>

بگەڕێوە بۆ index.html، گۆڕانکارییەکە پاشەکەوت بکە و لاپەڕەکە نوێ بکەرەوە. «Ceylon» بنووسە، «سەوز» هەڵبژێرە و کرتە لە «ناردن» بکە. دێڕی ناونیشان ئێستا ئەم بەشە پیشان دەدات: thanks.html?favorite=Ceylon&tea=green

کاتێک <option> تایبەتمەندی valueـی هەبێت، فۆرمەکە ئەو بەهایە دەنێرێت لەجیاتی تێکستەکەی. سەردانکەر هێشتا «سەوز» دەبینێت، بەڵام فۆرمەکە green دەنێرێت.

بەشی ٣: name یان id؟

ئێستا دوو تایبەتمەندی دەناسین کە ناو دەدەن بە توخمەکان: id و name. بەڵام کاری جیاواز دەکەن.

id ناوێکی تاک و تەنهایە بۆ ناسینەوەی توخمێک لەناو لاپەڕەکەدا، وەک لە لینکەکانی بازدان. name ئەو ناوە دیاری دەکات کە بەهای خانەکە لە داتای نێردراودا لەگەڵیدا دێت.

هەڵەیەکی باو: name لەبیر بکەیت؛ ئەو کاتە بەهای خانەکە لە داتای نێردراودا دانانرێت.

هەڵەیەکی باو: لەم نموونەیەدا، خانەیەک لە دەرەوەی <form> دابنێیت؛ ئەو کاتە بەهاکەی لەگەڵ بەهای خانەکانی ناو فۆرمەکە نانێردرێت.

پوختە

بۆ خانەی تێکست و لیستی هەڵبژاردن، name پێویستە بۆ ئەوەی بەهاکانیان لە داتای نێردراودا بن.
بە method="get"، داتاکە لە ناونیشانەکەدا بە شێوەی name=value دێت، و بەشەکان بە & لێک جیا دەکرێنەوە.
لیستەکە تێکستی بەندی هەڵبژێردراو دەنێرێت؛ ئەگەر ئەو بەندە valueـی هەبێت، ئەو بەهایە دەنێرێت.
name ناوی بەهای خانەکەیە لە داتای فۆرمدا؛ id ناوێکی تاک و تەنهایە بۆ ناسینەوەی توخمێک لەناو لاپەڕەدا.

ڕاهێنان

١. بەهای name لە favorite بگۆڕە بۆ drink، فۆرمەکە بنێرە و سەیری گۆڕانی ناونیشانەکە بکە.

٢. بەهای valueـی یەکێک لە بەندەکان بگۆڕە، ئەو بەندە هەڵبژێرە و فۆرمەکە بنێرە.

٣. بە ئەنقەست تایبەتمەندی nameـی خانەیەک لاببە و فۆرمەکە بنێرە. ببینە بەهای ئەو خانەیە چۆن لە ناونیشانەکە لادەچێت.

٤. سەرەتا nameـەکە بگەڕێنەرەوە. پاشان پەرەگرافی خانەی یەکەم، لەگەڵ لەیبڵەکەی، بگوازەرەوە بۆ دوای </form>. فۆرمەکە بنێرە و ببینە کە بەهای ئەو خانەیە لە ناونیشانەکەدا نییە.

نموونە

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>چای دڵخواز: <input type="text" name="favorite" /></label>
      </p>
      <p>
        <label
          >جۆری چا:
          <select name="tea">
            <option value="black">ڕەش</option>
            <option value="green">سەوز</option>
          </select>
        </label>
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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