Html'deki formlarla robotun oluşturulması. HTML'deki listeden seçin HTML'deki açılır liste yalnızca bir tane görüntülenir

Bazı uçlarda türe önemsiz nitelikler ekleyebilirsiniz. veri sınıfı ya da başka veri bağlantısı. Korkulacak bir şey yok, kişi listesinin doğru çalışması için gerekli, böylece ek bilgiler kaydedilebilir.

Biraz stillerden geçelim.

Ana stiller dosyadadır cs-select.css. Burada listeye bachiti dediğimiz eşsiz görünümü veren stiller var.

Benzersiz ve özgün bir stil yaratmak için ek gücün üstesinden gelmek gerekir. Örneğin, ilk popo () için aşağıdaki stiller kullanılır:

Ve bu stiller ayrı bir dosyada bulunur (netlik sağlamak için) cs-skin-border.css.

Visnovok

Web siteniz için benzersiz bir tasarım oluşturmak için ne yapabilirsiniz? Ve her şeyden önce, tasarımı denemekten korkmayın, yavaş yavaş renklendirin. Daha sonra (deneme yoluyla) müşterilerinize uygun olanı yaratacaksınız ve onlar "Vay be, bu tasarımı beğendim, bu sitede başka neler var!" demeyecekler. 😉 .

HTML'de görünen en basit listeyi select etiketini kullanarak oluşturmak kolaydır. Bu, seçenek etiketlerinin eklendiği bir kapsayıcı etiketidir; listedeki öğeleri kendiniz ayarlayabilirsiniz.

Ek bir seçim etiketi kullanılarak oluşturulabilecek çok sayıda liste seçeneği vardır: açılan bir liste (ana alana tıkladıktan veya yeni bir imlecin üzerine gelindiğinde seçenekler görünür) ve çoklu seçim listesi - yeni bir kutuda şunları yapabilirsiniz: lka noktalarını seçin. Bunlardan ilki en kapsamlı olanıdır ve mevcut sitelerde gezinmenin önemli bir unsurudur. Görünen çoklu seçeneklerin listesi, örneğin ürünün bir dizi özelliğini seçmeniz gereken kataloglarda bulunabilir.

Evrensel ve özel nitelikleri kullanarak listelerin mevcut görünümünü ve gücünü değiştirebilirsiniz.

Etiket niteliklerini seçin

1. Çoklu – çoktan seçmeli seçeneği ayarlar.

2. Boyut – listedeki görünür satır sayısını veya yüksekliği ayarlar. Çoklu öznitelik olmadığı için her şey burada saklanır. Durum buysa ve boyutu belirtmezseniz, birden fazla seçeneğiniz varsa, aralarından seçim yapabileceğiniz tüm olası seçeneklere sahip olacaksınız, birden fazla günlük seçeneğiniz varsa, o zaman yalnızca bir okuma satırı olacak ve siz Sağ taraftaki asansör ikonuna tıklayarak cevabı okuyabilirsiniz. Yükseklik boyutu ayarlanmışsa ve seçenek sayısı daha azsa sağda bir kaydırma kutusu görünecektir.

3. İsim – isim. Görünen liste bu olmadan da yapılabilir, ancak sunucudaki toplama programıyla etkileşim için gerekli olabilir. Kural olarak hala sipariş veriyorum.

Select etiketi herhangi bir bağlama niteliği içermez ancak seçenek etiketine tabidir.

İç içe seçenek etiketi nitelikleri

1. Seçili - liste öğesine bir görünüm atar. Çoklu öznitelik belirtilirse birden fazla öğeyi görmek mümkündür.
2. Değer – anlam. Bu özellik zorunludur. Web sunucusu, kullanıcıyı seçerek listedeki öğeleri yanlış anlamaktan suçludur.
3. Etiket. Bu ek özellik için listelerin diğer öğelerini hızlı bir şekilde bulabilirsiniz. Örneğin ekranda “Milano Lombardiya’nın idari merkezidir” başlığında belirtilen seçenek yerine “Milano” görüntüleniyor. Pivnichna İtalya". Bu özellik aynı zamanda bir listedeki öğeleri gruplamak için de kullanılır.

Liste geniş olduğu sürece listedeki en geniş metnin ikinci yarısının arkasına yerleştirilecektir. Açıkçası, genişlik ek HTML stilleri kullanılarak değiştirilebilir.

Başka şekillerde görünenlerin listesi

Bunu yapmak için ek CSS kullanabilirsiniz; örneğin, bir yan öğenin üzerine geldiğinizde bir liste görünecektir. Jquery kitaplığı tarafından kolaylaştırılan JavaScript, liste oluşturmaya yönelik çeşitli yetenekler sağlar. Ek kitaplık amaçlarına yönelik bağlantıların listesi, örneğin basamaklı olarak daha da karmaşık olabilir. Daha sonra, bir listeden bir öğe seçtiğinizde, örneğin “Kadın giyim” ana menü öğesi gibi aşağıdaki liste görünür (üzerine gelindiğinde, türlerden birini seçerken, örneğin “Üst giyim”, öğelerin bulunduğu bir liste) düşüyor: ceketler, parkalar, paltolar, palto, kürk manto veya buna benzer bir şey.

Ana yöntemleri tamamen inceledik, böylece eksik olanların bir listesini oluşturmak için bunları kullanabilirsiniz. Görünüşe göre, JavaScript'te listelerin işlevselliğini ve görünümünü değiştirmenize olanak tanıyan birçok nüans var.

Merhaba blog sitesinin sevgili okuyucuları. Şeytanın bilgeliğini öğrenmenin bir parçası olarak, ek yardım için sitedeki formların oluşturulmasına ilişkin ayrıntılara göz atmaya devam edebilirsiniz.

Bugün nasıl yaratılacağını çözeceğiz düşen listeler (açılır), bu sayının nasıl oluşturulacağını gösteren çoktan seçmeli bir seçenek ve ardından seçme ve seçenek vardır Metin alanı Metin düzenleyiciden ek yardım almak için ayrıca etiketleri ayarlayarak formların işlevselliğini genişletme olasılığından bahsedelim. Fieldset, etiket ve açıklama.

Sayfada bulunan herhangi bir formun perde arkasında oluşturulduğunu ve istemciden herhangi bir bilgiyi girip sunucuya göndermeyi amaçladığını tahmin ediyorum (örnek -).

Ne yazık ki, hiper metin düzenimizin teknolojisi bu bilgilerin anında işlenmesine izin vermiyor, bu nedenle HTML kullanarak formun orijinal görünümünü oluşturuyoruz ve gerekli veriler işlenmek üzere zorlanıyor. Bu yöntemle, doğrudan web sunucusunda, sunucu motorlarından biri (çoğunlukla PHP) tarafından yazılan özel bir dosya oluşturulur. Örneğin, bir dönüş bağlantısı için toplayıcı görevi görecek bir mail.php dosyası oluşturabilirsiniz.

Bu yayında bilgi ararken, formlar dahil tüm görünür sayfa öğelerinin kodlarının her zaman gövde etiketinin içinde bulunduğunu unutmayın.

Bu bilgi, distribütörlerin mevcut tüm araç kullanımını hatırlatmak için (sanırım bu işlevselliğin uygulanmasındaki ilk adım bankaya yöneliktir) ve en önemlisi ana etiketleri değiştirmeye yönelik bir mekanizmayı ortaya çıkarmak için son derece gereklidir. daha sonra zaman zaman ihtiyaç duyulan HTML kodunu düzenlemek, resepsiyonda meşgul olmak için dönüştürülür.

2. Çoklu- Parametreleri olmayan bu özellik, seçilen popo altında ikame başına çoklu seçime izin verir, yalnızca bir öğe (satır) seçebilirsiniz. Bu listedeki birkaç satırı ayıyla birlikte görmeye çalışın (herhangi bir yerde birer birer, Ctrl tuşunu veya ardından Shift tuşunu basılı tutarak birer birer):

3. Boyut— satır sayısı görüntülenecek şekilde düşen listenin yüksekliğini ayarlar. Birden fazla özellik varsa ve boyut değeri belirtilmemişse (uygulamada olduğu gibi), o zaman Ürünün arkasında görüntülenen birkaç satır var, ancak örneğin size = "5" ile zaten beş tane göreceksiniz:

4. Gerekli(Parametre yok) - bu, verileri veri toplayıcıya göndermeden önce bir seçim yapmanız gerektiği anlamına gelir. Listedeki bir öğe seçilmediği takdirde şu formlar gönderilmeyecektir:

5. Otomatik odaklama(değer yok) — sayfa ziyaret edildikten hemen sonra odağı listeye ayarlar. Ayrıca, tuşlarla çalışmanın ana parçası ses olduğundan, önceden ayarlanmış aynı odak, fareyi değiştirmenize gerek kalmadan klavyedeki ek okları kullanarak listeden seçim yaparak çalışmanıza yardımcı olacaktır:

6. Engelli(Parametre yok) - listeye erişimi engeller (onu içerir). Uygulamada, bu durumlarda, ortaya çıkanların bir listesini eklemeniz gerekiyorsa, yalnızca şarkı söyleyen zihinleri zafere çıkardığınızda, senaryolarla aynı anda vicoristleri çağırın:

7. Biçim Bu, şarapların önüne yerleştirilmesi gereken bir veya daha fazla form içeren listeye bir bağlantıdır, ancak kap olarak da bir konum vardır

Select tag özelliğini, formu oluşturmaya yönelik ana etiket olarak karıştırmayın. Uygulamanın form etiketinden önce bir id="data" özelliği ve select etiketinden önce bir form="data" özelliği vardır; bu, görünen listeyi belirli bir formla ilişkilendirmenize olanak tanır.

Seçenek etiketi özellikleri

1. Değer— Sunucuya (form işlemcisi) gönderilecek listedeki değerleri belirtir. Lütfen adın örnekleyiciye, select etiketinin name özelliği tarafından belirtildiği şekilde gönderildiğini ve değer(bu popo için - 1, 2, 3, 4, 5), açılır listenin seçilen satırını gösterir:

2. Engelli— görünen listedeki bir öğeyi seçmek için bloklar.

Alt kısımdan da görebileceğiniz gibi “Seçenek” satırı aktif değil ve onu seçmek imkansız.

3. Etiket— aynı listenin metin konumunu (anlamı nedir) görüntüler. Etiket mevcutsa, değerli özelliğe karşılık gelen satır görüntülenir ve seçenek etiketinin ortasında bulunan metin alanı göz ardı edilir. Aynı şey doğrudur, bunun yerine і sadece bir gün.

Harika. Yukarıdaki örnekte, seçenek için ilk satırda boş bir kod vardır (tablonun sol tarafında), ancak etiket = "Seçenek etiketi" parametresi girilir, bunun sonucunda metnin kendisi listede görünür (açık) sağ taraf). Diğer bir kod satırı ise seçenek etiketi yerine “Textarea Tag” metnini yerleştirmektir ve sağdaki listede label=”Textarea” değerlerine denk gelen “Textarea” kelimesi görüntülenir.

4. Seçildi— listedeki mevcut öğeyi görür:

Multiple özelliği, birden fazla öğenin görülebileceği anlamına gelir:

optgroup etiketi özellikleri

Açılan listenin örneğin gruplara bölünmesi gerekiyorsa, bu grupların her biri için, ortasında bazı açılır noktaların bulunduğu optgroup etiketlerini açan ve kapatan bir kap oluşturmanız gerekir. böyle bir liste bulunur. Bu durumda, açılan benzer bir listeyi özelleştirmek için iki özellik vardır.

1. Etiket— dış görünüm grubunun adını parametre olarak ekler:

Aynı, ancak select etiketinin multiple ve size = "7" değeriyle:

2. Engelli(değer yok) - tüm ayarlar da dahil olmak üzere aynı gruptaki öğelerin seçimini engeller ve etkin olmayan öğeler gri renkte gösterilir:

Burada küçük bir video klip daha da söz öncesi olacaktır:

Ek metin için formdaki metin alanı

Site için bakacağımız bir diğer form elemanı da çok sayıda yazı girilebilen alandır. Bu, ek textrea etiketi kullanılarak oluşturulabilir. Nitelikler olmadan etiket aşağıdaki sonucu verecektir:

Bu alanda, metnin aktarım ayrıntılarıyla birlikte sunucudaki işlemciye aktarıldığı satır aktarımları oluşturabilirsiniz. Alan, sağ alt köşeyi iki çapraz kıvrımla işaretlenmiş bir ayı ile gömerek genişlik ve uzunlukta uzatılabilir.

Şimdi parametreleri kullanarak başlangıç ​​koduna bir grup nitelik eklemeyi deneyelim:

1. İsim- form verilerinin sunucuda işlenmeden önce yüklenmesinden sonra metin alanının adını tanımlama değeri olarak belirler.

2. Sütunlar— parametre görevi gören alanın genişliği, yatay olarak yerleştirilen yeni karakterlerin sayısına göre ayarlanır. Temizlik değeri – 20.

3. Satırlar- Satır sayısına göre ölçülen metin alanının yüksekliği. Kullanıcı tarafından girilen metnin satır sayısı bu öznitelik tarafından belirtilen değerden daha büyük görünüyorsa, sağ elini kullanan kişi dikey olarak kaydırılmış olarak görünecektir.

4. Maksimum uzunluk— Metin alanına yerleştirilebilecek maksimum karakter sayısını belirtir. Sınır daha da uzağa taşınırsa giriş imkansız olacaktır.

Aşağıda, özellikle gerekli sayıda harf ve satırı metin alanına yerleştirerek doğrulayabileceğiniz en önemli niteliklerin tümünü içeren bir örnek bulunmaktadır (bir ve aynı karakteri birkaç kez girebilirsiniz):

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ı, yeni bir form ekleme ihtiyacı ve bazı karakterlerin zaten girilmiş olduğu hakkında bir ipucu içeren bilgiler hakkında kısa bir mesaj görüntüler.

7. Sadece oku(parametreler olmadan) - bu özelliği textarea'ye eklerseniz, metin alanı kullanıcılar tarafından değiştirilemez görünecek ve okunamaz olarak kabul edilecektir. Ayrıca ona odaklanabilir (imleci alana taşıyın ve sol fare düğmesine tıklayın) ve ayrıca metni görebilir ve kopyalayabilirsiniz (çoğunlukla veya tamamen):

Alanları yenilerken ek işlevler uygulayan bir dizi başka özellik daha vardır:

8. Otomatik tamamlama- tarayıcının, formu daha önce girilen veriler biçiminde doldururken bilgi istemlerini görüntülemekten sorumlu olduğunu belirtir ve destekleyici metni otomatik olarak ekleme olanağına izin verir.

Bu kadar iki parametre: Açık(dahil) bu kapalı(Vimkneno). Aks alın kodu:

"Açık" değerine sahip bu özellik, yalnızca belirli bir kullanıcının web tarayıcısında form alanlarının otomatik doldurulması devre dışı bırakıldığında çalışır.

9. Dürüm- Üç ek değer kullanarak tarayıcının metin alanındaki satırları taşıma kurallarını ayarlar:

Yumuşak— Genişliğin ötesinde alana sığmayan bir dizi karakter otomatik olarak yeni bir satıra aktarılır. Koleksiyoncu kim olursa olsun metin bir satırın görünümünden iletilecek. Bu durumda ek “Enter” tuşunu kullanarak metni gerekli herhangi bir yere aktarmak isterseniz web formu güçlendirilirken aktarım kaydedilir.

Zor— metin alanın genişliğine sığmazsa aktarım otomatik olarak gerçekleşecek ve derleyicinin yardımıyla bu tür aktarımların yeri kaydedilecektir. Bu parametre yalnızca cols özelliğiyle ilişkili:

Kapalı- Satır aktarımlarını etkinleştirme. Bir metin parçasını mekanik olarak ek "Enter" tuşunun arkasına taşımadan kaydırırsanız, metnin tamamı tek bir satıra yerleştirilecek ve yatay bir kaydırma düzeni görünecektir:

10. Otomatik odaklama(herhangi bir parametresi yoktur)—form tarafına tıklandığında metin alanına odaklanmayı başlatır.

11. Engelli— salt okunur özniteliğin değiştirilmesiyle (bu aynı zamanda alanın yerinde düzenleme yapılmasını engeller, ancak aynı zamanda odak noktasına getirilmesine olanak tanır), renk aralığına bağlı olarak gerekli olan metin alanına erişimi tamamen engeller: