Ինչպե՞ս եք ստեղծելու 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: Regular expression՝ ներմուծման վավերացման համար:

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-ի ճիշտ կառուցվածք։