Bu makaleye hangi başlığı vereceğimi uzun süre düşündüm ve daha iyi bir şey bulamadım. En azından bir şekilde anlatılanların özünü yansıtan tek başlık bu. Dürüst olmak gerekirse, ne dendiğini doğru olarak bilmiyorum, bu yüzden makaleye, bu konuyla ilgili bir arama motorunda en azından bazı bilgiler bulmaya çalıştığım şekilde isim verdim.

Sitelerden birinde, düğmeye ne zaman basıldığına bağlı olarak doldurulmuş verileri farklı PHP "işleyicilerine" gönderecek iki gönder düğmesini tek bir formda kullanmam gerekiyordu. Google bana makul hiçbir yanıt vermedi, görünüşe göre soruyu doğru şekilde sormadım, bu yüzden bunu kendim bulmak zorunda kaldım.

Bu yüzden bunu sizin değerlendirmenize sundum.

Sorunun özü

Bunu kendim uyguladıktan sonra, JS'nin vidalandığı normal düğmelerin kullanımına dayanan birkaç çözüm buldum.

Planımı hemen hemen aynı şekilde uyguladım ancak standart gönderme türünü kullandım. Her şey çalışıyor gibi görünüyor ve bence benim çözümüm mantıksal olarak daha doğru.

Bu çözüm her ikisinde de eşit derecede işe yarayacak ücretsiz barındırma ve profesyonel barındırma seçseniz bile. Bu yöntem tamamen istemci tarafında uygulanır ve sunucuyu yavaşlatmamalıdır.

Ne istediğimi ve nasıl çalıştığını anlamamı kolaylaştırmak için, farklı sayfalara veri gönderen 2 gönderim içeren bir form biçiminde, gerçekten işe yarayan bir örneği burada bulabilirsiniz.

Öznitelik, düğmenin etiketi olarak görüntülenen bir DOMString içerir. Aksi takdirde düğmelerin gerçek bir değeri yoktur.

Bir değer belirtmezseniz, düğmenin kullanıcı aracısı tarafından seçilen varsayılan bir etiketi olacaktır. Bu etiket muhtemelen "Gönder" veya "Sorguyu Gönder" satırlarına benzer bir şey olacaktır. Burada bir örnek verilmiştir: tarayıcınızda varsayılan etikete sahip gönder düğmesi:

Menctype için ek özellikler

Form verilerini sunucuya gönderirken kullanılacak kodlama yöntemini tanımlayan bir dize. İzin verilen üç değer vardır:

Application/x-www-form-urlencoded Bu, varsayılan değer, gibi bir algoritma kullanarak metni URL kodlamasından sonra form verilerini bir dize olarak gönderir. multipart/form-data Verileri yönetmek için FormData API'sini kullanarak dosyaların sunucuya gönderilmesine olanak tanır. Sen Formunuz file() tipinde herhangi bir öğe içeriyorsa bu kodlama tipini kullanın. metin/düz Düz metin; çoğunlukla yalnızca hata ayıklama için kullanışlıdır, dolayısıyla yapabilirsiniz

gönderilecek verileri kolayca görün.

Belirtilmişse formenctype özniteliğinin değeri, sahip olan formun action özniteliğini geçersiz kılar.

form yöntemi

Formun verilerini gönderirken kullanılacak HTTP yöntemini belirten bir dize; bu değer, sahip olunan formda verilen herhangi bir yöntem özelliğini geçersiz kılar. İzin verilen değerler şunlardır:

Bir URL Al, formaction veya action özelliği tarafından verilen URL ile başlayıp, bir soru işareti ("?") karakteri ekleyerek, ardından formenctype veya formun enctype özelliği tarafından açıklandığı şekilde kodlanan formun verilerini ekleyerek oluşturulur. Bu URL daha sonra bir HTTP isteği kullanılarak sunucuya gönderilir. Bu yöntem, yalnızca ASCII karakterlerini içeren ve hiçbir yan etkisi olmayan basit formlar için iyi çalışır. Bu varsayılan değerdir.

post Formun verileri, bir HTTP post isteği kullanılarak formaction veya action özelliği tarafından verilen URL'ye gönderilen isteğin gövdesine dahil edilir. Bu yöntem, karmaşık verileri ve dosya eklerini destekler. diyalog Bu yöntem şunu belirtmek için kullanılır: düğme yalnızca girişin ilişkili olduğu iletişim kutusunu kapatır ve form verilerini hiçbir şekilde iletmez.

formnovalidat

Varsa formun sunucuya gönderilmeden önce doğrulanmaması gerektiğini belirten bir Boole özelliği. Bu, öğenin sahiplik formundaki Novalidate özelliğinin değerini geçersiz kılar.

formhedefi

Self Yanıtı, formu içeren içerikle aynı göz atma bağlamına yükler. Bu, geçerli belgeyi alınan verilerle değiştirecektir. Bu, hiçbiri belirtilmezse kullanılan varsayılan değerdir.

_blank Yanıtı yeni, adsız bir göz atma bağlamına yükler. Bu genellikle geçerli belgeyle aynı pencerede yer alan yeni bir sekmedir ancak kullanıcı aracısının yapılandırmasına bağlı olarak farklılık gösterebilir.

_parent Yanıtı geçerli yanıtın üst göz atma bağlamına yükler. Eğer ana bağlam yoksa bu, _self ile aynı şekilde davranır.

_top Yanıtı üst düzey tarama bağlamına yükler; bu, mevcut bağlamın en üst atası olan tarama bağlamıdır. Geçerli bağlam en üstteki bağlam ise bu, _self ile aynı şekilde davranır.

Gönder düğmelerini kullanma

Butonlar form göndermek için kullanılır. Özel bir düğme oluşturmak ve ardından davranışı JavaScript kullanarak özelleştirmek istiyorsanız, kullanmanız veya daha iyisi bir öğe kullanmanız gerekir.

Formunuzda düğmeler oluşturmak için öğeler kullanmayı seçerseniz şunu aklınızda bulundurun: eğer içinde yalnızca bir tane varsa, o düğme "gönder" düğmesi olarak kabul edilecektir. Bu nedenle açıkça belirtme alışkanlığınız olmalıdır. hangi düğme gönder düğmesidir.

Basit bir gönder düğmesi

Basit bir gönder düğmesiyle bir form oluşturarak başlayacağız:

Biraz metin gönderelim Bu şu şekilde ortaya çıkıyor: Metin alanına bir miktar metin girmeyi ve ardından formu göndermeyi deneyin.

Gönderim sonrasında veri adı/değer çifti sunucuya gönderilir. Bu örnekte dize text= olacaktır.

kullanıcı metni

, burada "kullanıcı metni", kullanıcı tarafından girilen ve özel karakterleri koruyacak şekilde kodlanan metindir. Verilerin nereye ve nasıl gönderildiği ; Daha fazla ayrıntı için bkz. Form verilerini gönderme.

Gönderme klavye kısayolu ekleme

Formunuzda düğmeler oluşturmak için öğeler kullanmayı seçerseniz şunu aklınızda bulundurun: eğer içinde yalnızca bir tane varsa, o düğme "gönder" düğmesi olarak kabul edilecektir. Bu nedenle açıkça belirtme alışkanlığınız olmalıdır. hangi düğme gönder düğmesidir.

Örneğin, Mac için Firefox'ta Control - Option - S tuşlarına basıldığında Gönder düğmesi tetiklenirken Windows'ta Chrome Alt + S tuşlarını kullanır.

Yukarıdaki örnekteki sorun, kullanıcının erişim anahtarının ne olduğunu bilmemesidir! Bu özellikle doğrudur çünkü değiştiriciler genellikle çakışmaları önlemek için standart değildir. Bir site oluştururken, bu bilgileri site tasarımına müdahale etmeyecek şekilde sağladığınızdan emin olun (örneğin, site erişim anahtarlarının ne olduğuna ilişkin bilgilere işaret eden, kolay erişilebilir bir bağlantı sağlayarak). Erişilebilirlik açısından tam bir çözüm olmasa da, düğme (başlık özelliğinin kullanılması) da yardımcı olabilir.

Gönder düğmesini devre dışı bırakma ve etkinleştirme

Bir gönder düğmesini devre dışı bırakmak için, devre dışı bırakılan genel özelliği şu şekilde belirtmeniz yeterlidir:

Devre dışı seçeneğini true veya false olarak ayarlayarak düğmeleri çalışma zamanında etkinleştirebilir ve devre dışı bırakabilirsiniz; JavaScript'te bu, btn.disabled = true veya btn.disabled = false gibi görünür.

Doğrulama

Gönder düğmeleri kısıtlama doğrulamaya katılmaz; kısıtlanacak gerçek bir değerleri yoktur.

Örnekler

Yukarıda basit örneklere yer verdik. Gönder düğmeleri hakkında söylenecek başka bir şey yok. Bu tür bir kontrole bazen "basit düğme" denmesinin bir nedeni vardır.

Özellikler Şartname Durum Açıklamaları
HTML Yaşam Standardı
Bu spesifikasyondaki "" tanımı.		 Yaşam Standardı
HTML5
Bu spesifikasyondaki "" tanımı.		 Tavsiye
Tarayıcı uyumluluğu

Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız lütfen https://github.com/mdn/browser-compat-data adresine göz atın ve bize bir çekme isteği gönderin.

GitHub'daki uyumluluk verilerini güncelleyin

Masaüstü Mobil Chrome Edge Firefox Internet Explorer Opera Safari Android web görünümü Android için Chrome Android için Firefox Android için Opera iOS'ta Safari Samsung Internettype = "gönder"
Chrome Tam destek 1Edge Tam destek EvetFirefox Tam destek 1

bir grup seçenek arasından seçim yapmanın bir yolu var mı?

Çocuk Etiketi Çocuk Etiketi

7 54

Keavon

7 cevap:

Bu, html standardında desteklenene kadar aşağıdakiler de dahil olmak üzere tüm yanıtlar sorunlu olmuştur:

  • Çocukların seçeceği sınıf nitelikleri ve stilin bir öğeye nasıl uygulanacağı, tarayıcıya ve sürümüne göre değişir.
  • c öneki, seçilen seçenekten daha dar bir öğe seçerseniz, görsel efekt okunabilir metnin sağ tarafta gizlenmesi hoş olmayacaktır (aşağıdaki örneğe bakın).
  • Uyguladığınız herhangi bir stil, tarayıcı kullanıcısının alışık olduğu stille tam olarak eşleşmeyebilir. Kalın ve italik Firefox'tur ancak her tarayıcı için geçerli değildir. Birçok tarayıcı, optgroup'un seçilmediğini göstermeye yardımcı olmak için gri dahil olmak üzere stil uygular
  • seçme optgroup etiketi kavramı mutlaka kullanıcının beklediği gibi olmayacaktır.

    • Bu beni şu sonuca götürdü daha iyi yol Bu sorunu aşmak için, ya sitenizdeki tüm seçimler için UI-Selectable gibi bir kitaplık kullanın (tutarlılık için) ya da tüm çocukların seçimini net bir açıklamayla temsil etmek için optgroup'taki ilk seçeneği kullanın (ör. "tüm İsveç arabaları") ):

    TÜM Çocuk Çocuk Etiketi 1 Çocuk Etiketi 2 .my-select ( width: 60px; ) Ebeveyn Çocuk

    biraz farklı bir çözüm..

    OptionGroup ( font-weight: kalın; ) Ana Etiket Çocuk Etiketi1 Çocuk Etiketi2

    answer@grifos, WebKit tarayıcılarında desteklenmez ve IE 11'de test edildiğinde çalışmaz.

    bir öneri, sırasız/sıralı bir liste kullanmak ve bunu CSS ile stillendirmek ve ardından JavaScript/jQuery kullanarak işlevsellik eklemek olabilir.

    Geçmişte bunun iyi bir uygulamasını görmüştüm, çok şık görünebilir!

    bu, tercih gruplarını seçebilme özelliğine sahip bir açılır listenin çıplak hissini verecektir. Çok basit tuttum ama siz dilediğiniz gibi şekillendirebilirsiniz.

    Gizle ( display:none; ) .show ( display:block; ) .selected.button ( display:block; font-weight: kalın; ) butonu ( text-align: left; min-width: 200px; sol kenar boşluğu: 10px ; kenarlık: 0 piksel; arka plan: #eee; ekran: blok; ) #value_display ( genişlik: 210 piksel; kenarlık: 1 piksel katı; kenarlık yarıçapı: 4 piksel; sol dolgu: 8 piksel; ) tercih 0 tercih 0 tercih 0-1 seçenek 0-2 seçenek 0-3 seçenek 0-4 seçenek 1 seçenek 1-1 seçenek 1-2 seçenek 1-3 seçenek 1-4 var gösteriliyorSeçenekler = yanlış; var displayID = document.getElementById("value_display").innerHTML; function showOptions() ( if(showingOptions) ( document.getElementById("select_div").className = "hide"; displayOptions = false; ) else ( document.getElementById("select_div").className = "show"; displayOptions = true ; ) ) function select(id)( document.getElementById(id).className = "seçili düğme"; document.getElementById(showingID).className = "gösteri"; displayID = id; document.getElementById("value_display").innerHTML = id; document.getElementById("select_div").className = "gizle";

    Hedef:
    Bugün görevimiz standart "gönder" düğmesini güzel bir düğmeyle değiştirmek. Buton formu gönderir ve “gönder” tipindedir. Elbette türü "submit" yerine "image" olarak değiştirip "src" parametresini ekleyebilirsiniz ancak bugünkü görevimiz "submit" türünü yerinde bırakıp programlı olarak güzel bir buton çizmektir.

    Başvuru:
    Buna neden ihtiyaç duyulabilir? Aynı düğmeye estetik bir görünüm kazandırmak için her şey basit.
    İşte karşılaştırma için. İkinci butonun daha iyi göründüğünü açıkça görebilirsiniz.

    Çözüm:
    Bu amacı gerçekleştirmek için belirtildiği gibi "input" tipini "submit" tipiyle birlikte kullanacağız. Ayrıca yeni sınıfı “*.css” stil sayfasında tanımlamamız gerekecek.
    İşte html dosyasının kodu:

    Ve işte css:

    Süper düğme (
    genişlik:150 piksel;
    yükseklik:40 piksel;
    kenarlık yarıçapı:20px;
    arka plan:#459DE5;
    renk:#fff;
    yazı tipi boyutu:18 piksel;
    imleç:işaretçi;
    }

    Süsleyin:
    Dekorasyon için fareyle üzerine gelindiğinde düğmenin arka plan rengini değiştirmenizi önerebilirsiniz. Kural olarak, tasarımcılar rengi radikal bir şekilde değil, yalnızca daha açık veya daha koyu bir ton olarak değiştirmeyi tavsiye ediyorlar. Bir görevi gerçekleştirirken düğmeyi karartmayı tercih ettim. Bunu yapmak için css'e şunu ekleyin:

    Süper düğme: üzerine gelin(
    arka plan:#358DE5;
    }

    Artık düğme yaşıyor. Statik bir resimde, fareyi hareket ettirdiğinizde renklerdeki fark o kadar fark edilmez ve renk o anda değişerek daha koyu bir gölge oluşturur.

    Düğme çerçevesi sorunu:
    Ve her şey yolunda görünüyor ve hiçbir şeye benzemiyor ve üzerine geldiğimizde kararıyor, ancak tıkladığımızda korkunç bir çerçeve görüyoruz. Bu çerçeve, düğmemiz odaktayken, Sekme düğmesini kullanarak sayfadaki öğeler arasında yinelenen bir çerçeve olduğunda da gözlemlenebilir.
    Bunu yapmak için css'e "hover" gibi 2 sözde sınıf daha yazacağız. Bunlar, düğmeye tıklandığında görünümden sorumlu olan “aktif” sınıflar ve düğmeye odaklanıldığında “odaklanma” sınıfıdır. Ancak bir tuhaflık var, bir girdimiz ve ona atanmış bir sınıfımız olduğundan, aktif olarak kayıt olmamıza gerek yok.
    İşte kod:

    Süper düğme:odaklanma(
    taslak:yok;

    Bu soru muhtemelen forumlardaki EN İYİ 10 sorudan biridir :) Büyük olasılıkla bu, tasarımcının veya müşterinin bir gereksinimidir.

    Yani ilk bakışta çözüm basit:

    Göndermek

    Ancak daha sonra bir sonraki soru ortaya çıkıyor (tuhaf bir şekilde): Ya ziyaretçi için JS devre dışı bırakılırsa?

    Kodumuzu şu şekilde değiştirelim:

    Ve biraz JS ekleyelim:

    addEvent(pencere, "yükle", windowLoad) ;

    /* Çapraz tarayıcı bir olay işleyicisi ekliyor */
    function addEvent(obj, evType, fn) (
    if (obj.addEventListener) (
    obj.addEventListener(evType, fn, false);
    ) else if (obj.attachEvent) (
    obj.attachEvent("açık" + evType, fn);
    }
    }

    /* Elemanın ebeveyn formunu alın */
    işlev getParentForm(obj) (
    while ((obj = obj.parentNode ) ) (
    if (obj.nodeName == "FORM" ) (
    kırmak ;
    }
    }
    nesneyi döndür;
    }

    /* Bağlantı sınıfına sahip tüm gönderme düğmelerini ararız ve bunları bağlantılarla değiştiririz */
    fonksiyon windowLoad() (
    var düğmeleri = document.getElementsByTagName("input" ) ;
    for (var i = 0; i< buttons.length ; i++ ) {


    link.appendChild(document.createTextNode(buttons[ i].getAttribute("value") ));
    link.setAttribute ("href", "#");
    addEvent(bağlantı, "tıklayın", linkClick) ;

    var ebeveyn = düğmeler[ i].parentNode ;
    parent.removeChild (düğmeler[ i] ) ;
    ebeveyn.appendChild(bağlantı) ;
    }
    }
    }

    /* Bağlantıya tıklayarak formu gönderin */
    fonksiyon linkClick(e) (
    var e = pencere.olay ||
    e;
    var hedef = e.hedef ||
    e.srcElement;

    var parentForm = getParentForm(target) ;
    }

    parentForm.submit();

    Göndermek

    if (window.event) (e.returnValue = false;) else (e.preventDefault();)

    Artık JS devre dışı bırakılırsa ziyaretçi bağlantı yerine bir düğme görecek ve formu göndermeye devam edebilecektir. Ama burada durmayacağız. JS devre dışı olsa bile düğmenin bir bağlantı gibi görünmesini sağlayalım. Düğmeye stil vermek için etiketi düğme olarak değiştireceğiz ve Firefox'ta metnin altını çizebilmemiz için aralık gerekiyor.
    for (var i = 0; i< buttons.length ; i++ ) {
    JS kısmını da buna göre değiştireceğiz.
    var düğmeler = document.getElementsByTagName("düğme");
    if (buttons[ i].getAttribute("type" ) == "gönder" && düğmeleri[ i].className == "link" ) (

    var link = document.createElement("a");

    link.appendChild(document.createTextNode(buttons[ i].firstChild.firstChild.nodeValue));
    CSS şöyle görünecek:
    düğme.link(
    /* IE'deki girintiyi kaldırmak için ilk iki özelliğe ihtiyaç vardır */

    taşma: görünür;
    genişlik: otomatik;
    /* Girintiyi kaldır */

    kenar boşluğu: 0;
    dolgu: 0;
    /* Tüm buton tasarım öğelerini kaldır */

    arka plan: yok;
    sınır: yok;
    }

    /* Bağlantılar için normal imleç */
    imleç: işaretçi;
    /* Bağlantı genellikle altı çizili olarak gösterilir */
    düğme.bağlantı aralığı(
    }

    renk : #00f;

    metin dekorasyonu: altı çizili;

    Firefox için ayrıca -moz-user-select: text; böylece düğme metni vurgulanabilir, ancak bunun gerekli olduğundan şüpheliyim.

  • Geri kalan stiller spesifik tasarıma bağlı olacaktır.
  • Birkaç not:
  • Aktif, ziyaret edilen ve IE6 için sözde sınıfları uygulamak ve düğmenin üzerine gelmek mümkün olmayacaktır.

    • Bir form için birden fazla düğme IE6'da normal şekilde çalışmaz
    JS olmadan da yapabilirsiniz. Her şey bağlantının doğallığının sizin için ne kadar önemli olduğuna bağlıdır.