“
Bu makale, pratik örneklerle birlikte HTML'deki seçenek etiketini göstermektedir:
- Option etiketi nedir ve HTML'de Nasıl Kullanılır?
- Açılır Liste Oluşturma
- Otomatik Tamamlama Listesinin Oluşturulması
Option etiketi nedir ve HTML'de Nasıl Kullanılır?
Seçenek etiketi “ ile kullanılabilir.
Örnek 1: Açılır Liste Oluşturma
“
< h2 > Programlama dilleri h2 >
< etiket için = 'prog silahı' > Bir Programlama Silahı Seçin: etiket >
< seçme İD = 'prog listeleri' >
< seçenek değer = '' > Bir seçenek seçin seçenek >
< seçenek değer = 'c++' > C++ seçenek >
< seçenek değer = '.açık' > nokta ağı seçenek >
< seçenek değer = 'düğümler' > düğüm js seçenek >
seçme >
Yukarıdaki kod parçacığında:
- İlk önce '
” etiketi, verileri görüntülemek için kullanılır ve “ ile atanır. ” etiketini kullanarak “ için ' bağlanmak. - Bundan sonra “
” etiketi açılır liste için bir ortam oluşturmak için kullanılır. - Sonra, “
” etiketi açılır liste öğeleri olarak yerleştirilecek liste öğeleri oluşturmak için kullanılır.
Açılır listenin yapısını ayarladıktan sonra, şimdi bazı temel stiller uygulayalım:
etiket {Ekran bloğu;
kenar boşluğu: 5 piksel;
}
seçme {
dolgu: 5 piksel;
sınır yarıçapı: 5px;
genişlik: 200 piksel;
}
CSS özelliklerinin açıklaması aşağıda açıklanmıştır:
- İlk olarak, “ etiket ” öğesini seçin ve ardından “block” ve “5px” değerlerini CSS olarak ayarlayın “ görüntülemek ' Ve ' kenar boşluğu ' özellikler.
- Sonra, “ seçme ” elemanı seçilir ve “5px”, “5px” ve “200px” değerlerini CSS'ye sağlar “ dolgu malzemesi ”, “ sınır yarıçapı ' Ve ' Genişlik ” özellikleri sırasıyla. Bu özellikler, kullanıcı görünürlüğünü artırmak için kullanılır.
Yukarıdaki kod parçacıklarının yürütülmesinden sonra, web sayfası şöyle görünür:
Yukarıdaki çıktı, açılır listenin “ kullanılarak oluşturulduğunu gösterir.
Örnek 2: Otomatik Tamamlama Listesinin Oluşturulması
“
< giriş tip = 'metin' İD = 'prog araçları' liste = 'aletler' >
< verici İD = 'aletler' >
< seçenek değer = 'C++' >
< seçenek değer = 'Toplantı' >
< seçenek değer = '.Açık' >
< seçenek değer = 'PHP' >
< seçenek değer = 'Yakut' >
< seçenek değer = 'Süratli' >
< seçenek değer = 'Düğüm js' >
< seçenek değer = 'Tepki' >
< seçenek değer = 'Moğol' >
< seçenek değer = 'Java' >
< seçenek değer = 'Piton' >
verici >
Yukarıdaki kod parçacığında:
- İlk olarak, “
HTML öğesiyle birlikte metni görüntüleyen etiket. - Ardından, “
Kullanıcı tarafından manuel olarak doldurulan veya otomatik tamamlama listesindeki seçeneklerle otomatik olarak doldurulabilen ” etiketi. - Bundan sonra, “
” etiketleyin ve “ İD ” öznitelik değeri, “ değerine eşittir. liste ' özniteliği ' ' etiket. - Ardından, “
Otomatik tamamlama listesi için bir öğe oluşturmak üzere “
Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür:
Çıktı, otomatik tamamlama listesinin “ kullanılarak oluşturulduğunu gösterir.
Çözüm
“