როგორ შექმნით HTML ფორმას?

HTML ფორმის შექმნისთვის მე გამოვიყენებ <form> ელემენტს. მის შიგნით განთავსდება მართვის ელემენტები, როგორიცაა ტექსტური ველები (<input type="text">), პაროლის ველები (<input type="password">), მონიშნულების ყუთები (<input type="checkbox">), რადიო ღილაკები (<input type="radio">), ჩამოსაშლელი სია (<select> და <option>), ტექსტის სფეროები (<textarea>) და გაგზავნის ღილაკები (<button type="submit"> ან <input type="submit">).

ყოველი ფორმის ელემენტი უნდა ჰქონდეს name ატრიბუტი მისი სერვერზე იდენტიფიკაციისთვის და ჩვეულებრივ id ატრიბუტიც, რათა დაკავშირებული იყოს <label>-თან.

<form> ატრიბუტები:

• action: URL, სადაც ფორმის მონაცემები გაიგზავნება.
• method: HTTP მოთხოვნის მეთოდი (GET ან POST).
• enctype: მონაცემების კოდირების ტიპი გაგზავნის დროს (მაგალითად, multipart/form-data ფაილების ატვირთვისთვის).

სადაც არის მარტივი ფორმის მაგალითი:

<form action="/submit-form" method="post">
  <label for="username">მომხმარებლის სახელი:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">პაროლი:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">დამიმახსოვრე</label><br><br>

  <label for="country"> ქვეყანა:</label><br>
  <select id="country" name="country">
    <option value="ru">რუსეთი</option>
    <option value="us">აშშ</option>
  </select><br><br>

  <label for="message">შეტყობინება:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">გაგზავნა</button>
</form>

ფორმის ვალიდაცია შეიძლება განხორციელდეს როგორც კლიენტის მხარეზე (HTML5 ვალიდაციის ატრიბუტებით, JavaScript-ით), ასევე სერვერის მხარეზე:

HTML5 ვალიდაციის ატრიბუტები:

• required: ველი სავალდებულოა.
• minlength, maxlength: მინიმალური და მაქსიმალური სიგრძე ტექსტურ ველში.
• min, max: მინიმალური და მაქსიმალური მნიშვნელობა რიცხვით ველებში.
• type სხვადასხვა მნიშვნელობით (email, url, number, date და ა.შ.) ავტომატური ვალიდაციისთვის ბრაუზერის მიერ.
• pattern: რეგულარული გამოთქმა ვალიდაციისთვის.

HTML5 ვალიდაციის მაგალითი:

<form action="/submit-form" method="post">
  <label for="email">ელექტრონული ფოსტა:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">ასაკი (18-დან 99-მდე):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">საფოსტო კოდი (5 ციფრი):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">გაგზავნა</button>
</form>

ფორმის სტილიზაციისთვის გამოიყენება CSS. უფრო რთული ლოგიკის ან ასინქრონული მონაცემების გაგზავნისთვის გამოიყენება JavaScript. ფორმის ხელმისაწვდომობის გასაუმჯობესებლად გამოიყენება შესაბამისი ARIA ატრიბუტები და სწორი HTML სტრუქტურა.