Sayfaya buton eklemenin birkaç farklı yolu vardır. HTML'de birçok elementten CSS ve javascript kullanarak buton yapılabilir. Ama buton için özel iki tag bulunur bunlar input tagı ve button tagıdır.
input Tagının Buton Olarak Kullanımı
input tagının type özelliğine button değeri verilirse eklendiği yerde buton olarak görünür. Buton texti ise value özelliğine verilen değerdir. Formda gönderme butonu olarak kullanılacaksa form tagı içindeki input tagı type özelliğine submit değeri verilir ve value özelliğine buton texti yazılır. Bu şekilde butona tıklanınca form verisi gönderilir.
input tagının submit buton olarak örnek kullanımı: Kod form tagları arasına yazılırssa tıklandığında form verisini gönderir. HTML form oluşturma sayfasından form oluşturmanın detaylarına bakabilirsiniz.
<input type="submit" value="Gönder" />
<input type="button" value="Test" onclick="butonfonksiyonu()" />
<script> function butonfonksiyonu(){ alert("Butona basildi."); } </script>
button Tagının Kullanımı
button tagı da input tagına benzer type özelliğine button, reset veya submit değerlerinden biri verilerek buton yapılır. submit form göndermede, reset form resetlemede button ise javascript ile birlikte kullanılır.
<button type="button" onclick="butonfonksiyonu()">Test</button> <script> function butonfonksiyonu(){ alert("Butona basildi."); } </script>
span Tagından Buton Yapımı
Buton yapımı için önce span tagına CSS ile style veriyoruz. Daha sonra onclick olayına javascript fonksiyonunu yazıyoruz böylece span üzerinde tıklandığında bir buton gibi çalışıyor. Bunu div,a,p gibi birçok tagla yapabilirsiniz.
span tagından buton yapım örneği:
<style> .btn{ display: inline-block; padding: 4px 8px; border: 1px #706f6f solid; border-radius: 4px; cursor: default; } .btn:hover{ background-color: #cfcfcf; } </style> <span class="btn" onclick="butonfonksiyonu()">Test</span> <script> function butonfonksiyonu(){ alert("Butona basildi."); } </script>
