Açılır listeli html formu gönderme düğmesi. HTML form öğeleri - bir açılır liste (seçme, seçenek, optgroup etiketleri), bir metin alanı ve bir etiket, alan kümesi ve gösterge uygulama. Optgroup etiketi öznitelikleri

HTML'deki en basit açılır listeyi seçme etiketini kullanarak oluşturmak kolaydır. Bu bir kapsayıcı etiketidir, seçenek etiketleri iç içe yerleştirilmiştir - liste öğelerini tanımlarlar.

Listeler için seçme etiketi kullanılarak yapılabilecek birkaç seçenek vardır: bir açılır liste (ana alana tıkladıktan veya üzerine geldikten sonra seçenekler açılır) ve çoktan seçmeli bir liste - bu listenin içinde kullanıcı birkaç öğe seçebilir. İlki daha yaygındır; modern web sitelerinde önemli bir gezinme unsurudur. Çoktan seçmeli açılır liste, örneğin çeşitli ürün özelliklerini seçmeniz gereken kataloglarda kullanılabilir.

Genel ve özel öznitelikleri kullanarak listelerin görünümünü ve özelliklerini değiştirebilirsiniz.

Etiket niteliklerini seçin

1. Çoklu - çoktan seçmeli ayarlar.

2. Boyut - listedeki görünür satırların sayısını, yani yüksekliği ayarlar. Ve burada her şey çoklu özniteliğin mevcut olup olmadığına bağlıdır. Evetse ve boyutu belirtmezseniz, birden fazla varsa, kullanıcı tüm olası seçenekleri görür, birden fazla yoksa yalnızca bir satır gösterilir ve ziyaretçinin geri kalanı sağ taraftaki asansör simgesine tıkladığında okuyabilir. Boyut belirtilmişse ve seçenek sayısından azsa, sağda bir kaydırma çubuğu görünecektir.

3. İsim - isim. Açılır listeden vazgeçilebilir, ancak sunucudaki işleyiciyle etkileşimde bulunmak gerekli olabilir. Kural olarak, isim hala belirtilmektedir.

Select etiketi, option etiketinden farklı olarak gerekli niteliklere sahip değildir.

Seçenek iç içe etiket nitelikleri

1. Seçildi - bir liste öğesi seçmek için tasarlanmıştır. Birden çok özellik ayarlanmışsa, kullanıcı birden fazla öğe seçebilir (yukarıya bakın).
2. Değer - değer. Bu öznitelik gereklidir. Web sunucusu, kullanıcının tam olarak hangi liste öğelerini seçtiğini anlamalıdır.
3. Etiket. Bu öznitelikle, çok uzun olan liste öğelerini kısaltabilirsiniz. Örneğin, etiketinde belirtilen "Milano, Lombardiya'nın idari merkezidir" seçeneği yerine "Milano" görüntülenecektir. Kuzey İtalya". Bu öznitelik, bir listedeki öğeleri gruplamak için de kullanılır.

Listenin genişliğine gelince, varsayılan olarak listedeki en geniş metnin uzunluğuna ayarlanır. Elbette genişlik HTML stilleri kullanılarak değiştirilebilir.

Diğer şekillerde açılır

CSS kullanılarak yapılabilir, örneğin, bir sayfa öğesinin üzerine geldiğinizde bir liste görünecektir. JavaScript, Jquery kitaplığı ile basitleştirilen listeler oluşturmak için mükemmel yetenekler sağlar. Bu kitaplıkla bağlantılı açılır liste çok karmaşık olabilir, örneğin basamaklı olabilir. Yani, bir listeden bir öğe seçtiğinizde, aşağıdaki liste görünür, örneğin, "Kadın kıyafetleri" menü öğesi vardır (üzerine geldiğinizde, ardından türlerden birini seçtiğinizde, örneğin "Dış giyim", aşağıdaki öğelerin bulunduğu bir liste çıkar: ceketler, parkalar, paltolar, kısa ceket, kürk mantolar vb.

Açılır liste oluşturmanın ana yollarını özetledik. Elbette JavaScript'te ve JavaScript'te listelerin işlevselliğini ve görünümünü değiştirmenize izin veren birçok nüans vardır.

Bu yazıda, açılır listeler oluşturmanıza, bu listelerde nasıl grup oluşturacağınızı öğrenmenize, öğeleri ve hatta liste gruplarını nasıl devre dışı bırakacağınızı düşünmenize, çok satırlı bir metin alanı oluşturmanıza olanak tanıyan öğeyle tanışmanıza, daha sonra HTML içinde kullanmanıza olanak tanıyan öğelere bakacağız. formlar (öğe

), birinci ve ikinci alanlar için ad niteliği ile benzersiz isimler belirleriz. Devre dışı bırakılan ikinci metin alanı için, sayfa yüklenirken devre dışı bırakılacağını belirledik.</p> <p>Ek olarak, formun içine formu göndermeye yarayan bir düğme yerleştirdik (öğe <input> düğme türü "formu gönder": tür \u003d "gönder").</p> <p>Örneğimizin sonucu:</p> <h2>Metin alanı için ipucu</h2> <p>Ve böylece siz ve ben son örneği ele alacağız ve bu eğitimdeki makalenin pratik görevine geçeceğiz.</p> <p>(HTML etiketi sayesinde <textarea>) kullanıcının öğeye girmesi için beklenen değeri açıklayan araç ipucu metninin belirtilmesine izin verilir.</p> <p>Kullanıcı metin alanına bir değer (herhangi bir karakter) girdiğinde ipucu metni gizlenir, kaldırırsanız ipucu tekrar görüntülenir.</p> <p>Bir kullanım örneğine bakalım:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Yer tutucu ve salt okunur etiket öznitelikleri <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Metin kutusuna bilgileri girin"</span>> "Alan salt okunurdur"</span> salt okunur\u003e
type \u003d "submit" name \u003d "submitInfo" value \u003d "(! LANG: gönder" > !}

Bu örnekte, iki metin alanı oluşturduk (öğe ), niteliğe sahip birinci ve ikinci alanlar için, öğenin içinde soluk bir metin rengiyle görüntülenen, kullanıcı için bir ipucu belirledik. Salt okunur niteliğine sahip ikinci metin alanı için, salt okunur olacağını belirledik (içerik değiştirilemez).</p> <p>Metin alanı salt okunur ise, içeriğin değiştirilemeyeceğini, ancak kullanıcının içeriğe gidebileceğini, seçebileceğini ve kopyalayabileceğini unutmayın.</p> <p>Ek olarak, formun içine formu göndermeye yarayan bir düğme yerleştirdik (öğe <input> düğme türü "formu gönder": tür \u003d "gönder").</p> <p>Örneğimizin sonucu:</p> <h2>Konuyla ilgili sorular ve görevler</h2> <p>Bir sonraki konuya geçmeden önce Alıştırma Aktivitesini tamamlayın:</p> <ul><li>Kazanılan bilgileri kullanarak aşağıdaki boş pozisyon ilan formunu oluşturun:</li> </ul><p>Göreve devam etmeden önce örneği yeni bir pencerede açın ve tüm noktalarını tekrarlamak için formu dikkatlice inceleyin. Görevi tamamlamak için makaledeki bilgilere ihtiyacınız olacak. Eğer kaçırdıysanız, çalışmak için geri dönün.</p> <p>Alıştırmayı tamamladıktan sonra, her şeyi doğru yaptığınızdan emin olmak için örneği ayrı bir pencerede açarak sayfa kodunu inceleyin.</p> <p>Etiketi kullanılarak HTML'de bir açılır liste yapılabilir <b>seç</b>... Açılır (veya "açılır") listeye ek olarak, etiket <b>seç</b> çoktan seçmeli bir liste öğesi oluşturmanıza olanak sağlar. Etiket sözdizimi <b>seç</b> HTML şöyle görünür:</p><p> <select> <option>Elektronik</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> </p><p>Burada etiketini kullanarak <b>seçenek</b> liste öğeleri ayarlanmıştır.</p> <p>Uygulama sonucu:</p><p>Elektronik Syroezhkin Chizhikov Kukushkina</p><h2>Etiket Niteliklerini SEÇİN</h2> <p>Etiket özelliklerini düşünün <b>seç</b>:</p> <ul><li><b>isim</b></li> <li><b>boyut</b> - listede görüntülenen satır sayısı (numara);</li> <li><b>çoklu</b> - açılır listede birden çok öğe seçiminin işlevini içerir;</li> <li><b>engelli</b> - öğeye erişimi engeller;</li> <li><b>form</b> - bir açılır listeyi bir formla ilişkilendirmenize olanak tanır (listenin kendisi eklenmesi gereken formun dışındaysa gerekli olabilir). Form kimliği bir bağımsız değişken olarak aktarılır.</li> </ul><p>Belki de bunlar etiketin tüm ana özellikleridir <b>seç</b>en sık kullanılanlar. Şimdi, belirtilen öznitelikleri kullanarak HTML'de nasıl açılır liste oluşturacağımızı görelim:</p><p> <html> <head> <title>HTML kullanan açılır liste - Nubex</title> </head> <body> <form id="nubexForm" action="do.php"> <input type="submit" value="Mesaj gönder" /> </form> <select name="nubexSelect" size="3" multiple form="nubexForm"> <option>Elektronik</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> </body> </html> </p><h2>OPTION etiket özellikleri</h2> <p>Etiket <b>seçenek</b>belirtildiği gibi, açılır listenin alt öğelerini tanımlamanıza olanak tanır <b>seç</b>bu da bir kap görevi görür. Etiket <b>seçenek</b> kendi özniteliklerine sahiptir:</p> <ul><li><b>engelli</b> - bu liste öğesinin seçimine bir yasaklama koyar;</li> <li><b>etiket</b> - geçerli liste öğesi için bir etiket ayarlamanıza olanak sağlar (etikette belirtilen metin yerine, kısaltılmış bir değeri görüntülemenize izin veren etiket değeri görüntülenir); <b>Not: öznitelik Firefox tarayıcısında desteklenmiyor</b></li> <li><b>seçildi</b> - listedeki mevcut öğe varsayılan olarak seçilecektir;</li> <li><b>değer</b> - sunucuya iletilecek değer;</li> </ul><p>Etiket için gelişmiş bir kullanım örneğine bakalım <b>seçenek</b>:</p><p> <select> <option label="Электроник" value="1" selected>Mr Elektronik</option> <option>Syroezhkin</option> <option disabled>Chizhikov</option> <option>Kukushkina</option> </select> </p><p>Verilen örneğin sonucu şöyle görünecektir:</p><p>Bay Elektronik Syroezhkin Chizhikov Kukushkina</p><p>Site yapıcısı "Nubex" te, form yapıcı modülünü kullanarak rastgele formlar oluşturmak mümkündür. "Nubex" içindeki açılır listelerin çalışması şu makalede açıklanmaktadır:</p> <p>Blogumun tüm okuyucularına selamlar. Bugün size html'de nasıl açılır liste oluşturacağınızı, hangi etiketleri ve öznitelikleri kullanmanız gerektiğini ve ayrıca hangi amaçlarla ihtiyacınız olabileceğini anlatacağım.</p> <h2>Etiket seçin ve bir açılır liste oluşturun</h2> <p>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 yazılı olduğu içindedir. Misal:</p><p>Bir hayvan seçin <select> <option value = "Boğa">Boğa</option> <option value = "İnek">İnek</option> <option value = "Koyun">Koyun</option> <option value = "At">At</option> </select> </p><p>Bu durumda, seçeneğin açılış ve kapanış kısmı arasında görüntülenen, ekranda göreceksiniz ve değer özniteliğinde bulunan değer sunucuya gönderilecek veya bir komut dosyası kullanılarak işlenecektir.</p><p>Html listesi normal veya çoktan seçmeli olabilir. Birden çok öğe seçmeyi mümkün kılmak için, seçim için boş bir çoklu öznitelik eklemeniz gerekir. Birden çok değer seçmek için <i>ctrl</i> ve sol fare düğmesine basın. <br><br> Bir başka kullanışlı özellik de boyuttur. Açılır menüde kaç satırın gösterileceğini seçmenize olanak tanır.</p> <p>Başka bir öznitelik devre dışı bırakıldı. Öğelere tıklamak ve görüntülemek için listeyi erişilemez hale getirir, ancak yine de sayfada görünür durumdadır.</p> <p>Gerekli - html5 özelliği. Belirtilirse, açılır listeden bir değer seçilmeden form gönderilmeyecektir. Genelde seçim için bir zorunluluk haline gelir. Öznitelik tüm tarayıcılarda çalışmazken.</p> <h2>Seçenek etiketi nitelikleri</h2> <p>Aslında, select yalnızca liste öğeleri için bir kapsayıcı görevi görür, kendileri de seçenek etiketi kullanılarak ayarlanır. Zaten öğrendiğimiz gibi bir değer parametresine sahip, ancak bunun dışında başkaları da var. Örneğin: <br> Devre Dışı - liste öğesini seçim için kullanılamaz hale getirir. Görüntülenecek, ancak üzerine tıklayamazsınız.</p> <p>Seçildi - öğe varsayılan olarak seçilecektir. Normal bir listede, değeri olmayan bu öznitelik çoğul bir listede yalnızca bir öğeye - birkaç öğeye ayarlanabilir.</p> <h2>Doğru kullanım için önemli açıklama</h2> <p>Seçim sonucunun sunucuya gönderilmesi veya komut dosyaları aracılığıyla işlenmesi gerekiyorsa, herhangi bir hata oluşmaması için seçimi forma yerleştirin. Gerçek şu ki, açılır liste başlangıçta tam olarak form öğelerinden biri olarak oluşturulmuştu.</p> <h2>Ne için seçiliyor?</h2> <p>Genellikle sitenize kaydolmanız veya bir anket yapmak istemeniz sizin için yararlı olabilir. Öğenin bir dezavantajı vardır - görünümünü css aracılığıyla çok iyi değiştirmez.</p> <p>Varsayılan olarak, listeye tıkladığınızda mavi bir çerçeve görünür, imlecin üzerine geldiği liste öğelerini vurgulamak için aynı renk kullanılır. Basıldığında çerçevenin görünmesini veya farklı bir renkte vurgulanmasını önlemek için aşağıdaki seçiciyi yazabilirsiniz:</p> <p>Seç: odak ( <br> anahat: 1px sabit turuncu; <br> }</p> <p>Çerçeve şimdi turuncu olacaktır.</p> <p>Seçenek de şekillendirilebilir, ancak bir öğenin üzerine geldiğinizde arka planı maviye döner ve bazı nedenlerden dolayı stiller arasında değişmez.</p> <p>Seçenek ( <br> Renk: Kahverengi; <br> arka plan: su; <br> }</p> <p>Bu arada, herhangi biriniz css aracılığıyla fareyle üzerine gelindiğinde arka plan rengini nasıl değiştireceğinizi bilebilir mi?</p> <p>Aslında bu, seçme etiketi ve kullanımı içindir. Bunun için html'de ek özellik yoktur. Onunla yapılan diğer tüm işlemler javascript ve php kullanılarak gerçekleştirilebilir. Örneğin, doğum yılını seçmek için bir liste oluşturmanız gerekiyorsa ve 80-100 farklı seçenek varsa bunları elle yazmaz mısınız?</p> <p>Programlamayı kullanmanız gereken şey tam olarak budur, yani bir döngü. Pekala, tamam, bu zaten başka bir konuşma için bir konu, ama bugün size söylemek istediğim tüm bilgiler bu. Kendinizi html'deki diğer temel etiketlere alıştırabilirsiniz.</p> <p>Size selamlar, blog sitesinin sevgili okuyucuları. Bugün HTML formları gibi konuşmak istiyorum. Sitenizin motoru (cms) ne olursa olsun, kesinlikle Form ve Giriş etiketleri kullanılarak oluşturulmuş formların yanı sıra Button, Checked, Value, Checkbox, Radio, Checkbox, Submit, bir biçimde veya başka bir biçimde öznitelikler ve parametreler kullanacaktır. ...</p><p>Aşağı açılır listeler ve metin alanları oluşturmak için buna öğeler de ekleyebilirsiniz - Seç, Seçenek, Metin Alanı, Etiket, Alan Seti, Gösterge.</p><h2>Neden ihtiyacımız var ve formlar modern web sitelerinde nasıl çalışıyor?</h2><p>Aynı site arama dizesi () bu etiketler kullanılarak oluşturulur ve ardından projenizde arama yapılması zorunlu olacaktır. Bu nedenle, nasıl düzenlendiklerini ve çalıştıklarını anlamak, tasarım üzerinde başarılı bir çalışma için size hiç zarar vermeyecek ve kendini tanıtma ve tanıtımla bile gereksiz olmayacak.</p><p>Dolayısıyla, bu unsurları inceleme ihtiyacının gerekçesiyle, daha fazla soru olmaması gerektiğini düşünüyorum, bu yüzden doğrudan olası seçeneklerinin çalışmasına geçme zamanı.</p><p>Evet, size ayrıca hipermetin biçimlendirme dili konusunda birçok materyali incelediğimizi de hatırlatmak isterim, örneğin, üç) ve.</p><p>Formlar, özünde, Form etiketlerinden ana kapsayıcıya çeşitli etiketlerin eklendiği öğelerden oluşur - İşaretli, Değer, Onay Kutusu, Radyo, Onay Kutusu, Gönderme, vb. Sadece kodunu site şablonunun herhangi bir uygun yerine yerleştirmemiz gerekir nasıl görünmesi gerektiğini etiketleri ve öznitelikleriyle belirterek.</p><p>Bu, girdiğiniz sorgu için gönder düğmesi olan bir metin kutusu, radyo düğmeli seçenekler (sağlanan düğmelerden yalnızca birini basılı bırakabileceğiniz), gönder düğmeli birden çok metin kutusu () ve daha fazlası olabilir.</p><p>Örneğin, "arama" durumunda, Değer özniteliğini kullanarak, bir sorgu girme alanının yanında bulunan butona tam olarak ne yazılacağını belirtebilirsiniz. Formlara girilen veriler bir şekilde daha fazla işlenmelidir.</p><p>Örneğin, geri bildirim durumunda, kullanıcı, alanı adıyla doldurduktan sonra E-postasını ve mesaj metnini girer ve ardından gönder düğmesine tıklar, formdan sitenin yazarının E-postasına veri gönderme ümidine sahip olacaktır. Ancak maalesef, bunu yalnızca bir köprü metni biçimlendirme dili () kullanarak uygulamak mümkün değildir.</p><p>Bu amaçlar için, kullanıcı gönder düğmesine tıkladıktan sonra geri bildirim alanlarından tüm verileri alacak ve E-posta ile kaynak sahibine gönderecek özel bir işleyici programı gereklidir. Bunu hangi program yapacaksa, Action özniteliğini kullanarak kendinizi belirtmelisiniz.</p><p>Genellikle bir işleme programı PHP ile yazılmış bir betiktir. Bu nedenle, Form etiketinin Action özniteliğinde, barındırma sunucunuzda bulunan bu komut dosyasının dosyasının yolunu belirtmeniz gerekecektir. Blogumun RSS beslemesine aboneliği e-posta yoluyla örnek olarak vereceğim:</p><p>Biraz anlaşılmaz, muhtemelen başlangıçta görünüyor, ama hikaye ilerledikçe her şeyin netleşeceğini düşünüyorum.</p><h3>Düğmeler, onay kutuları ve radyo düğmeleri oluşturmak için Form ve Giriş etiketleri</h3><p>Herhangi bir form, açılış ve kapanış etiketlerine eklenmelidir <b>Form</b>... Bu, yaratılışları için bir tür kaptır. Bu etiketin bir dizi gerekli ve isteğe bağlı özelliği vardır:</p><ol><li>Ad - bir şey yaptığınız Html dosyasında birkaç web formu kullanılacaksa belirtilmesi gereken benzersiz bir ad</li><li>Eylem - daha sonraki işlemler için ondan veri alacak olan komut dosyasına giden yolu belirten gerekli bir özellik</li><li>Yöntem - bunu kullanarak, bu web formundan veri aktarım yöntemini işleyici dosyasının komut dosyasına değiştirebilirsiniz. Bunu belirtmezseniz, varsayılan olarak Get yöntemi kullanılacaktır, bu aslında esas olarak değişkenler ve kısa mesajlar için ve ayrıca tarayıcı adres çubuğundan verileri açık bir şekilde aktararak tasarlanmıştır. Form verilerini işleyici komut dosyasına geçirmek için kullanmak daha iyidir <b>pOST yöntemi</b>metin mesajlarının kapalı bir şekilde iletilmesi için özel olarak tasarlanmıştır</li> </ol><p>Çeşitli web formları oluşturmanıza izin veren geri kalan etiketleri düşünün. En çok yönlü olanı <b>Giriş</b>... İçinde, bu etiketle oluşturulan HTML formunun tam olarak ne olacağını belirleyen Type özniteliği belirtilmelidir.</p><p>Aşağıdaki öğeler Girdi ve Tür kullanılarak oluşturulabilir:</p><ol><li>tek satırlı metin alanları (Tür \u003d "Metin")</li><li>şifre girmek için alanlar (Tür \u003d "Şifre")</li><li>onay kutuları (Tür \u003d "Onay Kutusu")</li><li>radyo düğmeleri (Tür \u003d "Radyo")</li><li>gizli alanlar (Tür \u003d "Gizli")</li><li>normal düğmeler (Tür \u003d "Düğme")</li><li>işleyiciye veri göndermek için düğmeler (Tür \u003d "Gönder")</li><li>web formunu orijinal durumuna getirmek için düğmeler (Type \u003d "Reset")</li><li>sunucuya dosya yüklemek için alanlar (Type \u003d "Dosya)</li><li>resimli düğmeler (Type \u003d "Image")</li> </ol><p>Girişin bitiş etiketi yok. Onunla oluşturulan web formunun tam olarak neye benzeyeceği, tamamen Type özniteliğinde belirtilen parametreye bağlıdır. Tür belirtilmezse, varsayılan olarak bir metin alanı oluşturulur.</p><h3>Tür için farklı değerlerle Girdi üzerinde oluşturulan form örnekleri</h3> <h3>Giriş etiketinin diğer özellikleri ve kullanım örnekleri</h3><p>Bakalım özniteliklerin geri kalanı ne için?</p><ol><li>Ad - veriler, işleyici programının komut dosyasına gönderilecekse, Ad özelliği için parametreyi belirtmelisiniz. Bu isim altında, formdan gönderilen veriler bilgi işleyici programında görünecektir.</li><li>Boyut - oluşturulan web formunun alanının boyutunu ayarlar. Değer, bu alana sığabilecek karakter sayısında belirtilmiştir. Boyut belirtilmezse, varsayılan genişlik 24 karakter olacaktır</li><li>Maxlength - varsayılan olarak, Html formuna girilebilecek karakter sayısı sınırlı değildir, ancak Maxlength kullanarak bu sınırlamayı ayarlayabilirsiniz. Belirtilenden daha fazla karakter, alana giremezsiniz</li><li>Değer - bunu kullanarak, alana veya veri göndermek için düğmeye varsayılan olarak tam olarak neyin yazılacağını ayarlayabilirsiniz.</li><li>İşaretli, radyo düğmeleri (radyo) veya onay kutuları (onay kutusu) için Giriş'e eklenebilen bir bayrak niteliğidir. Bu durumda, bu radyo düğmesi veya onay kutusu, web formu içeren bir sayfa yüklenirken etkin olacaktır (içlerinde zaten bir onay işareti olacaktır)</li> </ol><p>Şimdi her şeyin üzerinden geçelim <b>girişli form örnekleri</b>... Metin alanının görünümü, şifre giriş alanının görünümüne benzer, bu nedenle, yalnızca bir e-posta adresi girmek için Metin oluşturma seçeneğini dikkate alacağız:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy></p><p>Şimdi radyo düğmeleriyle (Radyo) bir web formu oluşturmaya bakalım:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy></p><p>Bu formun Giriş etiketini iki kez (iki radyo düğmesinin her birini oluşturmak için bir kez) kullandığını unutmayın. Dahası, her biri aynı değere (rezultat) sahip Name özniteliğini içerir ve Değer değeri farklıdır (EVET ve HAYIR).</p><p>Bu, işlenirken, radyo düğmelerinden herhangi biri seçilirse, adı Ad'da yazılı olan bir değişken gönderileceği, ancak bu değişkenin değerinin hangi radyo düğmesinin seçildiğine bağlı olacağı anlamına gelir.</p><p>Onay kutularıyla bir web formu oluşturmanın bir örneğini ele alalım:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy></p><p>Onay kutuları, aynı anda birkaç seçeneği seçme yeteneği açısından radyo düğmelerinden farklıdır. Ad, onay kutularının ayarlandığı işleyici dosyasında tanımlamak için kullanılır ve Değer - işleyiciye gönderilecek değeri belirler (Değer belirtilmezse, bu onay kutusunun yanındaki metin işleyiciye gönderilecektir).</p><h2>Seç, Seçenek, Metin Alanı, Etiket, Alan Kümesi, Gösterge - açılır listeler, metin alanları ve web formlarının diğer öğeleri</h2><p>Öncelikle, size biraz, aslında web formlarının ne olduğunu ve site sayfalarında neden gerekli olduklarını hatırlatmak istiyorum. Öncelikle herhangi bir işletim sisteminde bulunan öğeleri kullanıcı dostu bir şekilde tekrarlamak için tasarlanmıştır: düğmeler, metin giriş alanları, açılır listeler, onay kutuları, radyo düğmeleri ve benzerleri.</p><p>Tüm kullanıcılar ek bir açıklama yapmadan bu öğelerin amacını anlar ve formun Html düğmesini görürlerse tıklamaları gerektiğini anlarlar.</p><p>Dahası, tüm kurucu unsurları (Seç, Seçenek, Metin Alanı, Etiket, Alan Seti, Açıklamalar gibi) zaten tamamlanmış iş parçalarıdır (kaplar), sadece gerekli öznitelikler ve parametrelerle gerekli etiketi kullanmak yeterli olacaktır.</p><p>Tarayıcılar, bir web formunun belirli bir öğesini nasıl görüntüleyeceklerini bilirler. Doğru, aynı öğesini farklı tarayıcılarda görüntüleme seçenekleri birbirinden biraz farklı olabilir, ancak kural olarak önemli ölçüde değil.</p><p>Yani Html'deki web formlarının anahtar aktarma girişimi olduğu ortaya çıktı <b>herhangi bir işletim sisteminde kullanılan öğeler</b>, web sitesinin sayfalarına. Peki site sayfalarında neden gerekli olabilir?</p><p>Prensip olarak, benzer öğelerin işletim sistemlerinde kullanıldığı aynı amaç için - kullanıcıdan veri aktarımı. Formlar söz konusu olduğunda, kullanıcıdan gelen veriler, özel bir program tarafından işlendiği sunucuya iletilir (maalesef, köprü metni biçimlendirme dili veri işlemeye izin vermez).</p><p>Bununla birlikte, veriler yalnızca sunucuya değil, örneğin Form etiketinin Action özniteliğinde belirtilen adrese e-posta ile de gönderilebilir. Html'den E-postaya veri gönderirken, veri gönderme butonuna bastıktan sonra alanları dolduran kullanıcı, varsayılan olarak bilgisayarında kullanılan mail programını başlatacaktır.</p><p>Bu durumda açılış Formu etiketi şunun gibi görünmelidir:</p><p> <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> </p><h3>Seç ve Seçenek - açılır etiketler</h3><p>Açılır listelerle alanlar oluşturan bir web formunun tüm öğeleri aynı şekilde oluşturulur. İlk olarak, açılan kutunun kapsayıcısı, Html Select etiketini açıp kapatarak ayarlanır. Ve sonra bu konteynerin içinde, bu listedeki öğeler (öğeler) ile ayrı konteynerler oluşturulur. Bu, Seçenek açma ve kapama etiketleri kullanılarak yapılır.</p><p>Bunun gibi bir şey ortaya çıkıyor:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy></p><p>Ancak bu basitleştirilmiş bir yapıdır, çünkü <b>seç ve Seçeneğin bir dizi özelliği vardır</b>Oluşturulan açılır kutunun özelliklerini ve görünümünü tanımlayan.</p><ol><li>Ad - Seç kullanılarak oluşturulan bu web formu öğesi için benzersiz bir ad belirtmelisiniz. Bu ad, veri işleyici programındaki sunucuya değişken adı olarak aktarılacaktır. Kullanıcının seçtiği açılır liste öğesinin Değer özniteliğinin değeri (her öğe için Option'da ayarlanır) bu değişkenin değeri olarak aktarılacaktır.</li><li>Boyut - görüntülenen öğelerin sayısını ayarlamak için kullanabilirsiniz. Diğer bir deyişle, Size (Boyut) yardımıyla, görüntülenen satır sayısıyla ölçülen listenin yüksekliğini ayarlayabilirsiniz. Select etiketinde Size değerini açıkça belirtmezseniz, açılır liste yüksekliğinin varsayılan değeri kullanılır ve Çoklu özniteliği yoksa veya Select'te mevcutsa farklı olur: <ol><li>Seçim'de Birden Çok varsa, web formundaki açılır listenin yüksekliği varsayılan olarak öğelerinin sayısına eşit olacaktır. Şunlar. çoktan seçmeli açılır listedeki tüm öğeler gösterilecektir. Aşağıdaki çoğul bir örneğe bakın. Seçim'deki Boyut özelliği öğe sayısından daha az olacak şekilde ayarlanmışsa, sağda bir kaydırma çubuğu görünür.</li><li>Seçimde Çoklu yoksa, web formundaki açılır listenin yüksekliği varsayılan olarak bir satıra eşit olacaktır. Şunlar. yalnızca bir satır görünür olacak ve diğer öğeler yalnızca asansör düğmesine (sağda) bastığınızda kullanılabilir olacaktır. Aşağıdaki örneğe bakın</li> </ol></li><li>Birden çok - Bu niteliği Select etiketinde atamak, aynı anda birden çok öğe seçme yeteneği olan bir açılır liste oluşturmanıza olanak tanır. Aşağıda bu özellik hakkında daha fazla bilgi edinin.</li> </ol><p>Açılır formlar iki seçeneğe ayrılabilir. İlk seçenekte, açılır listeyle alanın yalnızca bir öğesini (satırını) seçebilirsiniz, ikinci seçenekte - Ctrl veya Shift tuşunu basılı tutarak aynı anda birkaç kullanılabilir öğeyi seçebilirsiniz.</p><p>Bu durumda, ikinci seçenekte, seçilen tüm öğelerin verileri sunucuya gönderilecektir. Hangi açılır listenin oluşturulacağı, Select etiketindeki Çoklu özniteliğin varlığı veya yokluğuna göre belirlenir.</p><p>Select'de parametresiz olarak birden çok belirtildi, çünkü Basitçe Çoklu yazılır ve hepsi bu. Varsa, çoklu seçim imkanıyla (Ctrl veya Shift tuşunu basılı tutarak) bir açılır liste web formu oluşturacaktır.</p><p>Açılır listeye sahip alanın bir çeşidi. <b>çoktan seçmeli mümkün</b>şuna benzeyecek:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy></p><p>Sağda, yukarıdaki koda dayalı olan çoklu seçim açılır listesi için bir web formu örneği bulunmaktadır. Gördüğünüz gibi, Ctrl veya Shift tuşlarını basılı tutmak aynı anda birkaç öğeyi seçebilir.</p><p>Select etiketinde Çoklu öznitelik yoksa, bu açılır listenin (satır) yalnızca bir öğesi seçilebilir.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy></p><p>Yalnızca bir öğenin seçilebildiği bir örnek burada görülebilir:</p><p>Etiket SelectED Legend web sitesi</p><h3>Seçenek Etiketi Nitelikleri</h3><br><img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy><p>Oluşturulan açılır listeye (Seç ve Seçenek'i kullanarak), yazı tipi stilindeki diğer menü öğelerinden farklı olacak şekilde grupların başlığına sahip ayırıcılar gibi bir şey ekleyebilirsiniz.</p><p>Açılır liste öğelerinden bir grup oluşturmak için, bunları Optgroup formunun açılış ve kapanış etiketlerine eklemeniz ve Optgroup açılış etiketine, istediğiniz grup adını girmeniz gereken bir parametre olarak Etiket özniteliğini yazmanız gerekir.</p><p>Örneğin bunun gibi:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy></p><p>Etiket Seçimi <br> SelectED Legend web sitesi <br></p><h2>Metin alanı - bir formda bir metin alanı oluşturma</h2><p>Web formlarının dikkate almadığımız bir öğesi daha var - Textarea (çok satırlı metin girme yeteneği olan bir alan). Eşleştirilmiş Html etiketi Textarea kullanılarak oluşturulur. Dahası, içinde metni yeni bir satıra aktarabilir ve yapılan transferler dikkate alınarak sunucuya iletilir.</p><p>Bu nedenle, çok satırlı bir metin alanı oluşturmak için, açılış ve kapanış Textarea'yı kaydetmeniz gerekir ve aralarına web formunun bulunduğu sayfa yüklendiğinde görünecek metin ekleyebilirsiniz. Kullanıcı daha sonra bu metni silebilir ve kendi metnini yazabilir.</p><p> <form> <textarea rows="3" cols="15" name="textt">Bize kendin hakkında ne söyleyebilirsin?

Gördüğünüz gibi, bu öğeyi etkinleştirmek için metne tıklamak işe yaramaz - kendiniz tıklamanız gerekir. Bu tam olarak durumdur ve etiket Etiketini düzeltmeyi amaçlamaktadır. Web formu öğesinin yanındaki metni tıklanabilir yapmanıza olanak tanır, bu da şüphesiz kullanılabilirliği artıracak.

Ancak formun ve metnin Html öğesi nasıl bağlanır? Bunu yapmak için, özelliğe benzersiz bir parametreye sahip bir kimlik ekleyin ve metni açılış ve kapanış Etiket etiketleri ile çevreleyin. Ve hepsi bu kadar değil. Açılış Etiket etiketinde, parametresi form öğesinin Html etiketindeki ID özniteliğiyle tam olarak aynı olması gereken For özniteliğini kaydetmeniz gerekir. Bunun gibi bir şey ortaya çıkıyor:

Gördüğünüz gibi artık Etiket kullanımı sayesinde web formu öğeleri sadece üzerine tıklanarak değil, yanında bulunan metne tıklanarak da etkinleştirilebilir.

Fieldset ve Legend - şekli parçalara ayırma

Muhtemelen, Html'deki büyük formların bir çerçeve ile çevrelenmiş gruplara (Fieldset) ayrıldığını ve bu tür grupların her birinin kendi başlığı (Legend) olduğunu muhtemelen görmüşsünüzdür. Bu sadece iki etiketle yapılır: Fieldset ve Legend. Eşleştirilirler, yani bir açılış ve kapanışa sahip olmaları gerekir.

Bu nedenle, bir grup bileşen parçası oluşturmak için, tüm bu parçaları Fieldset etiketlerini açıp kapatmanız gerekir. Ve bu grup için bir başlık (Lejand) ayarlamak için, Fieldset açılışından hemen sonra, grup başlığının metnini eklemeniz gereken açılış ve kapanış Lejantından bir yapı yazmanız gerekir.

Fieldset ve Legend kullanarak grup oluşturmanın bir örneğini burada bulabilirsiniz:

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere

İlgini çekebilir

Açılır menü ve metin kutusu formunun Seç, Seçenek, Metin Alanı, Etiket, Alan Kümesi, Gösterge - Html etiketleri
Html kodunda listeler - UL, OL, LI ve DL etiketleri
MailTo - Nedir ve E-posta göndermek için Html'de bir bağlantı nasıl oluşturulur?
Html ve CSS kodunda renkler nasıl ayarlanır, tablolarda RGB gölgelerinin seçimi, Yandex sonuçları ve diğer programlar
Köprü Metni Biçimlendirme Dili Html Nedir ve W3C Doğrulayıcısında Tüm Etiketlerin Listesi Nasıl Görüntülenir
HTML'ye bağlantı ve resim (fotoğraf) nasıl eklenir - IMG ve A etiketleri
Html'deki tablolar - Tablo, Tr ve Td etiketlerinin yanı sıra bunları oluşturmak için Colspan, Cellpadding, Cellspacing ve Rowspan
Yazı Tipi (Yüz, Boyut ve Renk), Blok Alıntı ve Ön etiketler, saf HTML'de (CSS yok) eski metin biçimlendirmeleridir
Bir köprü nasıl oluşturulur (A, Href, Hedef boş), sitedeki yeni bir pencerede nasıl açılır ve Html kodunda bir resim bir bağlantı nasıl yapılır