وانەی 42 لە 67

وانەی ٤٢: خانەی تەلەفۆن و URL: tel و url

ماوە: نزیکەی ٣ خولەک، لە ٣ بەشی کورت.

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

<form action="thanks.html" method="get">
  <h2>کارتی ناساندن</h2>
  <p>
    <label for="phone">ژمارەی تەلەفۆن</label>
    <input dir="ltr" id="phone" name="phone" type="text">
  </p>
  <p>
    <label for="website">ماڵپەڕ</label>
    <input dir="ltr" id="website" name="website" type="text">
  </p>
  <button type="submit">ناردن</button>
</form>

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

بەشی ١: type="tel" (نزیکەی ١ خولەک) بەشی ٢: type="url" (نزیکەی ١ خولەک) بەشی ٣: ئەو جۆرە هەڵبژێرە کە دەگونجێت (نزیکەی ١ خولەک)

بەشی ١: type="tel" (نزیکەی ١ خولەک)

خانەی یەکەم بگۆڕە بۆ خانەی ژمارەی تەلەفۆن:

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

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

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

بەشی ٢: type="url" (نزیکەی ١ خولەک)

بگەڕێوە بۆ index.html. ئێستا خانەی دووەم بگۆڕە بۆ خانەی ناونیشانی وێب:

<input dir="ltr" id="website" name="website" type="url">

لە وێبگەڕدا سەیر بکە، example.com لە خانەی ماڵپەڕدا بنووسە و کرتە لە «ناردن» بکە. وێبگەڕ پەیامێک پیشان دەدات و فۆرمەکە نانێرێت. پاشان دەقەکە بگۆڕە بۆ https://example.com و دووبارە بینێرە. ئەم جارە وەردەگیرێت.

خانەی url چاوەڕێی ناونیشانێکی تەواو دەکات، کە بە بەشێکی وەک https:// دەست پێبکات. تێکستی example.com بە تەنها ناونیشانێکی تەواو نییە. http://example.comـیش وەردەگیرێت.

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

بەشی ٣: ئەو جۆرە هەڵبژێرە کە دەگونجێت (نزیکەی ١ خولەک)

هەردووکیان هەمان توخمی <input>ـن، بەڵام بەهای typeـیان جیاوازە. ئەو جۆرە هەڵبژێرە کە لەگەڵ داتاکە دەگونجێت. tel دەتوانێت نووسینی ژمارەی تەلەفۆن لەسەر مۆبایل ئاسانتر بکات. url وا دەکات وێبگەڕ شێوازی ناونیشانەکە بپشکنێت.

هەڵەیەکی باو: چاوەڕێی ئەوە بیت tel بە خۆی ژمارەیەکی بە شێوازێکی هەڵە ڕەت بکاتەوە.

پوختە

type="tel" بۆ ژمارەی تەلەفۆنە. لەسەر مۆبایل لەوانەیە کیبۆردێکی گونجاو پیشان بدات، بەڵام بە خۆی شێوازی ژمارەکە ناپشکنێت.
type="url" چاوەڕێی ناونیشانێکی تەواو دەکات، وەک https://example.com.
پشکنینی شێوازی URL بە مانای دڵنیابوون لە بوونی ماڵپەڕەکە نییە.
ئەو جۆرە هەڵبژێرە کە لەگەڵ داتاکە دەگونجێت.

ڕاهێنان

١. example.com، https://example.com و http://example.com لە خانەی ماڵپەڕدا تاقی بکەرەوە. دوای هەر ناردنێکی سەرکەوتوو، بگەڕێوە بۆ index.html بۆ تاقیکردنەوەی دواتر.

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

٣. placeholderـێکی گونجاو بۆ هەر خانەیەک زیاد بکە

نموونە

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

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

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

ئەنجام

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