8.1 <datalist> tagı
<datalist> tagı <input> elementləri üçün əvvəlcədən təyin olunmuş seçimlər siyahısını təqdim etmək üçün istifadə olunur. Bu, istifadəçilərə təqdim olunan seçimlərdən dəyərləri seçmək imkanı verir, məlumat daxil edilməsini asanlaşdırır və daha dəqiq, proqnozlaşdırıla bilən giriş təmin edir.
Sintaksis
<datalist id="list-id">
<option value="Seçim 1">
<option value="Seçim 2">
<option value="Seçim 3">
</datalist>
<input list="list-id">
<datalist> tagının xüsusi atributları yoxdur, lakin onun əsas aspekti list atributu vasitəsilə <input> elementi ilə əlaqəsidir. <datalist> tagının id atributu <input> elementinin list atributundakı dəyərə uyğun olmalıdır.
İstifadə nümunəsi:
<form>
<label for="browser">Brauzer seçin:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
<button type="submit">Göndərmək</button>
</form>
İzah
<datalist>elementi: giriş üçün mümkün dəyərlərin siyahısını ehtiva edir<input>elementi:listatributunu ehtiva edir, bu isə onu browsers identifikatoru vasitəsilə<datalist>elementi ilə əlaqələndirir
<datalist>-ın istifadəsinin üstünlükləri
- İstifadəçi rahatlığı: əvvəlcədən təyin olunmuş seçimlərin təqdim edilməsi istifadəçilərə məlumatları daha sürətli və dəqiq daxil etməyə imkan verir
- Daxil edilmə xətalarının azalması: əvvəlcədən təyin olunmuş seçimləri təqdim etməklə daxil edilmə xətalarının miqdarını azaltmaq mümkündür
- İstifadəçi təcrübəsinin yaxşılaşdırılması: istifadəçilər təqdim olunan seçimlərdən asanlıqla seçim edə bilərlər ki, bu da formu daha interaktiv və istifadə üçün əlverişli edir
<datalist>-ın məhdudiyyətləri
- Məhdud stil dəstəyi:
<datalist>içərisindəki seçimlər adi elementlər qədər çevik şəkildə stilizasiya edilə bilmir - Tətbiq fərqləri: müxtəlif brauzerlər seçim siyahısını fərqli şəkildə göstərə bilər ki, bu da istifadəçi təcrübəsinin vahidliyinə təsir edə bilər
8.2 Tag <output>
<output> tag-i JavaScript vasitəsilə yerinə yetirilmiş hesablamaların və ya əməliyyatların nəticələrini göstərmək üçün istifadə olunur. Bu tag dinamik dəyişən kontentləri, məsələn, hesablama nəticələrini, forma məlumatlarını və ya real vaxtda dəyişə bilən digər dəyərləri göstərmək üçün mükəmməldir.
Sintaksis
<output name="result" for="input-id-1 input-id-2">Nəticə</output>
Atributlar
name:<output>elementinin adını təyin edir, hansı ki, JavaScript-də dəyəri almaq və ya dəyişmək üçün istifadə oluna bilərfor: Cari<output>dəyəri ilə əlaqəli elementlərin identifikatorlarının siyahısını ehtiva edir. Bu, bir neçə giriş elementi ilə əlaqəni saxlamaq üçün faydalıdır
İstifadə nümunəsi:
<form oninput="calculateSum()">
<label for="num1">Sayı 1:</label>
<input type="number" id="num1" name="num1">
<br>
<label for="num2">Sayı 2:</label>
<input type="number" id="num2" name="num2">
<br>
<output id="result" name="result" for="num1 num2">0</output>
</form>
function calculateSum() {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;
const sum = num1 + num2;
document.getElementById('result').value = sum;
}
İzah
- Element
<output>: hesablamaların nəticələrini göstərmək üçün istifadə olunur - Atributlar
forvəname:<output>elementini giriş elementləri ilə əlaqələndirir və JavaScript-də onu rahatlıqla tanımağa imkan verir - Funksiya
calculateSum(): giriş elementlərinin dəyərləri dəyişdikdə çağırılır və<output>dəyərini yeniləyir
<output> istifadəsinin üstünlükləri
- Nəticələr göstərmək rahatdır:
<output>hesablamaların və ya digər dinamik məlumatların nəticələrini göstərmək üçün semantik olaraq düzgün üsul təqdim edir - JavaScript ilə inteqrasiya sadəliyi:
<output>dəyərlərini JavaScript vasitəsilə asanlıqla almaq və dəyişmək olur, bu da onu dinamik veb tətbiqləri üçün ideal edir - Kodun təmizliyi:
<output>istifadəsi HTML kodunun təmiz və semantik olaraq düzgün saxlanmasına kömək edir, kodun dəstəklənməsini və oxunmasını yaxşılaşdırır
<output> məhdudiyyətləri
- Stil dəstəyi məhduddur:
<datalist>ilə olduğu kimi,<output>elementinin üslubu digər elementlərə nisbətən məhdud ola bilər - JavaScript-ə asılılıq: əksər hallarda
<output>JavaScript ilə birlikdə istifadə olunur, bu isə hər ssenari üçün uyğun olmaya bilər
8.3 <label> etiketi
<label> etiketi form elementinə aid mətn etiketi yaratmaq üçün istifadə olunur. O, form elementi ilə iki yolla əlaqələndirilə bilər: for atributu vasitəsilə və ya form elementini <label> etiketinin içərisinə daxil etməklə. Bu yollar məhdud imkanları olan istifadəçilər, məsələn, ekran oxuyuculardan istifadə edənlər üçün formun əlçatanlığını yaxşılaşdırmağa imkan verir.
for atributu etiketi forma elementi ilə əlaqələndirir, elementin identifikatorundan (id atributunun dəyəri) istifadə edir. Bu, istifadəçilərə etiketi klikləməklə əlaqəli forma elementinə fokuslanmağa və ya onu aktivləşdirməyə imkan verir.
for atributunun istifadəsinə nümunə:
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
Daxil edilmiş forma elementi
Forma elementi <label> etiketinin daxilinə əlavə edilə bilər, bu da onları bir-birinə bağlayır. Bu halda for atributuna ehtiyac yoxdur.
Daxil edilmiş forma elementinin istifadəsinə nümunə:
<label>İstifadəçi adı:
<input type="text" name="username">
</label>
<label> etiketindən istifadə üstünlükləri
- Əlçatanlığın yaxşılaşdırılması: etiketlər ekran oxuyuculardan istifadə edən istifadəçilərə formun hər bir elementi üçün hansı məlumatların tələb olunduğunu başa düşməyə kömək edir. Ekran oxuyucuları etiketləri forma elementləri ilə birlikdə oxuyur, bu isə formanı daha əlçatan edir.
- İstifadə rahatlığı: istifadəçilər uyğun forma elementini fokuslamaq və ya aktivləşdirmək üçün etiketi klikləyə bilərlər. Bu, xüsusilə checkbox və radiobutton kimi kiçik elementlər üçün faydalıdır.
- Aydınlığın artırılması: etiketlər istifadəçilərə hansı məlumatların tələb olunduğunu daha yaxşı başa düşməyə kömək edir, bu isə məlumatların daxil edilməsində səhvlərin sayını azaldır.
GO TO FULL VERSION