ტექსტური ველები

რას ისწავლი

• <input>-ის ყველაზე ხშირი ტიპები და რას ცვლის თითოეული
• როგორ ჩაწერო გრძელი ტექსტი <textarea>-ში
• როგორ შეამოწმებინო ბრაუზერს ველი required, min, max და სხვა ატრიბუტებით

ერთი ელემენტი, ბევრი სახე

<input> ცარიელი ელემენტია, რომლის ქცევასაც type ატრიბუტი განსაზღვრავს. ტიპის შეცვლით ერთი და იგივე ელემენტი ტექსტის ველიდან კალენდრად ან ფერის ამრჩევად იქცევა:

<input type="text" name="nickname">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="age">
<input type="tel" name="phone">
<input type="date" name="birthday">

• text: ჩვეულებრივი ტექსტი, ნაგულისხმევი ტიპი.
• email: ელფოსტა. ბრაუზერი ამოწმებს, რომ მასში @ იყოს.
• password: ჩაწერილი ასოები წერტილებად ჩანს.
• number: რიცხვი. ველს ისრები უჩნდება და ტექსტს ვეღარ ჩაწერ.
• tel: ტელეფონის ნომერი.
• date: თარიღი. ბრაუზერი კალენდარს აჩვენებს.

ტიპი განსაკუთრებით მნიშვნელოვანია ტელეფონზე: email ტიპის ველზე კლავიატურაზე @ ჩნდება, tel-ზე და number-ზე ციფრების კლავიატურა. სწორი ტიპი მომხმარებელს შეყვანას უადვილებს და შეცდომებს ამცირებს.

გრძელი ტექსტი: textarea

<input> ერთხაზიანია. კომენტარისთვის, წერილისთვის ან შეტყობინებისთვის <textarea> გამოიყენე:

<textarea name="message" rows="4"></textarea>

<textarea>-ს, <input>-ისგან განსხვავებით, დამხურავი ტეგი აქვს. rows განსაზღვრავს, რამდენი ხაზი ჩანს ერთდროულად. მომხმარებელს შეუძლია მეტი ჩაწეროს: ველი გადახვევას დაიწყებს. ტეგებს შორის დაწერილი ტექსტი ველში წინასწარ ჩაწერილ ტექსტად გამოჩნდება.

სასარგებლო ატრიბუტები

• placeholder: მინიშნება ცარიელ ველში, რომელიც აკრეფისას ქრება: placeholder="მაგ. nino@example.com". ის წარწერას არ ცვლის: როცა ტექსტს დაიწყებ, მინიშნება ქრება და აღარ გახსოვს, რისთვის იყო ველი. წარწერას შემდეგ თავში ისწავლი.
• value: ველის საწყისი მნიშვნელობა, რომელიც უკვე ჩაწერილია.
• required: ველი სავალდებულოა. ცარიელ ველთან ბრაუზერი ფორმას არ გააგზავნის და გაფრთხილებას აჩვენებს. ეს ლოგიკური ატრიბუტია, მნიშვნელობის გარეშე.
• minlength და maxlength: ტექსტის მინიმალური და მაქსიმალური სიგრძე.
• min და max: რიცხვის ან თარიღის საზღვრები: <input type="number" min="6" max="18">.

<input type="number" name="age" min="6" max="18" required>
<input type="password" name="password" minlength="8" required>

ბრაუზერის შემოწმება მხოლოდ დასაწყისია

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

სცადე თავად

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

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

• ყველაფერი type="text". ელფოსტას, ტელეფონს და რიცხვს თავისი ტიპი სჭირდება: ტელეფონზე სწორი კლავიატურა გამოჩნდება.
• placeholder წარწერის ნაცვლად. ის აკრეფისას ქრება და ეკრანის წამკითხველიც ყოველთვის ვერ კითხულობს.
• <textarea> დამხურავი ტეგის გარეშე. მის შემდეგ მთელი კოდი ველის ტექსტად იქცევა.

<form action="/club/join" method="post">
  <p>სახელი: <input type="text" name="name" required></p>
  <p>ელფოსტა: <input type="email" name="email" required></p>
  <p>ასაკი: <input type="number" name="age" min="8" max="16"></p>
  <p>რატომ გინდა წრეზე სიარული?<br><textarea name="reason" rows="3"></textarea></p>
  <button type="submit">ჩაწერა</button>
</form>

მინი-ქვიზი

შეჯამება

• <input type="...">: text, email, password, number, tel, date და სხვა. ტიპი ქცევას და ტელეფონის კლავიატურას ცვლის.
• გრძელი ტექსტისთვის <textarea>, დამხურავი ტეგით.
• placeholder მინიშნებაა და არა წარწერა. required, minlength, min, max ბრაუზერს შეამოწმებინებს.
• ბრაუზერის შემოწმება მოხერხებულობისთვისაა, სერვერი მონაცემებს თავიდან ამოწმებს.