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 структурасы колдонулат.