وانەی 58 لە 67

وانەی ٥٨: fieldset و legend

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

index.html:

<form action="thanks.html" method="get">
  <h2>حیجزەکەت</h2>
  <p>لە کوێ دەتەوێت دابنیشیت؟</p>
  <p><label><input type="radio" name="seat" value="inside"> ناوەوە</label></p>
  <p><label><input type="radio" name="seat" value="garden"> باخچە</label></p>
  <p>خواردنە سووکەکان</p>
  <p><label><input type="checkbox" name="snack" value="cake"> کێک</label></p>
  <p><label><input type="checkbox" name="snack" value="dates"> خورما</label></p>
  <button type="submit">حیجزکردن</button>
</form>

thanks.html:

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

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

بەشی ١: هەڵبژاردنەکانی شوێنی دانیشتن بکە بە گروپ بەشی ٢: خواردنە سووکەکان گروپ بکە بەشی ٣: بۆچی گرنگە؟

بەشی ١: هەڵبژاردنەکانی شوێنی دانیشتن بکە بە گروپ

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

بۆ کۆکردنەوەی خانە و هەڵبژاردنە پەیوەندیدارەکان، HTML توخمی <fieldset>ی هەیە. لەناویدا، توخمی <legend> ناونیشانی گروپەکە دیاری دەکات.

پەرەگرافی پرسیارەکە و هەردوو دوگمەی ڕادیۆکە پێکەوە بەم کۆدە بگۆڕە:

<fieldset>
  <legend>لە کوێ دەتەوێت دابنیشیت؟</legend>
  <p><label><input type="radio" name="seat" value="inside"> ناوەوە</label></p>
  <p><label><input type="radio" name="seat" value="garden"> باخچە</label></p>
</fieldset>

پاشەکەوتی بکە و نوێی بکەرەوە. وێبگەڕ بە شێوەی بنەڕەتی چوارچێوەیەک بەدەوری گروپەکەدا پیشان دەدات، و دەقی <legend> وەک ناونیشانی گروپەکە دەردەکەوێت.

دەقی دەنگ: <legend> وەک یەکەم توخم لەناو <fieldset> دابنێ.

بەشی ٢: خواردنە سووکەکان گروپ بکە

هەمان کار بۆ خواردنە سووکەکان بکە. پەرەگرافی «خواردنە سووکەکان» و هەردوو چێکبۆکسەکە پێکەوە بەم کۆدە بگۆڕە:

<fieldset>
  <legend>خواردنە سووکەکان</legend>
  <p><label><input type="checkbox" name="snack" value="cake"> کێک</label></p>
  <p><label><input type="checkbox" name="snack" value="dates"> خورما</label></p>
</fieldset>

بەشی ٣: بۆچی گرنگە؟

<legend> ناوێک بە تەواوی گروپەکە دەدات. ئامێری خوێندنەوەی شاشە دەتوانێت ناوی گروپەکە لەگەڵ لەیبڵی هەڵبژاردنەکان بخوێنێتەوە. بەم شێوەیە، کەسێک کە لاپەڕەکە نابینێت دەزانێت «ناوەوە» یان «باخچە» وەڵامی کام پرسیارن. شێوازی خوێندنەوەکە بەپێی ئامێر و ڕێکخستنەکانی دەگۆڕێت.

چوارچێوەکە و شێوەی پیشاندانی ناونیشانەکە ڕووخساری بنەڕەتی وێبگەڕن. دواتر بە CSS دەتوانین بیانگۆڕین.

هەڵەیەکی باو: <legend> لەبیر بکەیت. لەم نموونەیەدا، بە لابردنی ئەو توخمە، گروپەکە ناونیشانی خۆی لەدەست دەدات.

پوختە

<fieldset> خانە و هەڵبژاردنە پەیوەندیدارەکان گروپ دەکات، و <legend> ناونیشانی گروپەکە دیاری دەکات.
<legend> وەک یەکەم توخم لەناو <fieldset> دابنێ.
ئامێری خوێندنەوەی شاشە دەتوانێت ناوی گروپەکە لەگەڵ لەیبڵی هەڵبژاردنەکان بخوێنێتەوە.
شێوەی چوارچێوە و ناونیشانەکە دەتوانرێت بە CSS بگۆڕدرێت.

ڕاهێنان

١. <fieldset>ێکی سێیەم بە ناونیشانی «کاتی دانیشتن» زیاد بکە. دوو دوگمەی ڕادیۆی تێدا دابنێ، بە لەیبڵ و بەهای جیاواز. هەردووکیان name="time"یان هەبێت، بۆ ئەوەی گروپێکی جیا لە name="seat" پێکبهێنن.

٢. یەک <legend> لابەرە و ببینە چ زانیارییەک نەماوە. پاشان بیگەڕێنەرەوە.

٣. پێش و دوای دانانی هەمان خانەکان لەناو <fieldset>، هەمان هەڵبژاردنەکان بکە و فۆرمەکە بنێرە. دێڕی ناونیشان بەراورد بکە؛ ئەم گروپکردنە داتای نێردراو ناگۆڕێت.

نموونە

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>
      <fieldset>
        <legend>لە کوێ دەتەوێت دابنیشیت؟</legend>
        <p><label><input type="radio" name="seat" value="inside"> ناوەوە</label></p>
        <p><label><input type="radio" name="seat" value="garden"> باخچە</label></p>
      </fieldset>
      <fieldset>
        <legend>خواردنە سووکەکان</legend>
        <p><label><input type="checkbox" name="snack" value="cake"> کێک</label></p>
        <p><label><input type="checkbox" name="snack" value="dates"> خورما</label></p>
      </fieldset>
      <button type="submit">حیجزکردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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