HTML'de bir form oluşturma. Html'de bir açılır liste nasıl yapılır? Form listelerinin aşağı açılır eleman gruplarının oluşturulması

Merhaba blog sitesinin sevgili okuyucuları. Karmaşıklık çalışmasının bir parçası olarak, bir sonraki görev olarak, sitede uygun formları kullanarak form oluşturma ayrıntılarını analiz etmeye devam edeceğiz.

Bugün nasıl oluşturulacağını analiz edeceğiz açılır (açılır) listeler, çoktan seçmeli dahil, seçme ve seçeneği kullanma, nasıl oluşturulacağı Metin alanı textarea aracılığıyla ve ayrıca etiketleri kullanarak formların işlevselliğini genişletme olasılığı hakkında konuşun alan seti, etiket ve gösterge.

Sayfada bulunan herhangi bir formun kullanılarak oluşturulduğunu ve kullanıcıdan herhangi bir bilgiyi girip sunucuya göndermek için tasarlandığını hatırlatmama izin verin (örnek -).

Ne yazık ki, köprü metni biçimlendirme dilinin araçları bu bilgileri doğrudan işlemenize izin vermiyor, bu nedenle HTML kullanarak yalnızca formun görünümünü oluşturuyoruz ve gerekli veriler işlenmek üzere gönderiliyor. Bu amaçla, web sunucusunda, sunucu dillerinden birinde (çoğunlukla PHP) yazılmış özel bir dosya oluşturulur. Örneğin, geri bildirim için, işleyici olacak bir mail.php dosyası oluşturabilirsiniz.

Bu yayında elde edilen bilgilerin pratik kullanımında, nasıl görünmesi gerektiğini, formlar dahil tüm görünen sayfa öğelerinin kodlarının her zaman gövde etiketi içinde olduğunu unutmayın.

Bu bilgi son derece gereklidir, çünkü tüm modern yerleşik geliştirici araçlarını kullanmanız durumunda bile (bu işlevin uygulanmasındaki ilk işaretin olduğunu unutmayın), ana etiketleri kullanma mekanizmasını açıkça anlamanız ve ardından düzenlemeyi yapmanız gerekir. Zaman zaman ihtiyaç duyulan HTML kodu keyifli bir deneyime dönüşecektir.

2. çoklu- parametresi olmayan bu öznitelik, yalnızca bir öğeyi (satırı) seçebileceğiniz yukarıdaki örneğin aksine çoklu seçime izin verir. Bu listedeki birkaç satırı fare ile aynı anda seçmeye çalışın (herhangi bir yerde birer birer, Ctrl tuşunu basılı tutarak veya Shift'i arka arkaya takip ederek):

3. Boy- açılır listenin yüksekliğini, yani görüntülenen satır sayısını ayarlar. Çoklu öznitelik varsa ve boyut belirtilmemişse (yukarıdaki örnekte olduğu gibi), o zaman varsayılan olarak dört satır görüntülenir, ve örneğin, size = "5" ile beş zaten görünür olacaktır:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

4. Gerekli(parametresi yoktur) - işleyiciye veri göndermeden önce bir seçim yapılması gerektiğini tanımlar. Listeden bir öğe seçilmezse, form verileri gönderilmez:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

5. otomatik odaklama(değeri yoktur) - sayfa yüklendikten hemen sonra odağı listeye ayarlar. Ek olarak, kullanıcı eylemlerin ana bölümünü tuşlarla gerçekleştirmeye alışmışsa, böyle önceden yapılandırılmış bir odak, fareyi kullanmadan klavyedeki okları kullanarak listeden bir seçim yapmasına yardımcı olacaktır:

6. Engelli(parametre yok) - listeye erişimi engeller (devre dışı bırakır). Uygulamada, yalnızca belirli koşullar karşılandığında bir açılır liste eklemeniz gereken durumlarda genellikle komut dosyalarıyla birlikte kullanılır:

7. Biçim- listeyi ait olduğu, ancak kapsayıcının dışında olduğu bir veya daha fazla forma bağlar

... Bu durumda parametre, form özniteliğinin değerinin rolünde yazılır. genel kimlik özelliği form etiketine eklenen:

Listeden Seçenek Textarea Label Fieldset Legend'i seçin

Bir form oluşturmak için ana etiketle select etiketi özniteliğini karıştırmayın. Yukarıdaki örnekte, form etiketine id = "data" özniteliği eklendi ve seçime form = "data" özniteliği eklendi, bu da açılır listeyi belirli bir formla ilişkilendirmeyi mümkün kıldı.

Seçenek etiketi özellikleri

1. Değer- sunucuya (form işleyici) gönderilecek olan açılır listedeki değeri tanımlar. Aslında ad, select etiketinin name özniteliği tarafından belirtilen işleyiciye gönderilir ve değer değeri(bu örnek için - 1, 2, 3, 4, 5) açılır listenin seçilen satırına karşılık gelir:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

2. Engelli- seçim için bir açılır liste öğesini engeller.

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

Örnekten de görebileceğiniz gibi, "Option" satırı aktif değildir ve seçilemez.

3. Etiket- bu veya bu liste öğesinin metin içeriğini (değeri olan) görüntüler. Etiket varsa, bu özniteliğin değeriyle aynı satır görüntülenir ve seçenek etiketinin içindeki metin içeriği yok sayılır. Aynı şey, aradaki içerik tamamen yok.

Textarea Etiket Etiket Etiket Alan Kümesi Etiket Açıklama Etiketi

Bakmak. Yukarıda verilen örnekte, koddaki seçenek için ilk satır boştur (tablonun sol tarafında), ancak label = "Option tag" parametresi belirtilir, sonuç olarak bu metin listede görünür (tablonun üzerinde). sağ taraf). İkinci kod satırı, seçenek etiketinin içeriği olarak "Textarea Etiketi" metnini içerir, ancak sağdaki açılır liste, etiket = "Textarea" değeriyle eşleşen "Textarea" kelimesini görüntüler.

4. Seçildi- açılır listede mevcut öğeyi vurgular:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

Birden çok öznitelik mevcutsa, birden fazla öğe seçmek mümkündür:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

Optgroup etiketi özellikleri

Açılır listenin bir şekilde sıralanması gerekiyorsa, örneğin gruplara bölünürse, bu grupların her biri için açılır liste öğelerinin bir bölümünü içeren optgroup etiketlerini açma ve kapamadan oluşan bir kap kullanılır. Ancak, böyle bir açılır listeyi yapılandırmak için iki öznitelik vardır.

1. Etiket- parametre olarak her grubun adını ayarlar:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

Aynı, ancak çoklu ve size = "7" seçim etiketi ile:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

2. Engelli(değer yok) - ayarlandığı grubun öğelerinin seçimini engeller, ayrıca etkin olmayan öğeler genellikle gri renkle vurgulanır:

Seçenek Metin Alanı Etiket Alan Kümesi Açıklaması

Kısa bir video burada işinize yarayacaktır:

textarea aracılığıyla formdaki metin alanı

Site için ele alacağımız diğer bir form öğesi, içine çok satırlı metin girme yeteneği olan bir alandır. textarea etiketi kullanılarak oluşturulabilir. Varsayılan öznitelikler olmadan, bu etiketi uygulamak aşağıdaki sonucu verecektir:

Metni girin:

Metni girin:

Alanda satır sonları gerçekleştirebilirsiniz, metin sunucudaki işleyiciye iletilirken yapılan satır sonları dikkate alınarak yapılır. Alan, iki çapraz çizgi ile işaretlenmiş fare ile sağ alt köşeden tutularak genişlik ve uzunluk olarak uzatılabilir.

Şimdi orijinal koda parametrelerle birlikte birkaç özellik eklemeye çalışalım:

1. İsim- metin alanının adını, form verilerini sunucuda işlerken gönderdikten sonra tanımlayacak bir değer olarak tanımlar.

2. Kollar- Bir parametre rolünde yatay olarak yerleştirilmiş bitişik aynı sembollerin sayısı ile belirlenen alanın genişliği. Varsayılan 20'dir.

3. satırlar- satır sayısına göre belirlenen metin kutusunun yüksekliği. Kullanıcı tarafından girilen metnin satır sayısı bu öznitelik tarafından belirtilen değerden fazlaysa, sağda dikey bir kaydırma çubuğu belirir.

4. Maksimum uzunluk- metin kutusuna yerleştirilebilecek maksimum karakter sayısını belirtir. Limit aşılırsa, daha fazla giriş imkansız olacaktır.

Aşağıda, yukarıdaki özelliklerin tümüne sahip bir örnek verilmiştir; bunların her birinin etkisini, metin alanına gerekli sayıda harf ve satır yerleştirerek kendiniz kontrol edebilirsiniz (aynı karakteri birkaç kez girebilirsiniz):

Metni girin:

Metni girin:

5. minimum uzunluk- metin alanına girilmesi gereken minimum karakter sayısını belirtir. Kullanıcı daha az karakter içeren bir metin göndermeye çalışırsa, tarayıcı, formun içeriğini tamamlama ihtiyacından ve kaç karakter girilmiş olduğundan bahseden bilgileri içeren kısa bir mesaj görüntüler.

7. Sadece oku(parametreler olmadan) - bu özelliği textarea'ya eklerseniz, metin alanına kullanıcıların değiştirmesi için erişilemez ve salt okunur olur. Ancak buna odaklanabilirsiniz (imleci alana getirin ve sol tıklayın), ayrıca metni seçip kopyalayın (kısmen veya tamamen):

Alanları doldururken ek işlevsellik uygulayan birkaç özellik daha:

8. Otomatik Tamamla- kullanıcı formu daha önce girilen verilere göre doldurduğunda tarayıcının ipuçları sağlayıp sağlamayacağını belirtir ve uygun metni otomatik olarak eklemeyi mümkün kılar.

Her şeye sahip iki parametre: üzerinde(dahil) ve kapalı(kapalı). İşte bazı örnek kod:

Metni girin:

"On" değerine sahip bu öznitelik, yalnızca kullanıcının web tarayıcısında form alanları otomatik tamamlama etkinleştirildiğinde çalışır.

9. Dürüm- üç değer kullanarak tarayıcının metin alanındaki satır kaydırma kurallarını belirler:

Yumuşak- genişlik olarak alana sığmayan bir dizi karakter otomatik olarak yeni bir satıra kaydırılır. Bu durumda, işleyici metin tek satır olarak aktarılacak... Kullanıcının "Enter" tuşunu kullanarak istenilen herhangi bir yere metin aktarımı yapması durumunda, web formu gönderilirken bu aktarım kaydedilir.

Metni girin:

Metni girin:

Zor- Metin genişlik olarak alana sığmıyorsa otomatik olarak tireleme yapılır, ayrıca işlemciye gönderilirken bu tür tirelemelerin yerleri kaydedilir. Bu parametre yalnızca cols özelliği ile birlikte:

Metni girin:

Metni girin:

Kapalı- satır sonlarını devre dışı bırakın. "Enter" tuşunu kullanarak mekanik aktarım olmadan bir metin parçası yazdırırsanız, tüm metin bir satıra yerleştirilecek ve yatay bir kaydırma çubuğu görünecektir:

Metni girin:

Metni girin:

10. otomatik odaklama(parametresi yoktur) - formun bulunduğu sayfa yüklendiğinde metin alanına odaklanmayı başlatır.

11. Engelli- salt okunur özniteliğin aksine (alan içeriğinin düzenlenmesini de yasaklar, ancak buna odaklanmayı mümkün kılar), genellikle griye boyanmış metin alanına erişimi tamamen engeller:

Blogumun tüm okuyucularına selamlar. Bugün size html'de nasıl açılır liste yapacağınızı, hangi etiketleri ve özellikleri kullanmanız gerektiğini ve ayrıca hangi amaçlar için ihtiyacınız olabileceğini anlatacağım.

Select etiketi ve bir açılır liste oluşturma

Bu nedenle, html'deki açılır liste, eşleştirilmiş seçenek etiketlerinin yerleştirildiği eşleştirilmiş seçme etiketi kullanılarak oluşturulur. Listeye tıkladığınızda sunulacak tüm seçeneklerin kaydedildiği içlerinde. Örnek:

Bir hayvan seçin

Bu durumda, seçeneğin açılış ve kapanış bölümleri arasında ne gösteriliyor, ekranda göreceksiniz ve value niteliğinin içerdiği değer sunucuya gönderilecek veya bir komut dosyası kullanılarak işlenecektir.

Html'deki liste normal veya çoktan seçmeli olabilir. Birden çok öğe seçmeyi mümkün kılmak için, seçmek üzere boş bir çoklu öznitelik eklemeniz gerekir. Birden çok değer seçmek için basılı tutun Ctrl ve farenin sol tuşuna basın.

Bir başka kullanışlı özellik de boyuttur. Açılır listede kaç satırın gösterileceğini seçmenizi sağlar.

Başka bir özellik devre dışı bırakıldı. Öğeleri tıklamak ve görüntülemek için listeyi erişilemez hale getirir, ancak aynı zamanda sayfada görünür.

Gerekli - html5 özelliği. Belirtilirse, açılır listeden bir değer seçilmeden form gönderilmeyecektir. Genel olarak, seçim için bir zorunluluk haline gelir. Özellik tüm tarayıcılarda çalışmazken.

Seçenek etiketi özellikleri

Aslında, select yalnızca liste öğeleri için bir kap görevi görür, kendileri seçenek etiketi kullanılarak ayarlanır. Daha önce öğrendiğimiz gibi bir değer parametresine sahiptir, ancak bunun yanında başkaları da vardır. Örneğin:
Devre Dışı - liste öğesini seçim için kullanılamaz hale getirir. Görüntülenecek, ancak üzerine tıklayamazsınız.

Seçildi - öğe varsayılan olarak seçilecektir. Normal bir listede, değeri olmayan bu nitelik yalnızca bir öğeye, çoğul listede - birkaç öğeye ayarlanabilir.

Doğru çalıştırma için önemli açıklama

Seçimin sonucunun sunucuya gönderilmesi veya komut dosyaları aracılığıyla işlenmesi gerekiyorsa, seçimi hata olmayacak şekilde forma yerleştirin. Gerçek şu ki, açılır liste orijinal olarak tam olarak form öğelerinden biri olarak oluşturuldu.

Ne için seçilir?

Genellikle sitenize kaydolursanız veya bir anket yapmak istiyorsanız bu sizin için yararlı olabilir. Elemanın bir dezavantajı var - görünüşünü css ile çok iyi değiştirmiyor.

Varsayılan olarak, listeye tıkladığınızda, mavi bir çerçeve görünür, imlecin üzerine geldiği listedeki öğeleri vurgulamak için aynı renk kullanılır. Çerçevenin basıldığında görünmesini engellemek veya farklı bir renkte vurgulanmasını önlemek için şöyle bir seçici yazabilirsiniz:

Seçin: odak (
anahat: 1 piksel düz turuncu;
}

Çerçeve şimdi turuncu olacaktır.

Seçenek de stillendirilebilir, ancak bir öğenin üzerine geldiğinizde arka planı maviye döner ve nedense stiller arasında değişmez.

Seçenek (
Renk: Kahverengi;
arka plan: su;
}

Bu arada, herhangi biriniz css ile bir öğenin üzerine geldiğinizde arka plan rengini nasıl değiştireceğinizi biliyor musunuz?

Aslında, hepsi select etiketi ve kullanımı içindir. Bunun için html'de ek özellik yoktur. Onunla diğer tüm işlemler javascript ve php kullanılarak yapılabilir. Örneğin doğum yılı seçimi için bir liste oluşturmanız gerekiyorsa ve 80-100 farklı seçenek olabilir, bunları elle yazmaz mısınız?

Bu tam olarak programlamayı kullanmanız gereken şeydir, yani bir döngü. Pekala, tamam, bu zaten başka bir sohbetin konusu, ancak bugün için size anlatmak istediğim tüm bilgiler bu. Html'deki diğer temel etiketlere aşina olabilirsiniz.

HTML etiketi seçeneği, kullanıcının önceden tanımlanmış bir değerler kümesinden bir seçenek seçmesine olanak tanıyan bir açılır liste oluşturmak için kullanılır.

Kullanıcının görebildiği metin, değer özelliğinde belirtilen metinden farklı olabilir. Bir açılır listeyi şu şekilde oluşturabilirsiniz:

  • Açılır liste etiketi kullanılarak oluşturulur bir etiket kullanarak seçim seçeneklerini tanımlar
  • etikette

Açılır listenin stilini tanımlamak için bir kimlik kullanmak yerine bir CSS sınıfı belirtmek de mümkündür.

Bir sonraki bölümde, JavaScript / JQuery'de HTML açılır listesini kullanma örneklerini göstereceğim. Örnekler ayrıca size nasıl stil verileceğini de gösterecektir.

Değer niteliğini kullanma

Daha önce belirtildiği gibi, value niteliğinin değeri, sayfada görüntülenen metinden farklı olabilir. Örneğin, kullanıcılar için ülkelerin veya renklerin adlarını görüntüleyebilir ve value özelliğinde kısa kodlar kullanabilirsiniz.

Aşağıdaki örnekte, value niteliğine sahip bir açılır liste oluşturacağız:

Çevrimiçi demoyu ve kodu görüntüleyin

etiket için

JavaScript'te Seçilmiş Bir Seçeneğe Erişme Örneği

Şimdi seçilen seçeneğin değerine erişme ve bazı eylemleri gerçekleştirme örneği oluşturalım. Renk seçici seçenekleri ile yukarıdaki örnekte olduğu gibi aynı listeyi oluşturuyoruz. Seçildikten sonra, bu rengi belgeye uygulamak için düğmeye tıklayın:

Çevrimiçi demoyu ve kodu görüntüleyin

HTML seçeneği değeri aşağıdaki kodu kullanır:

Bir varyantın değer özelliğinin değerine erişmek için JavaScript'te aşağıdaki kod satırı kullanılır anlam metinden farklıdır. Bir renk seçtikten sonra jQuery, uyarıda görünen metni görüntüler. Etiket kodu

Bu değere bu şekilde erişilir. HTML seçim seçeneği seçili JavaScript:

var selectedcolor = $ ("# jqueryselect seçeneği: seçili").text();

JQuery $ .val () yöntemini kullanarak da değere erişmek mümkündür:

var selectedcolor = $ ("# jqueryselect").val();

Yukarıdaki örnekte bu satırı değiştirin ve kod, görünür metin yerine value özelliğinde kısa kod / renk değerini gösterecektir.

PHP betiğinde değer alma örneği

Açılır listeden seçilen seçeneğin değerini almanın bu örneğinde, etiket kullanılarak form oluşturulur.

HTML seçme seçeneğinin değerini elde etmek için PHP betiği şu şekilde kullanılır:

". $ _POST [" selphp "].""; } ?>

Form bir GET yöntemi belirtiyorsa, kullanın PHP dizisi $ _GET [“”].

CSS ile açılır stilleri tanımlama

Şimdi açılır listenin stillerinin nasıl tanımlanacağına bakalım

Bu örnekte, etiketledik

Tarayıcıda şöyle görünür:

Menü öğelerini gruplandırma

Bir sonraki etikete bir göz atalım ilgili verileri bir açılır menüde gruplamak için kullanılır isim = "siyah beyaz"> etiket = "Beyaz liste">

Bu örnekte, etiketine sahip 2 grup seçtik. ... Öğenin etiket özelliği, seçilen grubun adını kalın harflerle ayarlar:

Aşağıdaki örnekte, boolean disable niteliğini kullanarak bir grubu (" B Grubu"):

</span> HTML etiketinin devre dışı bırakılmış niteliğini kullanma örneği <optgroup><span>

Örneğimizin sonucu:

Liste sesini kapatma ve çoklu seçim

</span> Devre dışı bırakılmış ve çoklu etiket özellikleri <select><span>

Bu örnekte iki açılır liste oluşturduk. İlk liste için, liste ile etkileşime girmemizi engelleyen (devre dışı bırakan) disable niteliğini kullandık.

İkinci liste için, listede birden fazla seçeneğin aynı anda seçilmesine izin verildiğini gösteren çoklu özniteliği kullandık. Ctrl Windows'ta ve aracılığıyla Emretmek Mac'te).

Tarayıcıda şöyle görünür:

Metin alanı

Örneğimizin sonucu:

Metin alanını devre dışı bırakma

Daha önce tartışılan öğelere benzer şekilde, etiket


type = "gönder" ad = "gönderBilgi" değer = "(! LANG: gönder" > !}

Bu örnekte iki metin alanı oluşturduk (eleman