HTML-ში რა სახის input-ელემენტები არსებობს?

მონაცემთა შემოტანის შემდეგი ტიპები არსებობს:

• text: ერთ ხაზიანი ტექსტური ველი.
• password: პაროლის ველი, სიმბოლოები დამალულია.
• submit: ფორმის გაგზავნის ღილაკი.
• reset: ფორმის აღდგენის ღილაკი.
• radio: გადამრთველი (ერთი მრავლისგან).
• checkbox: მონიშვნის ყუთი (ერთი ან რამდენიმე).
• button: ჩვეულებრივი ღილაკი.
• file: ფაილის არჩევის ველი.
• hidden: დამალული ველი, რომელიც მომხმარებელს არ ჩანს, მაგრამ ფორმასთან ერთად იგზავნება.
• image: სურათის ღილაკი ფორმის გაგზავნისთვის.

HTML5-ის სპეციფიკაციამ დაამატა ახალი ტიპები:

• email: ელფოსტის მისამართის შეყვანა.
• url: URL-ის შეყვანა.
• number: რიცხვის შეყვანა.
• range: სლაიდერი რიცხვის მნიშვნელობის არჩევისთვის მითითებულ დიაპაზონში.
• date: თარიღის არჩევა.
• month: თვე და წელი არჩევა.
• week: კვირა და წელი არჩევა.
• time: დროის არჩევა.
• datetime-local: თარიღი და დრო არჩევა, დროის ზონას გარეშე.
• search: ძიების ველი.
• color: ფერის არჩევა.
• tel: ტელეფონის ნომრის შეყვანა.

გამოყენების მაგალითი:

<!-- ერთ ხაზიანი ტექსტური ველი -->
<input type="text" placeholder="სახელი">

<!-- პაროლის ველი -->
<input type="password" placeholder="პაროლი">

<!-- ფორმის გაგზავნის ღილაკი -->
<input type="submit" value="გაგზავნა">

<!-- ფორმის აღდგენის ღილაკი -->
<input type="reset" value="გადატვირთვა">

<!-- გადამრთველები -->
<input type="radio" name="სქესი" value="მამრობითი"> მამრობითი
<input type="radio" name="სქესი" value="მდედრობითი"> მდედრობითი

<!-- მონიშვნის ყუთები -->
<input type="checkbox" name="მაინც" value="მუსიკა"> მუსიკა
<input type="checkbox" name="მაინც" value="სპორტი"> სპორტი

<!-- ჩვეულებრივი ღილაკი -->
<input type="button" value="დაწკაპე მე">

<!-- ფაილის არჩევის ველი -->
<input type="file">

<!-- დამალული ველი -->
<input type="hidden" name="userId" value="123">

<!-- სურათის ღილაკი -->
<input type="image" src="submit.png" alt="გაგზავნა">

<!-- ელფოსტის ველი -->
<input type="email" placeholder="ელ. ფოსტა">

<!-- URL ველი -->
<input type="url" placeholder="ვებგვერდი">

<!-- რიცხვის ველი -->
<input type="number" min="1" max="10">

<!-- სლაიდერი -->
<input type="range" min="0" max="100">

<!-- თარიღის ველი -->
<input type="date">

<!-- თვეში არჩევა -->
<input type="month">

<!-- კვირაში არჩევა -->
<input type="week">

<!-- დროის არჩევა -->
<input type="time">

<!-- თარიღი და დრო (ადგილობრივი) -->
<input type="datetime-local">

<!-- ძიების ველი -->
<input type="search" placeholder="ძებნა">

<!-- ფერის არჩევა -->
<input type="color">

<!-- ტელეფონის ნომრის ველი -->
<input type="tel" placeholder="+995 (xxx) xxx-xx-xx">