Forma Ileri Geri Butonu Ekleme

Forma İleri Geri Butonu Ekleme

Forma ileri geri butonu eklemek, kullanıcıların formun farklı bölümlerinde kolayca gezinmesini sağlayan önemli bir özelliktir. Bu, özellikle uzun formlar veya birden fazla sayfadan oluşan formlar için yararlıdır.

İleri Geri Butonu Ekleme Adımları

  1. HTML Koduna Buton Ekleme:

“`html



“`

Bu kod, forma iki adet buton ekler: “İleri” ve “Geri”.

  1. CSS ile Butonları Tasarlama:

“`css
input[type=”submit”] {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
color: #333;
cursor: pointer;
}

input[type=”submit”]:hover {
background-color: #e0e0e0;
}
“`

Bu kod, butonların görünümünü özelleştirir.

  1. JavaScript ile Butonlara İşlev Ekleme:

“`javascript
const form = document.querySelector(‘form’);

const nextButton = document.querySelector(‘input[value=”İleri”]’);
const previousButton = document.querySelector(‘input[value=”Geri”]’);

let currentPage = 1;
const totalPages = 3;

nextButton.addEventListener(‘click’, () => {
if (currentPage < totalPages) {
currentPage++;
updateFormPage();
}
});

previousButton.addEventListener(‘click’, () => {
if (currentPage > 1) {
currentPage–;
updateFormPage();
}
});

function updateFormPage() {
// Formun şu anki sayfasını güncelle.
}
“`

Bu kod, butonlara tıklandığında formun sayfasını günceller.

Faydalı Siteler ve Dosyalar

Yayımlandı

kategorisi