შესვლა

HTML › დამწყები › ფორმების საფუძვლები

ველის წარწერა

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#label#for#ხელმისაწვდომობა#ფორმა

რას ისწავლი

  • როგორ დააკავშირო წარწერა ველთან <label>-ით
  • ორი გზა: for და id, ან ველის <label>-ში ჩასმა
  • რატომ არ ცვლის placeholder წარწერას

ტექსტი ველის გვერდით საკმარისი არ არის

წინა თავებში ველების წინ უბრალოდ ტექსტს ვწერდით: „სახელი: “ და ველი. ეკრანზე ყველაფერი გასაგებია. მაგრამ ბრაუზერისთვის ეს ტექსტი და ველი ერთმანეთთან არაფრით არის დაკავშირებული: უბრალოდ ერთმანეთის გვერდით დგანან. ეკრანის წამკითხველი, როცა მომხმარებელი ველზე გადავა, მხოლოდ იტყვის „ტექსტის ველი“, და არ ეცოდინება, რა ჩაწეროს.

ამ პრობლემას <label> ელემენტი აგვარებს: ის წარწერას ველს უკავშირებს.

for და id

ყველაზე გავრცელებული გზა: ველს მიეცი id, წარწერას კი for ატრიბუტი იმავე მნიშვნელობით:

HTML
<label for="email">ელფოსტა</label>
<input type="email" id="email" name="email">

for="email" ამბობს: „ეს წარწერა ეკუთვნის ელემენტს, რომლის id-ც email-ია“. ახლა სამი რამ ხდება:

  1. ეკრანის წამკითხველი ველზე გადასვლისას ამბობს: „ელფოსტა, ტექსტის ველი“.
  2. წარწერაზე დაჭერა კურსორს ველში სვამს. სცადე ქვემოთ!
  3. ხმით მართვის პროგრამები ველს სახელით პოულობენ: „დააჭირე ელფოსტას“.

id და name ხშირად ერთნაირია, მაგრამ მათი დანიშნულება სხვადასხვაა: id ველს გვერდზე პოულობს (წარწერისთვის, ბმულისთვის, CSS-ისთვის), name კი სერვერს ეუბნება მნიშვნელობის სახელს. გახსოვდეს, id გვერდზე უნიკალურია.

ველი წარწერის შიგნით

მეორე გზა: ველი თვითონ <label>-ის შიგნით ჩასვი. მაშინ for და id აღარ გჭირდება:

HTML
<label>
  სახელი
  <input type="text" name="name">
</label>

ორივე გზა სწორია. პირველი უფრო მოქნილია განლაგებისთვის, მეორე უფრო მოკლეა. ზოგი დეველოპერი ორივეს ერთად იყენებს: ველს წარწერაში სვამს და for/id-საც წერს, უფრო ძველი დამხმარე პროგრამებისთვის.

placeholder წარწერა არ არის

გაჩნდება ცდუნება, წარწერა საერთოდ მოაშორო და ველში მხოლოდ placeholder დატოვო: ლამაზად და კომპაქტურად გამოიყურება. მაგრამ ეს ცუდი იდეაა:

  • აკრეფისას placeholder ქრება: გრძელ ფორმაში ადვილად დაგავიწყდება, რომელი ველი რისთვის იყო.
  • მისი ღია ნაცრისფერი ტექსტი ბევრისთვის ძნელად იკითხება.
  • ეკრანის წამკითხველები მას ყოველთვის არ აცხადებს.

placeholder მაგალითისთვისაა („მაგ. nino@example.com“), წარწერა კი ყოველთვის <label>-ით.

სცადე თავად

დააჭირე სიტყვას „ელფოსტა“: კურსორი ველში გადავა. მერე დააჭირე სიტყვას „ტელეფონი“: აქ წარწერა დაკავშირებული არ არის. გაასწორე.

HTML · სცადე თავად

ხშირი შეცდომები

  • for და id არ ემთხვევა. for="mail" და id="email" ერთმანეთს ვერ იპოვის. მნიშვნელობები ზუსტად ერთნაირი უნდა იყოს.
  • for-ში name. for ველის id-ს ეძებს და არა name-ს.
  • ორი ველი ერთი id-ით. წარწერა მხოლოდ პირველს დაუკავშირდება.

სავარჯიშო

ააწყე შესვლის ფორმა ორი ველით: მომხმარებლის სახელი და პაროლი. ორივეს ჰქონდეს <label>, დაკავშირებული for-ით და id-ით, name და required. ბოლოს ღილაკი შესვლა.

HTML · სცადე თავად
💡 მინიშნება

<label for="username"> და <input id="username" name="username">. პაროლი: type="password".

✅ ამოხსნის ნახვა
HTML
<form action="/login" method="post">
  <p>
    <label for="username">მომხმარებლის სახელი</label>
    <input type="text" id="username" name="username" required>
  </p>
  <p>
    <label for="password">პაროლი</label>
    <input type="password" id="password" name="password" required>
  </p>
  <button type="submit">შესვლა</button>
</form>

მინი-ქვიზი

1როგორ დაუკავშირო <label for="city"> ველს?

2რა ხდება, როცა დაკავშირებულ წარწერაზე აჭერ?

3რატომ არ შეიძლება placeholder-ით წარწერის ჩანაცვლება?

შეჯამება

  • <label> წარწერას ველს უკავშირებს: წამკითხველი მას აცხადებს, დაჭერით კი ველი აქტიურდება.
  • დაკავშირება: for="x" წარწერაზე და id="x" ველზე, ან ველი <label>-ის შიგნით.
  • id ველს გვერდზე პოულობს, name სერვერს მნიშვნელობის სახელს ეუბნება.
  • placeholder წარწერას არ ცვლის.
📝 ჩემი შენიშვნა