Kullanıcıdan alınan bilginin alınıp işlenmesi veya sunucuya yüklenmesi için button etiketinden yararlanılır.

<button id="btnGoster" class="btn btn-info">
    Göster
</button>

Projeyi kaydedip çalıştıralım. Butonun metin kutusunun hemen altında yer aldığını görürsünüz. Bu sorunu çözmek için metin kutusundan sonra <br /> yazalım. Kullanıcının girdiği ismi görüntülemek için id değeri sonuc olan bir tane label ekleyelim. Buton ile arasına boşluk koymak amacıyla araya <br /> ekleyelim.

<br />
<label id="sonuc"></label>

Web sayfasının tasarım kısmını tamamladık. Ancak etiketler arasında düzeni sağlamak amacıyla sürekli <br /> etiketini kullandık. Bu da web sayfasının düzenini bozdu. Ayrıca form sayfasının düzenli bir şekilde görüntülenmesi zorlaştı. Bu sorunların hepsini çözmek için table etiketinden yardım alabiliriz. Yapılan bu tanımlama işlemlerini table etiketiyle yapalım.

<article class="container">
    <table class="table table-bordered" style="width:400px; 
margin:auto">
        <caption class="text-center bg-info text-white fw-bold 
caption-top">
            Üniversite Bilgileri Düzenleme Ekranı
        </caption>
        <tbody>
            <tr>
                <td>
                    <label for="isim">Üniversite Adı:</label>
                    <input type="text" class="form-control" id="isim" 
autofocus placeholder="İsim giriniz..." />
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnGoster" class="btn btn-info">
                        Göster
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <label id="sonuc"></label>
                </td>
            </tr>
        </tbody>
    </table>
</article>

Projeyi kaydedip çalıştıralım. Web sayfasının daha düzenli bir şekilde oluşturulduğunu görürsünüz. Web sayfasının tasarım kısmını tamamladık. Şimdi kullanıcının metin kutusuna girdiği değeri kodlar yardımıyla alma işlemine gelelim. Bu işlemi gerçekleştirmek için javascript ve jquery kodlarından yararlanacağız.

Javascript Kodlarıyla İşlemleri Gerçekleştirme

Web sayfasından girilen değeri kodlar yardımıyla işlemek için Button nesnesinin Click olayından yararlanılır. Bu uygulamada btnGoster butonuna ait click olayından yararlanacağız. Şimdi bu tanımlamayı yapalım.

<button id="btnGoster" class="btn btn-info" onclick="listele();">
    Göster
</button>

Burada tanımlanan listele() fonksiyonunun script bloğu altında tanımlanması gerekir. Şimdi onu yapalım.

<script>
    function listele() {

    }
</script>

Web sayfasında kullanıcının değer girişi için kullanılan etiketimiz metin kutusuydu. Metin kutusunun içindeki değeri saklamak için ad isminde bir string değişken tanımlayalım.

function listele() {
    var ad = "";
}

Kullanıcının girdiği değeri almak için birden fazla yöntem vardır. Biz bunlardan en yaygın olanı kullanacağız. Metin kutusunun id değerini almak için document komutunun getElementById() özelliğinin value değeri kullanılmaktadır. Tanımlama işlemini yapalım.

function listele() {
    var ad = "";
    ad = document.getElementById("isim").value;
}

Değişken yardımıyla aldığımız bu değeri id değeri sonuc olan label etiketiyle görüntüleyelim. 

function listele() {
    var ad = "";
    ad = document.getElementById("isim").value;
    sonuc.innerText = "Girilen Üniversite Adı : " + ad;
}

jQuery Kodlarıyla İşlemleri Gerçekleştirme

Web sayfasından girilen değeri kodlar yardımıyla işlemek için Button nesnesinin Click olayından yararlanılır. Bu uygulamada btnGoster butonuna ait click olayından yararlanacağız. Şimdi bu tanımlamayı yapalım.

<button id="btnGoster" class="btn btn-info" onclick="listele();">
    Göster
</button>

Burada tanımlanan listele() fonksiyonunun script bloğu altında tanımlanması gerekir. Şimdi onu yapalım.

<script>
    function listele() {

    }
</script>

Web sayfasında kullanıcının değer girişi için kullanılan etiketimiz metin kutusuydu. Metin kutusunun içindeki değeri saklamak için ad isminde bir string değişken tanımlayalım.

function listele() {
    var ad = "";
}

Kullanıcının girdiği değeri almak için birden fazla yöntem vardır. Biz bunlardan en yaygın olanı kullanacağız. Metin kutusunun id değerini almak için document komutunun getElementById() özelliğinin value değeri kullanılmaktadır. Tanımlama işlemini yapalım.

function listele() {
    var ad = "";
    ad = $("#isim").val();
}

Değişken yardımıyla aldığımız bu değeri id değeri sonuc olan label etiketiyle görüntüleyelim. 

function listele() {
    var ad = "";
    ad = document.getElementById("isim").value;
    $("#sonuc").html("Girilen Üniversite Adı : " + ad);
}

Genellikle jQuery kodları ve fonksiyonları sayfa yüklenir yüklenmez tanımlanır ve sayfanın çalışması daha hızlı hale gelir. Şimdi bu işlemi tanımlayalım. 

$(function () {
    $("#btnGoster").click(function () {
        var ad = "";
        ad = $("#isim").val();
        $("#sonuc").html("Girilen Üniversite Adı : " + ad);
    });
});

Projemizi kaydedip çalıştırdıktan sonra üniversite adını girelim ve Göster butonuna tıklayalım. Ekrana aşağıdaki gibi bir pencere gelir.