وانەی 57 لە 67

وانەی ٥٧: disabled و readonly

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

index.html:

<form action="thanks.html" method="get">
  <h2>مێزەکەت</h2>
  <p>
    <label for="t1">مێز (تەنها بۆ خوێندنەوە)</label>
    <input id="t1" name="table" type="text" value="Table 4">
  </p>
  <p>
    <label for="t2">مێز (ناچالاک)</label>
    <input id="t2" name="table2" type="text" value="Table 4">
  </p>
  <button type="submit">پشتڕاستکردنەوە</button>
</form>

thanks.html:

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

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

بەشی ١: readonly بەشی ٢: disabled بەشی ٣: چی دەنێردرێت؟

بەشی ١: readonly

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

<input id="t1" name="table" type="text" value="Table 4" readonly>

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

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

بەشی ٢: disabled

ئێستا تایبەتمەندی disabled بۆ خانەی دووەم زیاد بکە. ئەویش تایبەتمەندییەکی بوولییە:

<input id="t2" name="table2" type="text" value="Table 4" disabled>

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

بەشی ٣: چی دەنێردرێت؟

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

ناونیشانەکە thanks.html?table=Table+4 پیشان دەدات. بەهای خانەی دووەم تێیدا نییە.

لەم نموونەیەدا، بەهای خانەی readonly دەنێردرێت. بەڵام بەهای خانەی disabled لە داتای فۆرمەکەدا دانانرێت. خانەی readonly دەتوانێت فۆکەس وەربگرێت؛ خانەی disabled فۆکەس وەرناگرێت.

هەڵەیەکی باو: disabled بەکاربهێنیت و چاوەڕێی ئەوە بیت بەهای خانەکە لەگەڵ فۆرمەکە بنێردرێت.

پوختە

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

ڕاهێنان

١. خانەیەکی «ناو» بە لەیبڵ و name و بەهایەکی دەستپێکەوە زیاد بکە، و تایبەتمەندی readonlyی پێ بدە.

٢. بەراوردی بکە لەگەڵ خانەیەکی disabled. فۆرمەکە بنێرە و ببینە بەهای کام خانە لە دێڕی ناونیشاندا دەردەکەوێت.

٣. بگەڕێوە بۆ index.html و بە دوگمەی Tab لەنێوان خانەکاندا بگوازەرەوە. ببینە کامیان فۆکەس وەردەگرێت.

نموونە

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="t1">مێز (تەنها بۆ خوێندنەوە)</label>
        <input id="t1" name="table" type="text" value="Table 4" readonly>
      </p>
      <p>
        <label for="t2">مێز (ناچالاک)</label>
        <input id="t2" name="table2" type="text" value="Table 4" disabled>
      </p>
      <button type="submit">پشتڕاستکردنەوە</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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