Sobes.tech
Junior

Чӣ гуна формати HTML-ро эҷод мекунед?

sobes.tech AI

Ҷавоб аз AI

Барои сохтани формаи 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 истифода мешаванд.