وانەی 56 لە 67

وانەی ٥٦: تایبەتمەندی pattern

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

index.html:

<form action="thanks.html" method="get">
  <h2>کۆدی حیجزکردن</h2>
  <p>
    <label for="code">کۆد</label>
    <input dir="ltr" id="code" name="code" type="text">
    <br>
    شێواز: سێ پیتی گەورەی ئینگلیزی، هێمای - و سێ ڕەقەم لە 0 تا 9، وەک ABC-123.
  </p>
  <button type="submit">پشکنین</button>
</form>

thanks.html:

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

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

بەشی ١: شێوازی تێکستەکە دیاری بکە بەشی ٢: تاقی بکەرەوە بەشی ٣: مەرجەکانی pattern

بەشی ١: شێوازی تێکستەکە دیاری بکە

هەندێک جار تێکست دەبێت بە شێوازێکی دیاریکراو بنووسرێت، وەک کۆدی حیجزکردن. تایبەتمەندی pattern ئەو شێوازە دیاری دەکات.

پێویست ناکات ئێستا فێری نووسینی ئەم نەخشانە بیت. لەم نموونەیەدا، نەخشەکە داوای سێ پیتی گەورەی ئینگلیزی، پاشان هێمای - و سێ ڕەقەم لە 0 تا 9 دەکات:

<input dir="ltr" id="code" name="code" type="text" pattern="[A-Z]{3}-[0-9]{3}" title="شێواز: ABC-123">

تایبەتمەندی title بیرهێنەرەوەیەکی کورت دابین دەکات. هەندێک وێبگەڕ دەتوانن دەقەکەی لە پەیامی هەڵەدا بەکاربهێنن.

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

پاشەکەوتی بکە و لاپەڕەکە نوێ بکەرەوە. TEA-123 بنووسە و کرتە لە «پشکنین» بکە.

فۆرمەکە دەنێردرێت. دێڕی ناونیشان thanks.html?code=TEA-123 پیشان دەدات.

بگەڕێوە بۆ index.html. ئێستا tea-123 و TEA123، هەر یەکەیان بە جیا، تاقی بکەرەوە.

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

بەشی ٣: مەرجەکانی pattern

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

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

تەنها پشت بە tooltip مەبەستە؛ واتە ئەو پەیامە بچووکەی کە لە هەندێک وێبگەڕدا بە ڕاگرتنی ماوس لەسەر خانەکە دەردەکەوێت. زۆر سەردانیکەر، بە تایبەتی لەسەر مۆبایل، لەوانەیە ئەو پەیامە نەبینن.

هەڵەیەکی باو: ڕێنمایی شێوازی نووسین تەنها لە titleدا دابنێیت و لەسەر لاپەڕەکە پیشانی نەدەیت.

پوختە

pattern شێوازێک دیاری دەکات کە تێکستی نووسراو دەبێت لەگەڵیدا بگونجێت.
تەواوی تێکستەکە دەبێت بگونجێت. خانەی بەتاڵ بەهۆی pattern ڕەت ناکرێتەوە؛ بۆ پێویستکردنی پڕکردنەوەی، required زیاد بکە.
ڕێنمایی شێوازی نووسین لەسەر لاپەڕەکە پیشان بدە، نەک تەنها لە tooltipێکدا.
ئێستا دەتوانیت نەخشەی ئامادە بەکاربهێنیت. فێربوونی نووسینی نەخشەکان بۆ دواترە.

ڕاهێنان

١. دوو کۆدی دروست و دوو کۆدی هەڵە تاقی بکەرەوە.

٢. required زیاد بکە و هەوڵ بدە فۆرمەکە بە خانەی بەتاڵەوە بنێریت.

٣. بەهای pattern بگۆڕە بۆ [0-9]{4}. ڕێنمایی دیار و دەقی titleیش بگۆڕە بۆ ئەوەی شێوازە نوێیەکە ڕوون بکەنەوە. پاشان کۆدێکی چوار ڕەقەمی وەک 1234 تاقی بکەرەوە.

نموونە

<!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="code">کۆد</label>
        <input dir="ltr" id="code" name="code" type="text" pattern="[A-Z]{3}-[0-9]{3}" title="شێواز: ABC-123">
        <br>
        شێواز: سێ پیتی گەورەی ئینگلیزی، هێمای - و سێ ڕەقەم لە 0 تا 9، وەک ABC-123.
      </p>
      <button type="submit">پشکنین</button>
    </form>
  </body>
</html>

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