وانەی 36 لە 67

وانەی ٣٦: توخمی form: ناردنی داتا

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-36 لەگەڵ دوو فایل: index.html و لاپەڕەیەکی دابینکراو بە ناوی thanks.html.
index.html:
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>ڕاپرسی چا</title>
  </head>
  <body>
    <h1>ڕاپرسی چا</h1>
    <p><label>چای دڵخواز: <input type="text"></label></p>
  </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>



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

بەشی ١: خانەکان لەناو فۆرمێکدا دابنێ

لە وانەی ٣٣ بینیمان کە نووسین لەناو خانەیەکدا، بە تەنها هیچ نانێرێت. بۆ ناردنی داتا، توخمی <form> بەکاردەهێنین. لەم نموونەیەدا، خانەکە و دوگمەی ناردن لەناوی دادەنێین.
لاپەڕەکە بەم شێوەیە بگۆڕە:
<form action="thanks.html" method="get">
  <p><label>چای دڵخواز: <input type="text"></label></p>
  <button type="submit">ناردن</button>
</form>

فۆرمەکە دوو تایبەتمەندی هەیە. action دیاری دەکات فۆرمەکە بۆ کام ناونیشان بنێردرێت. لێرەدا thanks.htmlـە. ڕێڕەوەکە وەک لینکەکانی وانەکانی ١٠ و ١١ کار دەکات.

تایبەتمەندی method شێوازی ناردنەکە دیاری دەکات. بە get، داتای فۆرمەکە لە ناونیشانی لاپەڕەی مەبەستدا زیاد دەکرێت، بۆیە دەتوانین لە دێڕی ناونیشاندا بیبینین.

بەشی ٢: دوگمەی ناردن

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

توخمی <button> دوگمەکە دروست دەکات، و تێکستی نێوان تاگەکانی لەسەر دوگمەکە دەردەکەوێت. type="submit" دیاری دەکات کە کاری ئەم دوگمەیە ناردنی فۆرمەکەیە.

فایلەکە پاشەکەوت بکە و لاپەڕەکە نوێ بکەرەوە. وشەیەک بنووسە و کرتە لە «ناردن» بکە. وێبگەڕ thanks.html دەکاتەوە. پاشان بگەڕێوە بۆ index.html، وشەیەکی تر بنووسە و لەناو خانەکەدا Enter دابگرە. لەم نموونەیەدا، ئەمەش فۆرمەکە دەنێرێت.
ئێستا سەیری دێڕی ناونیشان بکە. ناوی thanks.html دەبینیت، بەڵام ئەو وشەیەی نووسیمان لە ناونیشانەکەدا نییە. لە وانەی داهاتوودا دەزانین بۆچی.
تێبینی: لە وانەی ٥٩ جۆرەکانی دوگمە بە وردی دەبینین

بەشی ٣: ئەم نموونەیە چی دەکات و چی ناکات؟

با ڕوون بکەینەوە ئەم نموونەیە چی دەکات. وێبگەڕ فۆرمەکە بۆ thanks.html دەنێرێت. بەڵام خانەی تێکستەکە هێشتا تایبەتمەندی nameـی نییە، بۆیە ئەوەی تێیدا نووسراوە لە داتای نێردراودا دانانرێت. لە وانەی ٣٧ ئەم تایبەتمەندییە زیاد دەکەین.
لاپەڕەی thanks.html تەنها پەیامی سوپاسەکە پیشان دەدات. داتای فۆرم ناخوێنێتەوە، پاشەکەوتی ناکات و ئیمەیڵیش نانێرێت.
لەسەر ماڵپەڕێکی ڕاستەقینە، وێبگەڕ ئەو ناونیشانەی لە action دیاری کراوە لە سێرڤەر داوا دەکات. بە get، داتای فۆرمەکە لەناو ئەو ناونیشانەدا لەگەڵ داواکە دەنێردرێت. بۆ پرۆسێسکردن و پاشەکەوتکردنی ئەو داتایە لە سێرڤەر، کۆدی سەر سێرڤەر پێویستە؛ ئەوە کاری HTML نییە.
هەڵەیەکی باو: چاوەڕێی ئەوە بیت تەنها بە کردنەوەی thanks.html، ئەوەی نووسیوتە پاشەکەوت بکرێت. ئەم لاپەڕەیە هیچ کۆدێکی بۆ وەرگرتن و پاشەکەوتکردنی داتاکە نییە.
  • پوختە
  • <form> خانەکانی فۆرمەکە کۆ دەکاتەوە بۆ ناردنی داتاکانیان.
  • action ناونیشانی مەبەست و method شێوازی ناردن دیاری دەکات.
  • <button type="submit"> دوگمەی ناردنی فۆرمەکەیە. لەم نموونەیەدا، Enter دابگرتن لەناو خانەی تێکستیش فۆرمەکە دەنێرێت.
  • لەم نموونەیەدا، خانەکە nameـی نییە، بۆیە بەهاکەی نانێردرێت. لاپەڕەی thanks.htmlـیش داتا پرۆسێس یان پاشەکەوت ناکات.
ڕاهێنان
١. خانەیەکی دووەم لەناو فۆرمەکە زیاد بکە بۆ «جۆری خواردن»، لەگەڵ لەیبڵی تایبەت بە خۆی.
٢. کرتە لە «ناردن» بکە. پاشان بگەڕێوە بۆ index.html و ئەم جارە لەناو خانەیەکدا Enter دابگرە بۆ ناردنی فۆرمەکە.
٣. دوای ناردن، سەیری دێڕی ناونیشان بکە و ئەوەی دەیبینیت وەسف بکە.

نموونە

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>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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