وانەی 44 لە 67

وانەی ٤٤: تایبەتمەندی autocomplete

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

<form action="thanks.html" method="get">
  <h2>زانیارییەکانی گەیاندن</h2>
  <p>
    <label for="fullname">ناوی تەواو</label>
    <input id="fullname" name="fullname" type="text">
  </p>
  <p>
    <label for="email">ئیمەیڵ</label>
    <input dir="ltr" id="email" name="email" type="email">
  </p>
  <p>
    <label for="phone">ژمارەی تەلەفۆن</label>
    <input dir="ltr" id="phone" name="phone" type="tel">
  </p>
  <button type="submit">ناردن</button>
</form>

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

بەشی ١: یارمەتی وێبگەڕ بدە خانەکان پڕ بکاتەوە بەشی ٢: خانەکانی تر بەشی ٣: بەهاکانی تر

بەشی ١: یارمەتی وێبگەڕ بدە خانەکان پڕ بکاتەوە

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

<input id="fullname" name="fullname" type="text" autocomplete="name">

لێرەدا autocomplete="name" بە وێبگەڕ دەڵێت کە ئەم خانەیە بۆ ناوی تەواوی کەسەکەیە.

بەشی ٢: خانەکانی تر

هەمان کار بۆ خانەکانی ئیمەیڵ و ژمارەی تەلەفۆن بکە:

<input dir="ltr" id="email" name="email" type="email" autocomplete="email">
<input dir="ltr" id="phone" name="phone" type="tel" autocomplete="tel">

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

بەشی ٣: بەهاکانی تر

autocomplete بەهای زۆری هەیە. بۆ خانەکانی وشەی نهێنی، current-password بۆ وشەی نهێنیی ئێستای بەکارهێنەرە، و new-password بۆ دانانی وشەیەکی نهێنیی نوێیە، وەک لە کاتی دروستکردنی هەژمار یان گۆڕینی وشەی نهێنیدا.

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

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

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

پوختە

autocomplete ڕێنمایی وێبگەڕ دەکات کە هەر خانەیەک بۆ چ زانیارییەکە، بۆ ئەوەی بتوانێت زانیاریی گونجاو پێشنیار بکات.
بەها بەسوودەکان بریتین لە name، email، tel، current-password و new-password.
پێشنیارەکان بەپێی وێبگەڕ، ڕێکخستنەکانی و زانیارییە هەڵگیراوەکان دەگۆڕێن؛ نووسینی autocomplete بە مانای دڵنیابوون لە پڕکردنەوەی خۆکار نییە.
بەهایەک بەکاربهێنە کە لەگەڵ مەبەستی خانەکە دەگونجێت.

ڕاهێنان

١. autocomplete بە بەهای گونجاو بۆ هەر سێ خانەکە زیاد بکە.

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

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

نموونە

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="fullname">ناوی تەواو</label>
        <input id="fullname" name="fullname" type="text" autocomplete="name">
      </p>
      <p>
        <label for="email">ئیمەیڵ</label>
        <input dir="ltr" id="email" name="email" type="email" autocomplete="email">
      </p>
      <p>
        <label for="phone">ژمارەی تەلەفۆن</label>
        <input dir="ltr" id="phone" name="phone" type="tel" autocomplete="tel">
      </p>
      <button type="submit">ناردن</button>
    </form>
  </body>
</html>

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

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

ئەنجام

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