HTML form არის ვებ განვითარების მნიშვნელოვანი ნაწილი, რომელიც საშუალებას აძლევს მომხმარებლებს დაუკავშირდნენ ვებსაიტს და გაგზავნონ მონაცემები სერვერზე. Form გამოიყენება მიზნების ფართო სპექტრისთვის, როგორიცაა მომხმარებლის შეგროვება form, მომხმარებლის შეყვანის დამუშავება და ვებსაიტზე მომხმარებლის ქმედებების ჩართვა. ამ სტატიაში ჩვენ შევისწავლით ატრიბუტებს და სხვადასხვა ტიპის შეყვანის ველებს, შევარჩევთ ელემენტებს, ტექსტურ ზონებსა და ღილაკებს, რომლებიც ჩვეულებრივ გამოიყენება HTML-ში form.
შეყვანის ველები
<input type="text">: ქმნის ტექსტის შეყვანის ველს, სადაც მომხმარებლებს შეუძლიათ შეიყვანონ ალფანუმერული სიმბოლოები.<input type="password">: აჩვენებს პაროლის შეყვანის ველს, რომელიც ფარავს შეყვანილ სიმბოლოებს.<input type="email">: უზრუნველყოფს ელ.ფოსტის ვალიდაციას შეყვანის ველებისთვის, რომლებიც საჭიროებენ ელფოსტის მოქმედ მისამართს.<input type="number">: ზღუდავს შეყვანას მხოლოდ რიცხვითი მნიშვნელობებით.<input type="checkbox">: წარმოადგენს მოსანიშნი ველს, რომლის არჩევა ან გაუქმება შეუძლია მომხმარებლებს.<input type="radio">: წარმოადგენს რადიო ღილაკს, რომელიც საშუალებას აძლევს მომხმარებლებს აირჩიონ ერთი ვარიანტი ოფციების ჯგუფიდან.<input type="file">: საშუალებას აძლევს მომხმარებლებს შეარჩიონ და ატვირთონ ფაილები.<input type="submit">: აჩვენებს ღილაკს, რომელიც აგზავნის form დაწკაპუნებისას.<input type="reset">: აჩვენებს ღილაკს, რომელიც აღადგენს form საწყის მდგომარეობას.<input type="date">: უზრუნველყოფს თარიღის ამომრჩეველს თარიღების შესარჩევად.<input type="time">: საშუალებას აძლევს მომხმარებლებს შეიყვანონ დროის მნიშვნელობები.
აირჩიეთ ელემენტები
<select>: ქმნის ჩამოსაშლელ მენიუს არჩევის ვარიანტებით.<option>: განსაზღვრავს ვარიანტს ჩამოსაშლელი მენიუში, რომელიც მოთავსებულია<select>ტეგის შიგნით.<optgroup>: აჯგუფებს დაკავშირებულ ვარიანტებს ჩამოსაშლელ მენიუში.<select multiple>: საშუალებას აძლევს მომხმარებლებს აირჩიონ რამდენიმე ვარიანტი ერთდროულად Ctrl კლავიშის(ან Command კლავიშის Mac-ზე) დაჭერით დაჭერისას.
ტექსტარეასი
<textarea>: ქმნის მრავალხაზოვანი ტექსტის შეყვანის ველს, სადაც მომხმარებლებს შეუძლიათ ტექსტის უფრო გრძელი ბლოკების შეყვანა და რედაქტირება. მისი ზომის შეცვლა და კონფიგურაცია შესაძლებელია ისეთი ატრიბუტებით, როგორიცაა rows და cols მისი ზომების განსაზღვრა.
ღილაკები
<button>: წარმოადგენს ღილაკს, რომელსაც შეუძლია ამოქმედდეს სხვადასხვა მოქმედებების ფარგლებში form. ის შეიძლება გამოყენებულ იქნას JavaScript ფუნქციის გასაგზავნად form ან form სხვა გვერდზე გადასასვლელად.
გამოყენების მაგალითი:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
ეს მაგალითი აჩვენებს სხვადასხვა ელემენტების გამოყენებას form, მათ შორის input ველებს, textarea, და ღილაკებს. მოგერიდებათ შეცვალოთ ელემენტები და ატრიბუტები თქვენი კონკრეტული მოთხოვნების მიხედვით. checkbox select dropdown submit form