Formlarda HTML Düğmeleri Oluşturma

Formları Göndermek İçin Giriş Etiketi Kullanımı

HTML formları, web sitenize etkileşim katmanın en temel yollarından biridir. Sorularınızı sorabilir, okuyucularınızdan cevap isteyebilir, veritabanlarından ek bilgi sağlayabilir, oyunlar kurabilir ve daha fazlasını yapabilirsiniz. Formlarınızı oluşturmak için kullanabileceğiniz birçok HTML öğesi vardır. Ve formunuzu oluşturduktan sonra, bu verileri sunucuya göndermek için birçok farklı yol var veya sadece çalışan form eylemini başlat.

Bunlar formlarınızı gönderebileceğiniz çeşitli yollardır:

INPUT Elemanı

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

öğesi bunun gibi yazılabilir. Fakat eğer yaparsanız, farklı tarayıcılarda farklı sonuçlara sahip olacaksınız. Çoğu tarayıcı “Gönder” yazan bir düğme yapar, ancak Firefox “Gönderme Gönder” yazan bir düğme yapar. Düğmenin söylediklerini değiştirmek için bir özellik eklemelisiniz:

value = "Formu Gönder">

Öğe bunun gibi yazılır, ancak diğer tüm öznitelikleri bırakırsanız, tarayıcılarda görüntülenecek her şey boş bir gri düğmedir. Düğmeye metin eklemek için değer özelliğini kullanın. Ancak JavaScript kullanmıyorsanız bu düğme formu göndermez.

onclick = "() teslim;">

Formu göndermek için bir komut dosyası gerektiren düğme türüne benzer. Bir metin değeri yerine, bir resim kaynağı URL'si eklemeniz gerekir.

src = "submit.gif">

BUTTON Elemanı

BUTTON öğesi hem bir açılış etiketini hem de bir kapanış etiketini gerektirir. Bunu kullandığınızda, etiketin içine dahil ettiğiniz herhangi bir içerik bir düğmeyle kapatılacaktır. Ardından düğmeyi bir komut ile etkinleştirirsiniz.

Formu gönder

Daha ilginç bir düğme oluşturmak için düğmelerinize resim ekleyebilir veya görüntüleri ve metni birleştirebilirsiniz.

Formu gönder

KOMUT Öğesi

COMMAND öğesi, HTML5 ile yeni. Kullanılacak bir FORM gerektirmez, ancak bir form için bir gönderme düğmesi olarak işlev görebilir. Bu öğe, formlara gerçekten 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, bilgileri bir etiket özniteliğine yazarsınız.

label = "Formu Gönder">

Komutunuzun bir görüntü tarafından temsil edilmesini istiyorsanız, simge özniteliğini kullanırsınız.

simgesi = "submit.gif">

Bu makale HTML Formları Eğitimi’nin bir parçasıdır . HTML formlarını nasıl kullanacağınızı öğrenmek için tam eğiticiyi okuyun.

HTML formları, bir önceki sayfada öğrendiğiniz gibi göndermenin birkaç farklı yolunu sunar. Bu yöntemlerden ikisi INPUT etiketi ve BUTTON etiketidir. Bu unsurların her ikisini de kullanmanın iyi sebepleri vardır.

INPUT Elemanı

Etiket, bir form göndermenin en kolay yoludur. Bu, etiketin ötesinde bir değer bile gerektirmez. Bir müşteri bu düğmeyi tıkladığında otomatik olarak gönderir. Herhangi bir komut dosyası eklemeniz gerekmez; tarayıcılar, gönderen bir INPUT etiketi tıklandığında formu göndermeyi bilir.

Sorun şu ki bu buton çok çirkin ve sade. Görüntü ekleyemezsiniz. Diğer herhangi bir öğe gibi onu da stilleyebilirsin, ama yine de çirkin bir düğme gibi hissedebilirsin.

Formunuz JavaScript’in kapalı olduğu tarayıcılarda bile erişilebilir olduğunda INPUT yöntemini kullanın.

BUTTON Elemanı

BUTTON öğesi, formları göndermek için daha fazla seçenek sunar. Bir BUTTON öğesinin içine herhangi bir şey koyabilir ve bir gönder düğmesine dönüştürebilirsiniz. En yaygın olarak insanlar resim ve metin kullanır. Ama bir DIV yaratabilir ve istediğin gibi tüm şeyi gönder düğmesine basabilirsin.

BUTTON öğesinin en büyük dezavantajı, formu otomatik olarak göndermemesidir. Bu, onu etkinleştirmek için bir çeşit komut dosyası olması gerektiği anlamına gelir. Ve böylece INPUT yönteminden daha az erişilebilir. JavaScript'i açık olmayan herhangi bir kullanıcı, göndermek için yalnızca bir BUTTON öğesiyle bir form gönderemez.

Kritik olmayan formlarda BUTTON yöntemini kullanın. Ayrıca, bu bir formda ek gönderme seçenekleri eklemek için harika bir yoldur.

Bu makale HTML Formları Eğitimi’nin bir parçasıdır. HTML formlarını kullanma hakkında daha fazla bilgi için okuyun