Sayfa içeriği
Düğme türleri
Genel olarak formlara eklenebilen 4 önemli buton türü vardır ve hepsi <input> etiketi ile eklenebilir.
Gösterilecek buton tipini belirtmek için etikete type özelliğini eklemelisin ve bu değerlerinden birini aşağıdaki gibi iletmelisin:
- <input type="button"> Normal bir düğme için kullanabilirsin.
- <input type="submit"> Form verilerini göndermek için özel bir düğme için kullanabilirsin.
- <input type="reset"> Formdaki meta verileri sıfırlamak için özel bir düğme eklemek için kullanabilirsin.
- <input type="file"> Kullanıcının cihazında bir dosya seçmesini sağlamak için özel bir düğme eklemek için kullanabilirsin.
Not: Varsayılan olarak, input etiketinin biçimini belirtmezsen, bir normal metin kutusu <input type="text"> görüntülemek istediğin kabul edilecektir.
Normal düğme eklemek
Normal bir düğme eklemek için <button type="button">text</button> etiketini veya <input type="button" value="text"> etiketini kullanabilirsin.
Elbette her iki durumda da text metninin olduğu yerde buton üzerinde görünmesini istediğin metni iletmelisin.
Aralarındaki temel fark, <button> etiketinin içine yerleştirilebilirken, <input> etiketinin yalnızca içeride metin olabilmesidir.
Basit bir örnek olarak, düğmede bir simge görüntülemek için <button> etiketinin içine bir <img> etiketi koyabilirsin.
Teknik Bilgi
Butona tıklandığında ne olacağını belirlemeye istiyorsan, bunun için JavaScript kullanmanı gerekir.
Şimdi endişelenmeyelim çünkü gelecekte JavaScript çalışırken öğreneceğin en kolay şeylerden biri bu.
Aşağıdaki örnekte, birincisi <button> etiketi ve ikincisi <input> etiketi olan iki düğme görüntülüyoruz.
- <button type="button">Button 1</button>
- <input type="button" value="Button 2">
Aşağıdaki örnekte, birincisi <button> etiketi ve ikincisi <input> etiketi olan iki düğme görüntülüyoruz.
Her iki düğmeye de tıkladığında, kullanıcıya "Merhaba dünya" metniyle birlikte bir uyarı mesajı görüntülenecektir.
İki butona onclick özelliğini ekledim ve javascript kodu ile tıklandığında görüntülenmesini istediğimiz yazıyı ilettim.
- <button type="button" onclick="alert('Merhaba dünya');">Mesajı görüntüle</button>
- <input type="button" value="Mesajı görüntüle" onclick="alert('Merhaba dünya');">
Aşağıdaki örnekte butonun içine bir simge ekledim.
- <button type="button">başlat<img src="start.png"></button>
Form verilerini göndermek için bir düğme eklemek
Tıklandığında siteye form verilerini otomatik olarak gönderen bir düğme eklemek için, türünün submit olduğunu belirten <input> etiketini kullanırız.
Varsayılan olarak, submit tipi butonda görünecek metni belirtmezsen, submit kelimesi üzerinde görünecektir.
Üzerinde görünecek kelimeyi belirtmek için, ona value özelliğini ekleyebilir ve görüntülenmesini istediğin metni değeri olarak iletebilirsin.
Aşağıdaki örnekte, form verilerini göndermek için özel bir düğme ekledim.
- <input type="submit" value="Login">
Form değerlerini sıfırlamak için düğme eklemek
Form elemanlarının girilen değerlerini silen ve tıklandığında otomatik olarak ilk değerlerine döndüren bir buton eklemek için değerini reset belirterek <input> etiketini kullanıyoruz.
Varsayılan olarak, sıfırlama düğmesinde görünecek metni belirtmezsen, üzerinde reset kelimesi görünecektir.
Üzerinde görünecek kelimeyi belirtmek için, ona value özelliğini ekleyebilir ve görüntülenmesini istediğin metni değeri olarak iletebilirsin.
Aşağıdaki örnekte, ilk form değerlerini döndürmek için özel bir düğme ekledim.
- <input type="reset" value="Değerleri Sıfırla">
Kullanıcının bilgisayarından bir dosya seçmesini sağlayan bir düğme eklemek
Kullanıcının, tıkladığında cihazında bir dosya seçmesini sağlayan bir düğme eklemek için, türünün dosya olduğunu belirten <input> etiketini kullanırız.
Not: Bu özel düğmede, bu metnin sabit olduğunu ve değiştiremeyeceğini belirten "Dosya Seç" metni görünür.
Aşağıdaki örnekte, kullanıcının bilgisayarında bir dosya seçmesini sağlayan bir düğme ekledim.
- <input type="file">
Not: Görüntülenen metnin tarayıcının diline göre değiştiğini unutma.