Skip to content

Formlarda HTML Düğmeleri Yapma

28 de Mayıs de 2021

HTML formları, web sitenize etkileşim eklemenin en temel yollarından biridir. Okuyucularınızdan sorular sorabilir ve yanıtlar isteyebilir, veritabanlarından ek bilgi sağlayabilir, oyunlar kurabilir ve daha fazlasını yapabilirsiniz. Formlarınızı oluşturmak için kullanabileceğiniz bir dizi HTML öğesi vardır. Formunuzu oluşturduktan sonra, bu verileri sunucuya göndermenin veya yalnızca form eylemini çalıştırmaya başlamanın birçok farklı yolu vardır. Bunlar, formlarınızı göndermenin birkaç yoludur:

  • Bu, sunucuya veri almanın en yaygın yöntemidir, ancak çok sade görünebilir.
  • Bir resim kullanmak, gönder düğmenizi sitenizin stiline uydurmayı çok kolaylaştırır. Ancak bazı kişiler bunu bir gönder düğmesi olarak tanımayabilir.
  • Düğme INPUT etiketi, image INPUT etiketiyle aynı birçok seçeneği sunar, ancak daha çok standart gönderme türüne benziyor. JavaScript’in etkinleştirilmesi gerekir.
  • BUTTON etiketi, INPUT etiketinden daha çok yönlü bir düğme türüdür. Bu etiketin etkinleştirilmesi için Javascript gereklidir.
  • COMMAND öğesi HTML5’te yenidir ve komut dosyalarını ve formları ilişkili eylemlerle etkinleştirmek için bir yol sağlar. JavaScript ile etkinleştirilir.

INPUT Öğesi

INPUT öğesi, bir form göndermenin en yaygın yoludur, tek yapmanız gereken bir tür (düğme, resim veya gönderme) seçmek ve gerekirse form eylemine göndermek için bazı komut dosyaları eklemektir.

Eleman aynen böyle yazılabilir. Ancak yaparsanız, farklı tarayıcılarda farklı sonuçlara sahip olacaksınız. Çoğu tarayıcı “Gönder” yazan bir düğme oluşturur, ancak Firefox “Sorgu Gönder” yazan bir düğme yapar.

Düğmenin ne söylediğini değiştirmek için bir özellik eklemelisiniz:

Öğe böyle yazılır, ancak diğer tüm öznitelikleri bırakırsanız, tarayıcılarda görüntülenecek olan tek şey boş bir gri düğmedir. Düğmeye metin eklemek için değer özelliğini kullanın. Ancak bu düğme, JavaScript kullanmadığınız sürece formu göndermez, formu göndermek için bir komut dosyası gerektiren düğme türüne benzer. Bunun dışında bir metin değeri yerine, bir resim kaynak URL’si eklemeniz gerekir.

Düğme Öğesi

BUTTON öğesi, hem bir açılış etiketi hem de bir kapanış etiketi gerektirir. Bunu kullandığınızda, etiketin içine eklediğiniz herhangi bir içerik bir düğme içine alınacaktır. Ardından düğmeyi bir komut dosyasıyla etkinleştirirsiniz. Formu gönder

Düğmenize resimler ekleyebilir veya daha ilginç bir düğme oluşturmak için resimleri ve metni birleştirebilirsiniz. Formu gönder

Komut Öğesi

COMMAND öğesi HTML5 ile yenidir. Bir FORM kullanılmasını gerektirmez, ancak bir form için gönder düğmesi olarak işlev görebilir. Bu öğe, gerçekten formlara ihtiyacınız olmadıkça, form gerektirmeden daha etkileşimli sayfalar oluşturmanıza olanak tanır. Komutun bir şey söylemesini istiyorsanız, bilgiyi bir etiket niteliğine yazarsınız. label = “Formu Gönder”>

Komutunuzun bir resimle temsil edilmesini istiyorsanız, icon özelliğini kullanırsınız.

Önceki sayfada öğrendiğiniz gibi, HTML formlarını göndermenin birkaç farklı yolu vardır. Bu yöntemlerden ikisi INPUT etiketi ve BUTTON etiketidir. Bu öğelerin her ikisini de kullanmak için iyi nedenler var.

Giriş Öğesi

Etiket, bir form göndermenin en kolay yoludur. Etiketin ötesinde hiçbir şeye ihtiyaç duymaz, bir değer bile. Bir müşteri düğmeye tıkladığında, otomatik olarak gönderir. Herhangi bir komut dosyası eklemenize gerek yoktur, tarayıcılar bir GİRİŞ gönder etiketi tıklandığında formu göndereceğini bilir.
Sorun şu ki, bu düğme çok çirkin ve sade. Görüntü ekleyemezsiniz. Onu diğer herhangi bir öğe gibi şekillendirebilirsiniz, ancak yine de çirkin bir düğme gibi hissedebilir. Formunuzun JavaScript’in kapalı olduğu tarayıcılarda bile erişilebilir olması gerektiğinde INPUT yöntemini kullanın.

BUTTON Öğesi

BUTTON öğesi, form göndermek için daha fazla seçenek sunar. Bir BUTTON öğesinin içine herhangi bir şey koyabilir ve bunu bir gönder düğmesine dönüştürebilirsiniz. Çoğu kişi resim ve metin kullanır. Ancak bir DIV oluşturabilir ve isterseniz tüm bu şeyi bir gönder düğmesi yapabilirsiniz.

BUTTON öğesinin en büyük dezavantajı, formu otomatik olarak göndermemesidir. Bu, onu etkinleştirmek için bir tür komut dosyası olması gerektiği anlamına gelir. Ve bu nedenle INPUT yönteminden daha az erişilebilirdir. JavaScript’i açık olmayan hiçbir kullanıcı, yalnızca bir BUTTON öğesi içeren bir formu gönderemez.

Kritik olmayan formlarda BUTTON yöntemini kullanın. Ayrıca bu, bir forma ek gönderim seçenekleri eklemenin harika bir yoludur.

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “Formlarda HTML Düğmeleri Yapmak.” ThoughtCo, Mayıs. 25, 2021, thinkco.com/buttons-on-forms-3464313.
Kyrnin, Jennifer. (2021, 25 Mayıs). Formlarda HTML Butonları Yapmak. Https://www.thoughtco.com/buttons-on-forms-3464313 adresinden erişildi
Kyrnin, Jennifer. “Formlarda HTML Düğmeleri Yapmak.” ThoughtCo. https://www.thoughtco.com/buttons-on-forms-3464313 (28 Mayıs 2021’de erişildi).