وانەی 51 لە 67

وانەی ٥١: خانەی ڕەنگ

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-51 لەگەڵ index.html و thanks.html. فۆرمەکە:
index.html:
<form action="thanks.html" method="get">
  <h2>ڕەنگی کارتەکە هەڵبژێرە</h2>
  <button type="submit">ناردن</button>
</form>

thanks.html:

<h1>سوپاس!</h1>
<p>ئەمە لاپەڕەیەکی نموونەیە. ئەوەی نووسیوتە ناخوێنێتەوە و پاشەکەوتی ناکات.</p>
ناوەڕۆکی ئەم وانەیە بەشی ١: هەڵبژاردنی ڕەنگ بەشی ٢: ڕەنگێک هەڵبژێرە و بینێرە بەشی ٣: هەمیشە بەهایەکی هەیە

بەشی ١: هەڵبژاردنی ڕەنگ

توخمی <input> بە type="color" ڕێگە بە سەردانیکەر دەدات ڕەنگێک هەڵبژێرێت. هەروەها دەتوانین بە تایبەتمەندی value ڕەنگی دەستپێک دیاری بکەین. لەم وانەیەدا، ڕەنگەکان بە کۆدی شازدەیی (hexadecimal) دەنووسین:
<p>
  <label for="card">ڕەنگی کارت</label>
  <input id="card" name="card" type="color" value="#c0392b">
</p>

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

بەشی ٢: ڕەنگێک هەڵبژێرە و بینێرە

ڕەنگی شینی #2e86c1 هەڵبژێرە. ئەگەر پەنجەرەکە خانەی نووسینی کۆدی ڕەنگی هەیە، کۆدەکە لەوێ بنووسە. پاشان هەڵبژاردنەکە پشتڕاست بکەرەوە یان پەنجەرەکە دابخە، و کرتە لە «ناردن» بکە.
ئەگەر هەمان ڕەنگت هەڵبژاردبێت، دێڕی ناونیشان thanks.html?card=%232e86c1 پیشان دەدات. ئەگەر ڕەنگێکی ترت هەڵبژاردبێت، کۆدەکە جیاواز دەبێت.
لەم نموونەیەدا، ڕەنگەکە وەک کۆدی شازدەیی دەنێردرێت. هێمای #ی سەرەتای کۆدەکە، لە ناونیشاندا وەک %23 دەردەکەوێت.

بەشی ٣: هەمیشە بەهایەکی هەیە

خانەی ڕەنگ هەمیشە ڕەنگێکی هەیە. ئەگەر تایبەتمەندی value دانەنێین، ڕەنگی دەستپێک ڕەش دەبێت، بە کۆدی #000000. تایبەتمەندی required بۆ ئەم جۆرە خانەیە بەکارنایەت و کاریگەریی نییە.
هەروەها، خانەکە تەنها ڕەنگی هەڵبژێردراو وەردەگرێت. بە خۆی ڕەنگی کارتەکە یان هیچ شتێکی تر لەسەر لاپەڕەکە ناگۆڕێت.
هەڵەیەکی باو: چاوەڕێی ئەوە بیت بە هەڵبژاردنی ڕەنگێک، ڕەنگی خودی لاپەڕەکە بگۆڕێت.
پوختە
  • type="color" ڕێگە بە سەردانکەر دەدات ڕەنگێک هەڵبژێرێت.
  • value ڕەنگی دەستپێک دیاری دەکات؛ لەم نموونەیەدا بە کۆدی شازدەیی.
  • لەم نموونەیەدا، کۆدی ڕەنگەکە دەنێردرێت، و هێمای # لە ناونیشاندا وەک %23 دەردەکەوێت.
  • خانەکە تەنها ڕەنگی هەڵبژێردراو وەردەگرێت. بە خۆی ڕەنگی لاپەڕەکە ناگۆڕێت.
ڕاهێنان
١. ڕەنگی دەستپێک بگۆڕە بۆ #2e86c1.
٢. ڕەنگێک هەڵبژێرە، فۆرمەکە بنێرە و کۆدەکە لە دێڕی ناونیشاندا بخوێنەرەوە.
٣. بگەڕێوە بۆ index.html، تایبەتمەندی value لابەرە و پاشەکەوتی بکە. لاپەڕەکە لە تابێکی نوێدا بکەرەوە و ببینە بە کام ڕەنگەوە دەست پێدەکات.

نموونە

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="card">ڕەنگی کارت</label>
        <input id="card" name="card" type="color" value="#c0392b">
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

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