1. Çoxsaylı seçim və siyahılar
HTML formaları istifadəçilərin veb-səhifə ilə qarşılıqlı əlaqəsi üçün bir çox imkanlar təklif edir. Mətn sahələri və düymələrdən əlavə, formalar çoxsaylı seçim və siyahı elementlərini dəstəkləyir, bu da daha çevik və rahat məlumat daxil etmə interfeysləri yaratmağa imkan verir. Bu gün onlarla tanış olacağıq.
HTML formalarında siyahıdan seçim etmək üçün bir neçə üsul təqdim edir. Bu məqsədlə ən geniş istifadə edilən elementlər <select> və <option>, həmçinin checkbox-lar və radio-duymələrdir.
Açılan siyahı: <select> və <option>
<select> tag-i açılan siyahı yaradır, <option> isə bu siyahının daxilində seçimləri qeyd etmək üçün istifadə olunur. İstifadəçi siyahıdan bir və ya bir neçə seçim edə bilər.
Tək seçim: Varsayılan olaraq <select> yalnız bir seçim etməyə imkan verir.
<label for="country">Ölkəni seçin:</label>
<select id="country" name="country">
<option value="ru">Rusiya</option>
<option value="us">ABŞ</option>
<option value="de">Almaniya</option>
</select>
<label for="country">Ölkəni seçin:</label>
<select id="country" name="country">
<option value="ru">Rusiya</option>
<option value="us">ABŞ</option>
<option value="de">Almaniya</option>
</select>
Çoxsaylı seçim: multiple atributunu əlavə etsək, istifadəçi Ctrl (Windows-da) və ya Cmd (Mac-də) düyməsini basıb saxlayaraq bir neçə seçim edə bilər.
<label for="languages">Dilləri seçin:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Rus dili</option>
<option value="en">İngilis dili</option>
<option value="de">Alman dili</option>
</select>
<label for="languages">Dilləri seçin:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Rus dili</option>
<option value="en">İngilis dili</option>
<option value="de">Alman dili</option>
</select>
Bu halda bir neçə seçilmiş elementin məlumatları serverə dəyərlərin massivi kimi göndərilir.
Checkbox-lar: <input type="checkbox">
Checkbox-lar istifadəçilərə verilmiş siyahıya əsasən bir və ya bir neçə seçim etmək imkanı verir. Hər bir checkbox <input type="checkbox"> tag-i ilə yaradılır.
<label><input type="checkbox" name="interests" value="sports"> İdman</label>
<label><input type="checkbox" name="interests" value="music"> Musiqi</label>
<label><input type="checkbox" name="interests" value="travel"> Səyahət</label>
<label><input type="checkbox" name="interests" value="sports"> İdman</label>
<label><input type="checkbox" name="interests" value="music"> Musiqi</label>
<label><input type="checkbox" name="interests" value="travel"> Səyahət</label>
Əgər bütün checkbox-ların name atributu eyni olsa, formaya qeyd edilən hər bir checkbox məlumatları massivi kimi göndərilir.
Radio-duymələr: <input type="radio">
Radio-duymələr istifadəçiyə yalnız bir seçim etmək imkanı verir. Eyni name atributuna malik radio-duymələr bir qrupla birləşərək, istifadəçi yalnız birini seçə bilər.
<p>Cinsi seçin:</p>
<label><input type="radio" name="gender" value="male"> Kişi</label>
<label><input type="radio" name="gender" value="female"> Qadın</label>
<p>Cinsi seçin:</p>
<label><input type="radio" name="gender" value="male"> Kişi</label>
<label><input type="radio" name="gender" value="female"> Qadın</label>
Radio-duymələr bir neçə sabit seçimdən (məsələn, «Bəli» və ya «Xeyr», cins, yaş qrupu və s.) birini seçmək üçün əlverişlidir.
2. Müxtəlif tipli forma elementləri
HTML-də bir çox müxtəlif tip <input> mövcuddur, hansı ki, məlumat daxil edilməsi üçün müxtəlif imkanlar təqdim edir. Əvvəlcədən nəzərdən keçirdiyimiz tiplərə əlavə olaraq, formalarla işləməyi yaxşılaşdıran və daha dəqiq məlumat toplamağa imkan verən bir neçə faydalı tip var.
Telefon (type="tel")
Telefon nömrəsi daxil etmək üçün sahə. Bu tip telefon nömrələrinin daxil edilməsinə imkan verir və cihazdan asılı olaraq, mobil cihazlarda rəqəmli klaviaturanı göstərə bilər.
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone" placeholder="+994 (123) 456-7890">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone" placeholder="+994 (123) 456-7890">
Axtarış (type="search")
Mətn daxil etmək üçün sahə, hansı ki, axtarış üçün optimallaşdırılmışdır. Bu sahə təmizləmə düyməsini (brauzerdən asılı olaraq) daxil edə bilər və tez-tez adi mətn sahələrindən fərqli olaraq tərtib olunur.
<label for="search">Axtarış:</label>
<input type="search" id="search" name="search" placeholder="Sorğunuzu daxil edin">
<label for="search">Axtarış:</label>
<input type="search" id="search" name="search" placeholder="Sorğunuzu daxil edin">
URL (type="url")
Veb ünvan daxil etmək üçün sahə. Forma göndərilməyə çalışılan zaman HTML düzgün URL formatının daxil edildiyini yoxlayacaq.
<label for="website">Veb sayt:</label>
<input type="url" id="website" name="website">
<label for="website">Veb sayt:</label>
<input type="url" id="website" name="website">
Tarix (type="date")
Tarix seçmək üçün sahə. Əksər müasir brauzerlərdə avtomatik olaraq təqvim göstərilir.
<label for="birthday">Doğum tarixi:</label>
<input type="date" id="birthday" name="birthday">
<label for="birthday">Doğum tarixi:</label>
<input type="date" id="birthday" name="birthday">
Rəng (type="color")
Rəng seçimi üçün sahə. Rəng palitrası açılır.
<label for="color">Rəng seçin:</label>
<input type="color" id="color" name="color">
<label for="color">Rəng seçin:</label>
<input type="color" id="color" name="color">
Aralıq (type="range")
Slayder, hansı ki, verilən aralıqda ədədi dəyəri seçməyə imkan verir. min, max və step atributları minimum və maksimum dəyəri, həmçinin dəyişiklik addımını təyin edir.
<label for="volume">Səs səviyyəsi:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">
<label for="volume">Səs səviyyəsi:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">
Fayl (type="file")
Faylları yükləmək üçün sahə. Bu tip istifadəçiyə öz cihazında fayl seçməyə və onu serverə göndərmək üçün formaya əlavə etməyə imkan verir. Sadəcə müəyyən fayl tiplərinə (məsələn, yalnız şəkillər və ya sənədlər) məhdudiyyət qoymaq üçün accept atributunu təyin edə bilərsiniz.
<label for="file">Faylı yükləyin:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
<label for="file">Faylı yükləyin:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
Gizli sahə (type="hidden")
Gizli sahə, hansı ki, səhifədə göstərilmir və istifadəçi ilə qarşılıqlı əlaqə üçün nəzərdə tutulmayıb. Məsələn, ID-lər, tokenlər və s. kimi göstərməməli olduğunuz məlumatları göndərmək üçün bu sahə faydalıdır.
<input type="hidden" name="user_id" value="12345">
Düymə (type="button")
JavaScript-funksiyalarını işə salmaq və ya digər əməliyyatlar üçün istifadə olunan adi düymə. Bu tip submit tipli düymələrdən fərqli olaraq formanı göndərmir.
<button type="button" onclick="alert('Düyməni sıxdınız')">Məni sıx</button>
<button type="button" onclick="alert('Düyməni sıxdınız')">Məni sıx</button>
3. Nümunə
Aşağıdakı nümunədə müxtəlif ssenarilər üçün müxtəlif <input> növləri daxil edilən bir forma yaradacağıq:
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Əlavə daxil növləri</title>
</head>
<body>
<form action="/submit" method="post">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone" placeholder="+994 (123) 456-7890" required>
<label for="search">Axtarış:</label>
<input type="search" id="search" name="search" placeholder="Sorğunuzu daxil edin">
<label for="appt">Vaxt seçin:</label>
<input type="time" id="appt" name="appt">
<label for="meeting">Görüş tarixi və vaxtı:</label>
<input type="datetime-local" id="meeting" name="meeting">
<label for="month">Ay və il:</label>
<input type="month" id="month" name="month">
<label for="week">Həftə:</label>
<input type="week" id="week" name="week">
<label for="volume">Səs səviyyəsi:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">
<label for="file">File yükləyin:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
<input type="hidden" name="user_id" value="12345">
<button type="submit">Göndər</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Əlavə daxil növləri</title>
</head>
<body>
<form action="/submit" method="post">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone" placeholder="+994 (123) 456-7890" required>
<label for="search">Axtarış:</label>
<input type="search" id="search" name="search" placeholder="Sorğunuzu daxil edin">
<label for="appt">Vaxt seçin:</label>
<input type="time" id="appt" name="appt">
<label for="meeting">Görüş tarixi və vaxtı:</label>
<input type="datetime-local" id="meeting" name="meeting">
<label for="month">Ay və il:</label>
<input type="month" id="month" name="month">
<label for="week">Həftə:</label>
<input type="week" id="week" name="week">
<label for="volume">Səs səviyyəsi:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">
<label for="file">File yükləyin:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
<input type="hidden" name="user_id" value="12345">
<button type="submit">Göndər</button>
</form>
</body>
</html>
Nəticə
HTML-də əlavə <input> növləri istifadəçilərin xüsusi ehtiyaclarını və məlumat növlərini nəzərə alaraq formalar yaratmağa imkan verir. Bu növlər sayəsində formalar istifadəçi əlaqəsini yaxşılaşdırır və məlumat daxil etməni daha əlverişli edir.
GO TO FULL VERSION