HTML açılan etiket. HTML-də açılan siyahıdan seçim

25.08.2023

Təsvir

HTML etiketi iki və ya daha çox teq ola bilər

Açılan menyunun eni etiketdə göstərilən ən uzun mətnlə müəyyən ediləcək

Atributlar

avtofokus: Veb səhifə yükləndikdə elementin avtomatik olaraq fokus almalı olduğunu müəyyən edir. Avtofokus boolean atributunun mümkün dəyərləri: Nümunə » forma: Elementin əlaqəli olduğu formanı müəyyən edir. Atribut dəyəri element identifikatorudur

. Bu atribut elementi yerləşdirməyə imkan verir Nümunə »

Qeyd: səbəbiylə müxtəlif yollarla birdən çox element seçərkən və əlavə olaraq istifadəçilərə birdən çox variantın mövcud olduğunu bildirdikdə, açılan siyahı əvəzinə onay qutularından istifadə etmək tövsiyə olunur.

Ad: Açılan siyahının adını müəyyən edir. O, təqdim edildikdən sonra forma məlumatlarına daxil olmaq və ya JavaScript-də elementə istinad etmək üçün istifadə edilə bilər.

ölçüsü: Açılan siyahıda görünən seçimlərin sayını təyin edir. Əgər size atributunun dəyəri 1-dən böyükdürsə, lakin siyahıdakı seçimlərin ümumi sayından azdırsa, brauzer avtomatik olaraq baxmaq üçün daha çox seçim olduğunu göstərmək üçün sürüşdürmə çubuğu əlavə edəcək.

Son yeniləmə: 04/08/2016

Seçim elementi siyahı yaradır. Parametrlərdən asılı olaraq, bu, bir element seçmək üçün açılan siyahı və ya bir anda bir neçə elementi seçə biləcəyiniz genişləndirilmiş siyahı ola bilər.

Gəlin açılan siyahı yaradaq:

HTML5-də element seçin

Göndər

alma

Seçilmiş atributla biz defolt seçilmiş elementi təyin edə bilərik - onun siyahıda birinci element olması lazım deyil:

Model seçin

Gəlin açılan siyahı yaradaq:

Çoxsaylı seçim siyahısı yaratmaq üçün seçilmiş elementə çoxlu atribut əlavə etməlisiniz:

Ctrl düyməsini basıb saxlayaraq belə siyahıda bir neçə element seçə bilərik: :

Gəlin açılan siyahı yaradaq:

Lumia 650

Element qruplarından istifadə həm açılan, həm də çoxlu seçimli siyahılara aiddir. Çox vaxt saytlarda qeydiyyatdan keçərkən və ya sorğu keçirərkən sizdən nəsə etmək tələb olunur açılan siyahıdan seçim . Məsələn, bir çox başqa ölkələrdən ölkənizi seçin. Bütün bunlar formanın müxtəlif elementləridir, onlar müxtəlif yollarla tərtib edilə bilər: sadədən HTML5 kompleksə.

CSS3 Bu gün biz seçilmiş sahənin dizaynının belə bir nümunəsinə baxacağıq HTML/CSS və ikonaŞrift Əla

. Ancaq biz həmişəki kimi sənəd işarələməsi ilə başlayacağıq.

HTML kodu Bir etiketin içərisində seçin açılan siyahı elementləri var seçim Bir etiketin içərisində. Öz növbəsində, etiketlər Və forma ümumi bir konteynerə yerləşdirilir div Və. Tag

Konteynerin siniflə yerləşdirilməsi qutu pəncərənin mərkəzində.

Qutu(
mövqe: mütləq;
yuxarı: 50%;
sol: 50%;
çevirmək: tərcümə (-50%, -50%);
}

Əvvəlcədən bağlanma etiketindən əvvəl ikon şriftini bağlayırıq baş.

Selektorun üslubu

Seçim sahəsi üçün ölçüləri təyin edirik - 250x50 piksel və elementlər üçün sahələri hər tərəfdən 10 piksel edirik.

Qutu seçimi(
eni: 250px;
hündürlük: 50px;
doldurma: 10px;
}

Çərçivə və vuruşun çıxarılması:

Sərhəd: heç biri;
kontur: heç biri;

Siyahılar üçün bənövşəyi fon rəngi, başlıq, rəng və şrift ölçüsünü təyin edirik.

Fon: #ab05af;
font-family: "Russo One", sans-serif;
rəng: #fff;
şrift ölçüsü: 20px;

Sahənin ətrafında bir kölgə yaradın.

Qutu-kölgə: 0 5px 20px rgba(0,0,0,.3);

Ümumiyyətlə qutunu seçin hazır və işləyir, amma darıxdırıcı görünür və siçan ilə vurmaq lazım olan üçbucaq çox kiçikdir. Və əgər mən belə düşünürdümsə, o zaman dizayner də eyni fikirdə olacaq, müxtəlif variantlar üçün əvvəlcədən hazırlaşmalıyıq.

Çox güman ki, dizayner kiçik üçbucağı şriftdən bir işarə ilə əvəz edəcək və ikona.

Bu şəkildə daha gözəl görünür, lakin kodun hələ də tərtibatçı tərəfindən yazılması lazımdır. Burada həll yolu nə ola bilər? Biz toxunmayacağıq HTML kodu, və psevdo elementdən istifadə edin əvvəl.

.box üçün psevdo-elementdən əvvəl

Ediləcək ilk şey ikon kodunu və şriftin adını yazmaqdır "Font Awesome 5 Pulsuz". Veb saytında seçin fontawesome.com"seçimi" göstərən istədiyiniz işarəni seçin və kodunu kopyalayın.

.box::əvvəl (
məzmun: "\f150";
font-family: "Font Awesome 5 Pulsuz";
mövqe: mütləq;
yuxarı: 0;
sağ: 0;
eni: 50px;
hündürlük: 50px;
mətni düzün: mərkəz;
xəttin hündürlüyü: 50px;
rəng: #fff;
şrift ölçüsü: 28px;
fon: #da00e0;
göstərici hadisələri: heç biri;
}

Sonra, onu tamamilə yerləşdiririk, ölçüləri 50x50, işarənin rəngi ağ, fon açıq bənövşəyi rəngdədir. Biz çox vacib bir əmlak təyin etdik göstərici hadisələri: heç biri. Bu o deməkdir ki, psevdo element əvvəl siçan hadisəsinin obyekti deyil, dəyəridir heç biri"siçan seçimi" hadisəsinə alt təbəqəyə keçməyi və onun altındakı elementə - həmin kiçik üçbucağa daxil olmağı bildirir. Üçbucaq yoxa çıxmayıb, sadəcə psevdo-elementin altındadır əvvəl, yalnız bəzək kimi xidmət edir. Gözəl ikona klikləməklə, "çirkin" üçbucaq əslində işləyir və biz seçimimizi edirik.

Salam, blog saytının əziz oxucuları. İncəlikləri araşdırmamızın bir hissəsi olaraq, növbəti tapşırıq olaraq, uyğun olanlardan istifadə edərək saytda formaların yaradılması detallarını təhlil etməyə davam edəcəyik.

Bu gün necə yaradılacağına baxacağıq açılan (açılan) siyahılar, çoxlu seçim də daxil olmaqla seçiminə kömək edin və seçim, necə qurulacaq mətn sahəsi textarea vasitəsilə, həmçinin etiketlərdən istifadə edərək formaların funksionallığını genişləndirmək imkanlarından danışın. sahə dəsti, etiket və əfsanə.

Nəzərinizə çatdırım ki, səhifədə mövcud olan istənilən forma istifadə olunmaqla yaradılır və istifadəçidən istənilən məlumatı daxil edib serverə göndərmək üçün nəzərdə tutulub (məsələn - ).

Təəssüf ki, hipermətn işarələmə dili alətləri bu məlumatı birbaşa emal etməyə imkan vermir HTML istifadə edərək yalnız yaradırıq görünüş formalar hazırlanır və lazımi məlumatlar emal üçün göndərilir. Bu məqsədlə veb serverdə məqsədyönlü şəkildə server dillərindən birində (ən çox PHP) yazılmış xüsusi fayl yaradılır. üçün deyək rəy işləyici olacaq mail.php faylı yarada bilərsiniz.

Bu nəşrdə əldə edilən məlumatdan praktikada istifadə edərkən, onun necə görünməsi lazım olduğunu, bütün görünən səhifə elementlərinin, o cümlədən formaların kodlarının həmişə bədən etiketində yerləşdiyini unutmayın.

Bu məlumat son dərəcə zəruridir, çünki onlara daxil edilmiş bütün müasir tərtibatçı vasitələrindən istifadə etsəniz də (xatırladım ki, bu funksiyanın həyata keçirilməsində ilk əlamət idi), əsas etiketlərdən istifadə mexanizmini aydın şəkildə başa düşməlisiniz, sonra Zaman zaman ehtiyac yaranan HTML kodunu redaktə etmək xoş bir fəaliyyətə çevriləcəkdir.

2. Çoxsaylı— heç bir parametri olmayan bu atribut yuxarıdakı nümunədən fərqli olaraq çoxlu seçimə imkan verir, burada yalnız bir element (sətir) seçə bilərsiniz. Vurğulamağa çalışın bu siyahı siçan ilə eyni anda bir neçə sətir (istənilən yerdə bir-bir, Ctrl düyməsini basıb saxlayın və ya bir-birinin ardınca Shift düyməsini istifadə edərək):

3. Ölçü— açılan siyahının hündürlüyünü, yəni göstərilən sətirlərin sayını təyin edir. Çoxsaylı atribut mövcuddursa və ölçü dəyəri göstərilməyibsə (yuxarıdakı nümunədə olduğu kimi), o zaman standart olaraq dörd sətir göstərilir, və məsələn, size="5" ilə beş görünəcək:

Seçim Textarea Label Fieldset Legend

4. Tələb olunur(parametrləri yoxdur)—işləyiciyə məlumat göndərməzdən əvvəl seçimin edilməli olduğunu müəyyən edir. Siyahıdan element seçilməyibsə, forma məlumatları göndərilməyəcək:

Seçim Textarea Label Fieldset Legend

5. Avtofokus(fərq etməz) - səhifə yükləndikdən dərhal sonra diqqəti siyahıya qoyur. Bundan əlavə, əgər istifadəçi əksər hərəkətləri düymələrdən istifadə edərək yerinə yetirməyə öyrəşibsə, onda əvvəlcədən konfiqurasiya edilmiş belə bir diqqət siçan istifadə etmədən klaviaturadakı oxlardan istifadə edərək siyahıdan seçim etməyə kömək edəcəkdir:

6. Əlil(parametrlər yoxdur) - siyahıya girişi bloklayır (onu söndürür). Təcrübədə, adətən yalnız müəyyən şərtlər yerinə yetirildikdə açılan siyahı aktivləşdirməli olduğunuz hallarda skriptlərlə birlikdə istifadə olunur:

7. forma— siyahının aid olduğu, lakin konteynerdən kənarda yerləşdiyi bir və ya bir neçə forma ilə əlaqə saxlayır

. Bu zaman parametr forma atributunun qiyməti kimi yazılır qlobal atribut id forma etiketinə əlavə olunan:

Siyahıdan Seçim Textarea Label Fieldset Legend seçin

Select tag atributunu əsas forma teqi ilə qarışdırmayın. Yuxarıdakı misalda id="data" atributu forma teqinə, form="data" isə seçmə teqinə əlavə edildi ki, bu da açılan siyahını konkret forma ilə əlaqələndirməyə imkan verdi.

Seçim Tag Atributları

1. Dəyər— açılan siyahıdan serverə (forma prosessoru) göndəriləcək dəyəri müəyyən edir. Faktiki olaraq, işləyiciyə seçim teqinin ad atributu ilə müəyyən edilən ad göndərilir və dəyər dəyəri(üçün bu misal— 1, 2, 3, 4, 5), açılan siyahının seçilmiş sətrinə uyğundur:

Seçim Textarea Label Fieldset Legend

2. Əlil— açılan siyahı elementinin seçimini bloklayır.

Seçim Textarea Label Fieldset Legend

Nümunədən göründüyü kimi, “Seçim” xətti qeyri-aktivdir və onu seçmək mümkün deyil.

3. Etiket— müəyyən siyahı elementinin mətn məzmununu (bu onun dəyərini) göstərir. Əgər etiket mövcuddursa, bu atributun dəyəri ilə eyni sətir göstərilir və seçim teqinin içindəki mətn məzmunu nəzərə alınmır. Eyni şey arasında məzmun varsa olur tamamilə yox.

Tag Textarea Tag Label Tag Fieldset Tag Legend

Bax. Yuxarıdakı misalda, koddakı seçim üçün birinci sətir boşdur (cədvəlin sol tərəfində), lakin etiketi = "Seçim Tag" parametri yazılır, nəticədə siyahıda bu dəqiq mətn görünür (on sağ tərəf). İkinci kod sətirində seçim teqinin məzmunu kimi "Textarea Tag" mətni var, lakin sağdakı açılan menyu label="Textarea" dəyərinə uyğun "Textarea" sözünü göstərir.

4. Seçildi— cari açılan siyahı elementini seçir:

Seçim Textarea Label Fieldset Legend

Çoxsaylı atribut varsa, birdən çox element seçmək mümkündür:

Seçim Textarea Label Fieldset Legend

Optik qrup teqinin atributları

Açılan siyahını bir şəkildə çeşidləmək lazımdırsa, məsələn, qruplara bölün, onda bu qrupların hər biri üçün açılan siyahı elementlərinin bir hissəsini ehtiva edən açılış və bağlanma optgroup etiketlərindən ibarət konteyner istifadə olunur. Bununla belə, belə bir açılan siyahı yaratmaq üçün iki atribut var.

1. Etiket— hər bir qrupun adını parametr kimi təyin edir:

Seçim Textarea Label Fieldset Legend

Eyni şey, lakin seçim teqinin çoxsaylı və size="7" ilə:

Seçim Textarea Label Fieldset Legend

2. Əlil(dəyərlər yoxdur) - quraşdırıldığı qrupun elementlərinin seçimini bloklayır və qeyri-aktiv elementlər adətən boz rənglə vurğulanır:

Seçim Textarea Label Fieldset Legend

Qısa bir video burada faydalı olacaq:

Mətn sahəsi istifadə edərək formada mətn sahəsi

Sayt üçün nəzərdən keçirəcəyimiz başqa bir forma elementi çox sətirli mətni daxil etmək imkanı olan sahədir. O, textarea etiketindən istifadə etməklə yaradıla bilər. Defolt atributlar olmadan, bu etiketin tətbiqi aşağıdakı nəticəni verəcəkdir:

Mətni daxil edin:

Sahədə sətir fasilələri həyata keçirə bilərsiniz və edilən dəyişikliklər nəzərə alınmaqla mətn serverdəki prosessora ötürüləcəkdir. Sahə iki diaqonal zolaqla işarələnmiş sağ alt küncə klikləməklə genişlik və uzunluqda uzana bilər.

İndi orijinal koda parametrləri olan bir neçə atribut əlavə etməyə çalışaq:

1. ad- mətn sahəsinin adını serverdə işləndikdə forma məlumatları təqdim etdikdən sonra onu müəyyən etmək üçün dəyər kimi müəyyən edir.

2. Cols— üfüqi şəkildə yerləşdirilmiş bitişik eyni simvolların sayı ilə parametr kimi təyin olunan sahə eni. Defolt dəyər 20-dir.

3. Sıralar— sətirlərin sayı ilə müəyyən edilən mətn sahəsinin hündürlüyü. Əgər istifadəçinin daxil etdiyi mətn sətirlərinin sayı bu atribut tərəfindən göstərilən dəyərdən çox olarsa, sağda şaquli sürüşdürmə çubuğu görünəcək.

4. Maksimum uzunluq— mətn sahəsində yerləşdirilə biləcək simvolların maksimum sayını təyin edir. Limit keçərsə, əlavə giriş mümkün olmayacaq.

Aşağıda yuxarıda göstərilən bütün atributlara malik bir nümunə verilmişdir, hər birinin təsirini mətn sahəsinə lazımi sayda hərf və sətir yerləşdirməklə özünüz yoxlaya bilərsiniz (sadəcə eyni simvolu bir neçə dəfə daxil edə bilərsiniz):

Mətni daxil edin:

5. Minimum uzunluq— mətn sahəsinə daxil edilməli olan simvolların minimum sayını təyin edir. İstifadəçi daha az simvollu mətn göndərməyə çalışarsa, brauzer forma məzmununu əlavə etmək zərurəti və artıq neçə simvol daxil edildiyi barədə məlumatı ehtiva edən qısa bir mesaj göstərəcəkdir.

7. Yalnız oxumaq(parametrlər olmadan) - bu atributu mətn sahəsinə əlavə etsəniz, mətn sahəsi istifadəçilər tərəfindən redaktə edilə bilməyəcək və yalnız oxunacaq. Lakin siz ona diqqət yetirə bilərsiniz (kursoru sahəyə aparıb siçanın sol düyməsi ilə), həmçinin mətni seçib kopyalaya (qismən və ya tamamilə) bilərsiniz:

Sahələri doldurarkən əlavə funksiyaları həyata keçirən daha bir neçə atribut:

8. Avtomatik tamamlama— istifadəçi əvvəllər daxil edilmiş məlumatlar əsasında formanı doldurduqda brauzerin göstərişlər verməli olub-olmadığını müəyyən edir və müvafiq mətni avtomatik daxil etmək imkanı verir.

Yalnız var iki parametr: haqqında(aktiv) və off(söndürülür). Budur bir kod nümunəsi:

“On” dəyəri olan bu atribut yalnız müəyyən istifadəçinin veb brauzerində forma sahələrinin avtomatik doldurulması aktiv olduqda işləyir.

9. Sarın- üç dəyərdən istifadə edərək mətn sahəsində sətir kəsilməsi üçün brauzer qaydalarını təyin edir:

Yumşaq— enində sahəyə uyğun gəlməyən simvollar toplusu avtomatik olaraq köçürülür yeni xətt. Bu vəziyyətdə prosessor mətn bir sətir olaraq göndəriləcək. Əgər istifadəçi “Enter” düyməsini istifadə edərək mətni istənilən yerə köçürürsə, o zaman bu köçürmə veb formanı təqdim edərkən yadda saxlanılır.

Mətni daxil edin:

Çətin— mətn eninə görə sahəyə uyğun gəlmirsə, avtomatik defis qoyulur və prosessora göndərildikdə belə defislərin yerləri saxlanacaq. Bu seçim yalnız istifadə olunur cols atributu ilə birlikdə:

Mətni daxil edin:

Söndür— sətir fasilələrini söndürün. "Enter" düyməsini istifadə edərək mexaniki köçürmədən mətn fraqmentini çap etsəniz, bütün mətn bir sətirdə yerləşdiriləcək və üfüqi sürüşmə çubuğu görünəcək:

Mətni daxil edin:

10. Avtofokus(parametrləri yoxdur) - səhifəni forma ilə yükləyərkən diqqəti mətn sahəsinə yönəltməyə başlayır.

11. Əlil- yalnız oxunan atributdan fərqli olaraq (həmçinin sahənin məzmununu redaktə etməyi qadağan edir, lakin diqqəti ona yönəltməyə imkan verir), adətən boz rəngdə olan mətn sahəsinə girişi tamamilə bloklayır:

İstifadəçinin bir və ya daha çoxunu seçə biləcəyi təklif olunan elementlərin siyahısını yaratmaq üçün nəzərdə tutulmuşdur. .

Etiketlərlə məhdudlaşır ... avtofokus Səhifə yükləndikdə avtomatik fokus alır. Dəyər üç yolla təyin edilə bilər: disabled Siyahıdan seçimi deaktiv edir. Dəyər üç yolla təyin edilə bilər:

çoxlu Eyni zamanda birdən çox siyahı elementi seçməyə imkan verir. Nəzərə alın ki, çoxsaylı seçimlə bir formadan məlumat axınında eyni adlı bir neçə dəyişən ola bilər.

Sizin emal proqramınız belə halları qabaqcadan görməli və onları düzgün idarə etməlidir. ad Siyahının adı. Tələb olunan atribut.

Etiketlərlə məhdudlaşır

tələb olunur Boş olmayan dəyəri olan element seçilməlidir. Bu edilmədikdə, brauzer mesaj göstərəcək və forma serverə göndərilməyəcək. Mesajın görünüşü və məzmunu brauzerdən asılıdır və istifadəçi tərəfindən dəyişdirilə bilməz (IE və Safari-də işləmir).