Form Olayları

onfocus ve onblur

Bu iki nitelik sırasıyla bir form elemanına odaklanıldığında ve bir form elemanının odağından çıkıldığında script çalıştırmak için kullanılır. Aşağıdaki örnekte "İsim" kutusuna tıkladığınızda bir mesaj kutusu açılacaktır. Sonrasında başka bir yere tıkladığınızda, örneğin soyisim kutusuna, bir başka mesaj kutusu gösterilecektir.

<!DOCTYPE html>
<html>
<head>
<title>onfocus-onblur</title>
</head>
<body>
<form>
    İsim: <input type="text" name="isim" onfocus="focus_orn()" onblur="blur_orn()">
    Soyisim: <input type="text" name="soyisim">
</form>
<script>
    function focus_orn(){
        alert("İsminizi doğru bir şekilde girin.");
    } 
    function blur_orn(){
        alert("İsminizi doğru girdiğinizden emin olun.");
    }
</script>
</body>
</html>

oninput ve onchange

Bu iki nitelik sırasıyla bir form elemanına girdi verildiğinde ve bir form elemanının değeri değiştirildiğinde script çalıştırmak için kullanılır. 

<!DOCTYPE html>
<html>
<head>
<title>oninput-onchange</title>
</head>
<body>
<form>
    İsim: <input type="text" name="isim">
    Soyisim: <input type="text" name="soyisim">
    Ülke: 
    <select name="ulke" onchange="change_orn()">
        <option value="turkiye">Türkiye</option>
        <option value="almanya">Almanya</option>
        <option value="belcika">Belçika</option>
    </select>
    Şehir: <input type="text" name="sehir" oninput="input_orn()">
</form>
<script>
    function change_orn(){
        alert("Türkiye dışında bir ülke girmek üzeresiniz.");
    }
    function input_orn(){
        alert("Türkiye dışında yaşıyorsanız burayı boş bırakabilirsiniz.");
    }
</script>
</body>
</html>

onselect

Bu nitelik bir elemandaki yazılar seçildiğinde script çalıştırmak için kullanılır.

oninvalid

Bu nitelik bir forma geçersiz girdi girildiğinde script çalıştırmak için kullanılır. Aşağıdaki örnekte "Puan" kısmına beşin katlarında bir değer girilmesi beklenmektedir. Bunun dışında bir değer girilip form gönderilecek olursa bir mesaj kutusu görüntülenecektir. Aşağıdaki örnekte ayrıca onselect niteliği de yer almaktadır.

<!DOCTYPE html>
<html>
<head>
<title>oninvalid-onselect</title>
</head>
<body>
<form>
    İsim: <input type="text" name="isim">
    Soyisim: <input type="text" name="soyisim">
    Puan: <input type="number" name="puan" step="5" oninvalid="invalid_orn()">
    Yorumlar: <input type="text" name=yourm" value="Bu yazıyı seçin" onselect="select_orn()">
    <input type="submit" value="Gönder">
</form>
<script>
    function invalid_orn(){
        alert("Girdiğiniz puan değeri 5'in katları olmalıdır.");
    }
    function select_orn(){
        alert("Yazıyı seçtiniz.");
    }
</script>
</body>
</html>

onreset ve onsubmit

Bu iki nitelik sırasıyla form sıfırlama butonu ile sıfırlandığında ve gönderildiğinde script çalıştırmak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>onsubmit-onreset</title>
</head>
<body>
<form onreset="reset_orn()" onsubmit="submit_orn()">
    İsim: <input type="text" name="isim">
    Soyisim: <input type="text" name="soyisim">
    <input type="submit" value="Gönder">
    <input type="reset" value="Sıfırla">
</form>
<script>
    function reset_orn(){
        alert("Form sıfırlandı.");
    }
    function submit_orn(){
        alert("Form gönderildi.");
    }
</script>
</body>
</html>