Шаклҳо

Ин барои чӣ лозим аст

Ҷустуҷӯ, воридшавӣ ба сайт, бақайдгирӣ, шарҳ, фармоиши питса — ҳамаи инҳо шаклҳо мебошанд. Шакл аз одам маълумот ҷамъ мекунад ва онро ба сервер мефиристад. HTML барои он ҷавобгар аст, ки кадом майдонҳо ҳастанд ва чӣ тавр имзо шудаанд; сервер бо маълумот чӣ мекунад — инро барномаи серверӣ ҳал мекунад.

Шакл ва майдон

<form> — зарф барои майдонҳо. Майдони маъмултарин — <input> (теги танҳо):

<form>
  <input type="text" name="query" placeholder="Чӣ меҷӯем?">
  <button>Ҷустан</button>
</form>

Натиҷа: майдони вуруд бо маслиҳати хокистарии «Чӣ меҷӯем?» ва тугмаи «Ҷустан».

• type — намуди майдон;
• name — ном, ки бо он қимат ба сервер меравад. Бе name майдон фиристода намешавад!
• placeholder — маслиҳат дар дохили майдони холӣ (ҳангоми навиштан нопадид мешавад).

Намудҳои майдонҳои <input>

type	Ин чист
text	матни оддӣ (бо пешфарз)
email	почта — браузер @-ро месанҷад
password	парол — аломатҳо бо нуқтаҳо пинҳонанд
number	адад, бо тирчаҳои боло-поён
tel	телефон — дар смартфон клавиатураи рақамӣ кушода мешавад
date	сана — тақвим пайдо мешавад
checkbox	байрақчаи «ҳа/не»
radio	тугмаи радио — як вариант аз якчанд
color	интихоби ранг

<input type="number" name="age" min="1" max="120">
<input type="date" name="birthday">

Натиҷа: майдон бо адад (тирчаҳо онро аз 1–120 берун намебаранд) ва майдон бо тақвим.

Имзоҳо <label>

Ҳар майдон имзо лозим дорад. Онро бо майдон бо ду роҳ мепайванданд:

<!-- 1. тавассути for ва id -->
<label for="name">Ном</label>
<input type="text" id="name" name="name">

<!-- 2. бо печонак -->
<label>
  <input type="checkbox" name="agree"> Бо қоидаҳо розӣ ҳастам
</label>

Натиҷа: навиштаҷоти оддӣ. Аммо акнун пахш кардани имзо курсорро ба майдон мегузорад (ё байрақчаро мегузорад), барномаҳои хониши экран имзоро бо овоз мехонанд. for-и имзо ба id-и майдон баробар аст.

Санҷиши маълумот

Браузер метавонад майдонҳоро пеш аз фиристодан худаш санҷад:

<input type="email" name="email" required>
<input type="password" name="pass" required minlength="8">

• required — майдон ҳатмӣ аст;
• minlength / maxlength — чанд аломат мумкин аст;
• min / max — ҳудудҳо барои ададҳо ва санаҳо.

Натиҷа: агар майдонро холӣ монда тугмаро пахш кунӣ, браузер «Ин майдонро пур кунед» нишон медиҳад ва шаклро намефиристад.

Санҷиш дар браузер — барои роҳатӣ аст. Сервер ба ҳар ҳол бояд маълумотро худаш санҷад: корбари маккор метавонад required-ро тавассути абзорҳои барномасоз нест кунад.

Тугмаҳои радио, байрақчаҳо, рӯйхати афтанда

Тугмаҳои радио бо name-и якхела гурӯҳ месозанд — танҳо якеро интихоб кардан мумкин аст:

<label><input type="radio" name="size" value="s"> Хурд</label>
<label><input type="radio" name="size" value="l" checked> Калон</label>

Натиҷа: ду тугмаи мудаввар, «Калон» қайд шудааст (checked). size=l фиристода мешавад.

Рӯйхати афтанда — <select> бо вариантҳои <option>:

<select name="city">
  <option value="dushanbe" selected>Душанбе</option>
  <option value="khujand">Хуҷанд</option>
</select>

Натиҷа: рӯйхат, ки дар он фавран «Душанбе» интихоб шудааст (selected). Ба сервер city=dushanbe меравад — қимати value, на матн.

Матни бисёрсатра — <textarea> (теги ҷуфт):

<textarea name="comment" rows="4"></textarea>

Тугмаҳо

<button type="submit">Фиристодан</button>  <!-- шаклро мефиристад (бо пешфарз) -->
<button type="reset">Тоза кардан</button>  <!-- майдонҳоро тоза мекунад -->
<button type="button">Танҳо тугма</button> <!-- бе JavaScript ҳеҷ кор намекунад -->

Шакл ба куҷо фиристода мешавад

<form action="/signup" method="post">

• action — суроғае, ки маълумот ба он меравад (бе он — ба ҳамон саҳифа);
• method="get" — маълумот ба суроға илова мешавад: /search?query=гурба (барои ҷустуҷӯ);
• method="post" — маълумот пинҳон, дар бадани дархост меравад (барои паролҳо, бақайдгирӣ).

Дар дохил чӣ тавр кор мекунад

Ҳангоми пахш кардани тугмаи фиристодан браузер ҳамаи required, minlength ва намудҳои майдонҳоро месанҷад. Агар ҳама чиз дуруст бошад, он ҷуфтҳои name=қимат-ро аз ҳамаи майдонҳои шакл ҷамъ мекунад ва ба суроғаи action мефиристад. Байрақчаҳо ва тугмаҳои радиои интихобнашуда умуман фиристода намешаванд.

Хатоҳои маъмул

1. name нест. Майдон муқаррарӣ менамояд, аммо қиматаш ба сервер намеравад.
2. Тугмаҳои радио бо name-ҳои гуногун. Он гоҳ ҳамаро якбора қайд кардан мумкин — гурӯҳ кор намекунад.
3. for бо id мувофиқ нест. Имзо дигар бо майдон пайваст нест.
4. Парол тавассути type="text". Паролро ҳар касе, ки ба экран менигарад, мебинад.
5. placeholder ба ҷои <label>. Маслиҳат ҳангоми навиштан нопадид мешавад — одам фаромӯш мекунад, ки ин чӣ майдон буд.

Ёддошт

Код	Чӣ кор мекунад
<form action="…" method="post">	шакл ва ба куҷо фиристодани он
<input type="…" name="…">	майдони вуруд
<label for="id">	имзо ба майдон
required, minlength, min, max	санҷиш дар браузер
placeholder="…"	маслиҳат дар майдони холӣ
type="radio" + name-и якхела	интихоби як вариант
checked / selected	бо пешфарз қайдшуда / интихобшуда
<select> + <option value>	рӯйхати афтанда
<textarea>	матни бисёрсатра
<button type="submit">	тугмаи фиристодан