<form>,name,actionvəmethod-un rolunu izah etmək- Sahələri
<label>ilə düzgün əlaqələndirmək - Tapşırığa uyğun
type,<select>,<textarea>, radio düymələri və işarə xanaları seçmək required,min,max,minlengthvəpatternilə yoxlama əlavə etmək
Dərnəyə yazılanda, video axtaranda və ya pizza sifariş edəndə hər dəfə forma doldurursan. Formalar səhifənin insanlardan məlumat toplamaq üsuludur. Bu dərsdə sahə adları, müxtəlif sahə növləri və daxili yoxlaması olan forma quracaqsan — bir sətir belə JavaScript yazmadan.
Forma və onun sahələri
<form> elementi sahələri bir yerə toplayır. action atributu məlumatın hara göndəriləcəyini, method isə necə göndəriləcəyini bildirir: get məlumatı ünvan sətrinə yazır (axtarış üçün əlverişlidir), post isə onu ünvanda yox, sorğunun içində göndərir (parollar və şəxsi məlumatlar üçün). Hər sahənin name atributu olmalıdır: server məlumatı name=value cütləri şəklində alır.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 10px; font-weight: 600; }
input { font: inherit; padding: 6px 8px; margin-top: 4px; width: 240px; }
button { margin-top: 14px; padding: 8px 18px; font: inherit; color: white;
background: #4f46e5; border: 0; border-radius: 6px; }
</style>
<form action="/signup" method="post">
<label for="name">Your name</label>
<input id="name" name="name" type="text" placeholder="Aysel">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="aysel@example.com">
<label for="pass">Password</label>
<input id="pass" name="pass" type="password">
<button type="submit">Sign up</button>
</form>action ünvanına gedərdi.`<label>`: sahənin adı
<label> (nişan) sahənin nə üçün olduğunu bildirir. Onu for atributu ilə sahənin id-sinə bağla: <label for="email"> və <input id="email">. Onda nişana klik edəndə kursor sahəyə keçir (işarə xanası isə işarələnir), ekran oxuyucusu da sahəyə gələndə onun adını səsləndirir. Başqa yol sahəni birbaşa <label>-in içinə yazmaqdır.
Sahə növləri
<input> elementinin type atributu sahənin növünü dəyişir. Telefonda o, klaviaturanı da dəyişir: email üçün @ düyməsi, tel üçün isə rəqəm klaviaturası görünür.
type | Nə üçündür |
|---|---|
text | bir sətirlik mətn |
email | e-poçt ünvanı; formatı yoxlanılır |
password | simvollar nöqtələrlə gizlədilir |
number | oxları olan ədəd sahəsi; min, max, step |
date | tarix seçmək üçün təqvim |
checkbox | işarə xanası — bir neçəsini seçmək olar |
radio | eyni name-li qrupdan yalnız bir seçim |
range, color | sürgü və rəng seçimi |
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
fieldset { border: 1px solid #cbd5e1; border-radius: 8px; }
p { margin: 10px 0; }
</style>
<form>
<fieldset>
<legend>Favorite subject</legend>
<label><input type="radio" name="subject" value="math"> Math</label>
<label><input type="radio" name="subject" value="art"> Art</label>
<label><input type="radio" name="subject" value="music"> Music</label>
</fieldset>
<p><label><input type="checkbox" name="news"> Send me news</label></p>
<p><label for="city">City</label>
<select id="city" name="city">
<option>Baku</option><option>Ganja</option><option>Sumgait</option>
</select></p>
<p><label for="level">Level</label> <input id="level" name="level" type="range" min="1" max="10">
<label for="color">Color</label> <input id="color" name="color" type="color" value="#4f46e5"></p>
<p><label for="msg">Message</label><br>
<textarea id="msg" name="msg" rows="3" cols="30"></textarea></p>
</form><label> sayəsində klik sahəni seçir. Eyni name-li radio düymələrindən yalnız biri seçilə bilər.<fieldset> bir-biri ilə bağlı sahələri qruplaşdırır, <legend> isə qrupa ad verir. <select> və <option> açılan siyahı, <textarea> isə çoxsətirli mətn sahəsi yaradır. Radio düymələri və işarə xanaları üçün value atributu serverə nəyin göndəriləcəyini müəyyən edir.
Daxili yoxlama
Brauzer məlumatı göndərməzdən əvvəl özü yoxlaya bilər — JavaScript lazım deyil. Bunun üçün atributlar var:
required— sahə boş qala bilməz.minlengthvəmaxlength— mətnin ən az və ən çox uzunluğu.min,maxvəstep— ədədlər və tarixlər üçün hədlər və addım.pattern— qiymətin uyğun gəlməli olduğu nümunə (müntəzəm ifadə). Məsələn,pattern="AZ[0-9]{4}"Azərbaycanın poçt indeksləri kimi «AZ» və dörd rəqəm tələb edir: AZ1000.type="email"vətype="url"formatı avtomatik yoxlayır.
Sahələrdən biri qaydaya uyğun deyilsə, göndərmə düyməsinə basanda brauzer mesaj göstərir və formanı göndərmir. CSS-dəki :valid və :invalid psevdosinifləri isə düzgün və səhv sahələri fərqli rənglərlə göstərməyə imkan verir.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 8px; }
input { font: inherit; padding: 6px; border: 2px solid #cbd5e1; border-radius: 6px; }
input:valid { border-color: #16a34a; }
input:invalid { border-color: #f59e0b; }
</style>
<form>
<label for="user">Username (3–12 characters)</label>
<input id="user" name="user" required minlength="3" maxlength="12">
<label for="age">Age (10–99)</label>
<input id="age" name="age" type="number" min="10" max="99" required>
<label for="mail">Email</label>
<input id="mail" name="mail" type="email" required>
<label for="zip">Postal code, e.g. AZ1000</label>
<input id="zip" name="zip" pattern="AZ[0-9]{4}" required>
</form>AZ1000, sonra az1000 yazıb müqayisə et.Əsas fikirlər
<form>sahələri toplayır;actionhara,method(get/post) necə göndərməyi bildirir, hər sahəyənamelazımdır.<label for="id">nişanı sahəyə bağlayır: klik sahəni seçir, ekran oxuyucusu adı səsləndirir.typesahənin növünü və telefondakı klaviaturanı dəyişir:email,number,date,checkbox,radiovə s.required,minlength,min,maxvəpatternbrauzerə məlumatı göndərmədən əvvəl yoxlamağı tapşırır.- Brauzerdəki yoxlama rahatlıq üçündür — server məlumatı yenə də özü yoxlamalıdır.
Özünü yoxla
10 sual. Hər düzgün cavab XP qazandırır.