وانەی 39 لە 67

وانەی ٣٩: placeholder و value

فۆڵدەرێک بە ناوی lesson-39 لەگەڵ index.html و کۆپییەکی thanks.htmlـی وانەی ٣٦. لەمەودوا هەموو وانەکانی فۆرم بەم شێوەیە دەست پێدەکەن. index.html لاپەڕەیەکی تەواوە، بە هەمان بەشی <head> کە پێشتر بەکارمان هێناوە، و ئەم فۆرمەی لەناو <body>ـدایە:

<!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="nick">نازناو</label>
        <input id="nick" name="nickname" type="text" />
      </p>
      <p>
        <label for="cup">ناو لەسەر پیالەکە</label>
        <input id="cup" name="cup" type="text" />
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>

ناوەڕۆکی ئەم وانەیە

بەشی ١: ڕێنمایی بە placeholder بەشی ٢: تێکستی دەستپێک بە value بەشی ٣: placeholder جێگەی لەیبڵ ناگرێتەوە

بەشی ١: ڕێنمایی بە placeholder

placeholder تێکستێکی ڕێنمایی کورتە کە لەناو خانەیەکی بەتاڵدا دەردەکەوێت، بۆ ئەوەی نیشان بدات چ جۆرە وەڵامێک چاوەڕێ دەکرێت. بۆ خانەی یەکەم زیادی بکە:

<input id="nick" name="nickname" type="text" placeholder="بۆ نموونە: ئاوات">

ڕێنماییەکە بە شێوەی بنەڕەتی بە ڕەنگێکی کاڵ دەردەکەوێت. دەست بە نووسین بکە؛ ئێتر ڕێنماییەکە دیار نابێت. خانەکە بەتاڵ بکەرەوە؛ ڕێنماییەکە دەگەڕێتەوە. ئێستا هەردوو خانەکە بەتاڵ بهێڵەرەوە و کرتە لە «ناردن» بکە. ناونیشانەکە ئەم بەشە پیشان دەدات:

thanks.html?nickname=&cup=

دوای ناردنی فۆرمەکە، لە لاپەڕەی thanks.htmlـدایت. پێش گۆڕینی کۆد یان نوێکردنەوەی لاپەڕەکە، بگەڕێوە بۆ index.html.

placeholder بەهای خانەکە نییە. تەنها ڕێنماییەکە، بۆیە دەقەکەی لە داتای نێردراودا دانانرێت.

بەشی ٢: تێکستی دەستپێک بە value

تایبەتمەندی value جیاوازە. تێکستی دەستپێکی خانەکە دیاری دەکات، واتە ئەو تێکستەی لە سەرەتاوە لەناو خانەکەدا دەردەکەوێت. بۆ خانەی دووەم زیادی بکە:

<input id="cup" name="cup" type="text" value="Guest">

پەڕەی index.hmtl لە وێبگەڕەکەدا بکەوە، وشەی Guest لەناو خانەکەدایە، بە تێکستی ئاسایی. کرتە لە «ناردن» بکە و بەشی cup=Guest لە ناونیشانەکەدا پیشان بدە. پاشان بگەڕێوە بۆ index.html، تێکستەکە بگۆڕە بۆ شتێکی تر و دووبارە فۆرمەکە بنێرە.

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

بەشی ٣: placeholder جێگەی لەیبڵ ناگرێتەوە

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

هەڵەیەکی باو: placeholder لەجیاتی لەیبڵ بەکاربهێنیت.

پوختە

placeholder ڕێنماییەکی کورتە کە لەناو خانەیەکی بەتاڵدا پیشان دەدرێت. دەقەکەی نانێردرێت.
value تێکستی دەستپێک دیاری دەکات. ئەوەی لە کاتی ناردندا لەناو خانەکەدایە دەنێردرێت.
placeholder هەرگیز جێگەی لەیبڵ ناگرێتەوە.

ڕاهێنان

١. placeholder بۆ خانەی «ناو لەسەر پیالەکە» زیاد بکە و بە value تێکستی دەستپێک بۆ خانەی «نازناو» دابنێ. خانەیەک کە تێکستی تێدایە، placeholderـەکەی پیشان نادات؛ بۆیە سەرەتا تێکستەکە بسڕەوە بۆ ئەوەی ڕێنماییەکە ببینیت.

٢. فۆرمەکە بنێرە و ئەو بەهایانە بەراورد بکە کە بۆ هەر خانەیەک لە ناونیشانەکەدا دەردەکەون.

٣. لەیبڵێک بسڕەوە و placeholderـەکەی بهێڵەرەوە. ئایا خانەکە هێشتا ڕوونە؟ پاشان لەیبڵەکە بگەڕێنەرەوە.

نموونە

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="nick">نازناو</label>
        <input
          id="nick"
          name="nickname"
          type="text"
          placeholder="بۆ نموونە: ئاوات"
        />
      </p>
      <p>
        <label for="cup">ناو لەسەر پیالەکە</label>
        <input id="cup" name="cup" type="text" value="Guest" />
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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