وانەی 48 لە 67

وانەی ٤٨: خانەی ژمارە: min، max و step

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

index.html:

<form action="thanks.html" method="get">
  <h2>چەند میوان؟</h2>
  <p>
    <label for="guests">ژمارەی میوان</label>
    <input id="guests" name="guests" type="text">
  </p>
  <button type="submit">حیجزکردن</button>
</form>

thanks.html:

<h1>سوپاس!</h1>
<p>ئەمە لاپەڕەیەکی نموونەیە. ئەوەی نووسیوتە ناخوێنێتەوە و پاشەکەوتی ناکات.</p>

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

بەشی ١: type="number" بەشی ٢: سنوورەکان تاقی بکەرەوە بەشی ٣: تایبەتمەندی step

بەشی ١: type="number"

بۆ دروستکردنی خانەی ژمارە، بەهای type بگۆڕە بۆ number. بە min بچووکترین ژمارەی ڕێگەپێدراو و بە max گەورەترینیان دیاری بکە:

<input id="guests" name="guests" type="number" min="1" max="8">

پاشەکەوتی بکە و لاپەڕەکە نوێ بکەرەوە. لە زۆر وێبگەڕدا تیرە بچووکەکانی زیادکردن و کەمکردنەوەی ژمارە لەناو خانەکە دەردەکەون.

بەشی ٢: سنوورەکان تاقی بکەرەوە

0 بنووسە و کرتە لە «حیجزکردن» بکە.

وێبگەڕ پەیامێک پیشان دەدات و فۆرمەکە نانێرێت. بەهاکە بگۆڕە بۆ 3 و دووبارە کرتە لە «حیجزکردن» بکە؛ ئەم جارە وەردەگیرێت.

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

بەشی ٣: تایبەتمەندی step

step بڕی زیادبوون و کەمبوونی ژمارەکە دیاری دەکات، هەروەها بەها ڕێگەپێدراوەکان سنووردار دەکات. بگەڕێوە بۆ index.html و خانەکە بەم شێوەیە بگۆڕە. لێرەدا ژمارە ڕێگەپێدراوەکان 0، 2، 4، 6 و 8ـن:

<input id="guests" name="guests" type="number" min="0" max="8" step="2">

ئێستا پرسیارێک: ئەگەر max="8" وەک خۆی بهێڵینەوە، بەڵام min بکەین بە 1، لەگەڵ step="2" کام ژمارانە وەردەگیرێن؟

ئێستا ژمارە ڕێگەپێدراوەکان 1، 3، 5 و 7ـن.

لەم نموونانەدا، هەنگاوەکان لە بەهای minـەوە دەست پێدەکەن. بۆیە کاتێک min="1" و step="2"ـە، بەهاکان دوو بە دوو زیاد دەبن: 1، 3، 5 و 7.

هەڵەیەکی باو: وا بزانیت step="2" هەمیشە واتای ژمارەی جووتە. ئەمە بەوەوە بەستراوە کە هەنگاوەکان لە کوێوە دەست پێدەکەن؛ لەم نموونانەدا، لە minـەوە.

بۆ ژمارەی میوانەکانمان، min دەگەڕێنینەوە بۆ 1 و تایبەتمەندی step لادەبەین. لەم دۆخەدا، بەهای بنەڕەتیی step یەکە، بۆیە ژمارە تەواوەکانی 1 تا 8 وەردەگیرێن.

پوختە

type="number" خانەی ژمارە دروست دەکات. min و max سنوورەکان دیاری دەکەن.
لە کاتی هەوڵدان بۆ ناردنی فۆرمەکە، وێبگەڕ بەهاکە دەپشکنێت.
step بڕی زیادبوون و کەمبوونی ژمارەکە و بەها ڕێگەپێدراوەکان دیاری دەکات. لەم نموونانەدا، هەنگاوەکان لە minـەوە دەست پێدەکەن.

ڕاهێنان

١. بەهای max بگۆڕە بۆ 6، پاشان هەوڵ بدە فۆرمەکە بە ژمارەی 7 بنێریت.

٢. min="0" و step="2" دابنێ، پاشان ژمارەی 3 تاقی بکەرەوە.

٣. min بگۆڕە بۆ 1 و step="2" وەک خۆی بهێڵەرەوە. ژمارەکانی 2 و 3 تاقی بکەرەوە و ببینە کامیان وەردەگیرێت. دوای هەر ناردنێکی سەرکەوتوو، بگەڕێوە بۆ index.html.

نموونە

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="guests">ژمارەی میوان</label>
        <input id="guests" name="guests" type="number" min="1" max="8">
      </p>
      <button type="submit">حیجزکردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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