Dinamik Form Kontrol
Dinamik Form Kontrol

Dinamik Form Kontrol

İletişim veya üye formu gibi web sayfanızın form sayfalarında sayfa değiştirmeden dinamik form kutuları kontrolü yapın.

Web sayfalarınızda form kontrolü yapmak için pek çok yol vardır. Bazen formu gönderip işlem sayfasından kontrolü yaparız bazense sayfayı yenilemeden dinamik bir şekilde yapabiliriz. Bu indireceğiniz örnekte dinamik bir form kontrol yapıyor. Dosyada bir js, bir form html dosyası, stil dosyası ve işlem dosyası var. Bu örnek formu inceleyerek kolayca kendi sitenizdeki formlara uydurabilirsiniz.

Öncelikle aşağıdaki kodları form sayfanızın bulunduğu dosyanın head kodları arasına yerleştirin.

<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>

Örnek formda şu şekilde;

 <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post"> <label for="name">Full Name:</label> <input type="text" name="name" id="name" /> <label for="email">Email Address:</label> <input type="text" name="email" id="email" /> <label for="gender">Gender:</label> <select name="gender" id="gender"> <option value ="">Please Select</option> <option value ="male">Male</option> <option value ="female">Female</option> </select> <label for="message">Message:</label> <input type="text" name="message" id="message" /> <input type="submit" value="Submit" class="submit" /> </form>

Js dosyamızda da;

 var name = form.name.value; var email = form.email.value; var gender = form.gender.value;

satırlarına sizin formunuzda yer alan input alanlarını ekleyin. Örneğin mesaj formundaki konu kutusu olsun.

 var konu = form.konu.value;

Şeklide ekleme yapın yada yukarıdakileri sizin formunuza göre düzenleyin. Bu yaptığınız değişiklerin çalışması için alt satırlardada ekleme yapın yada düzenleme yapın.

 if(konu== "") { inlineMsg('konu','<strong>Hata</strong><br />Lütfen mesajınızın konusunu yazınız.',2); return false; }

gibi kod ekleyin yada var olanları kendi input alanlarına göre düzenleyin.

Örnek dosyada çalışan bir örnek var zaten. Kolayca düzenleyip sitenize ekleyebilirsiniz.


Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 512 kez okundu.

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın al