HTML Form Araçları

Herkese merhaba! Bugün HTML form araçları ve bu araçların kullanım amaçlarını inceleyeceğiz. Bildiğiniz üzere HTML görsellikte zayıf olsa da Form araçları HTML için görsel güzellik katmaktadır. Fakat bu yazıda yalnızca syntax (Söz Dizimi) ve kullanım amacı bakımından inceleme yapacağız. Daha sonra bu araçların ekstra kullanabileceğimiz özelliklerini ve bu araçlarla ilgili örnekleri bir sonraki yazıda uygulayacağız. Öyleyse daha fazla vakit kaybetmeden hemen başlayalım.

HTML’in en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir. Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. Gerçek hayattaki formlar gibi de düşünebiliriz. Örneğin bir iş başvurusunda bulunacaksak bizden istenilen bilgileri bize verilen kağıda giriyoruz. Ve bu sayede karşı taraf bizimle iletişime geçebilir veya hakkımızda bilgi sahibi olabilir.

Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir. Sonrasında web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Son olarak program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

Aslında bakarsak formları yalnızca bilgi girişinde kullanmayız. Bazen de formları bilgi gösterme maksadı ile de kullanabiliriz.

Bir form oluşturmak için <form>...</form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir. Yani bir genel kullanım verecek olursak;

<Form Action = url Method = (get-post) Target = pencere> .... </Form> şeklinde diyebiliriz.

Şimdi de yukarıda verdiğimiz genel kullanımdaki kavramları açıklayalım.

ÖzellikAçıklama
ActionFormun onay buttonuna basıldığında form bilgilerinin gönderileceği URL yi belirtir.
MethodFormun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman çoğunlukla Post metodunu kullanırız. Get metodunda form ile gönderilen veriler URL nin sonuna eklenir.
TargetForm değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir.
Form Etiketinin Özellik ve Açıklama Tablosu

Kontrol Tipleri

HTML’in form kontrolleri ,<INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur. Yani biz bir form oluşturuyorsak; (<form>...</form>) etiketleri arasına yukarıdaki 3 çeşit etiketin alt özelliklerini kullanacağız. Şimdi bu etiketlerin kullanımını sırasıyla öğrenelim.

INPUT Kontrolü Yazım Şekli ve Örnekleri

TextBox: Aslında birçok programlama dilinden de aşina olduğumuz textbox, kullanıcının tek satırdan oluşan string tipinde değer girmesi için kullanılmaktadır. Html üzerinde kullanışı <input type = "text"> şeklindedir.

Password: Aynı şekilde birçok programlama dilinde olan; genelde karşımıza textbox’ın bir özelliği olarak gelen password, yukarıdaki gibi string tipinde giriş yapılır. Bununla birlikte yazılan karakterler yerine “*” karakteri gösterilmektedir. Html üzerinde kodlanışı <input type="password"> şeklindedir.

Hidden: Formla birlikte taşınan bu alandaki bilgi kullanıcıdan gizlenir. Html üzerinde kodlanışı <input type = "hidden"> şeklindedir.

CheckBox: Aynı şekilde birçok programlama dilinde formlarda bulunan, kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde kullanılmaktadır. Html üzerinde kodlanışı;

<input type = "checkbox"> şeklindedir.

File: Forma eklenen kullanıcının bir dosyasının ismini girmesine izin verir. Html üzerinde kullanışı <input type = "file"> şeklindedir.

Submit: <Form> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini göndermede kullanılmaktadır. Html üzerinde kullanışı

<input type = "submit"> şeklindedir.


Reset: Bütün form kontrollerini sıfırlamada kullanılmaktadır. Formun sayfa ilk yüklendiğindeki eski halini almasını sağlar. Html üzerinde kodlanışı;

<input type = “reset”> şeklindedir.

RadioButton: Sürekli belirtiyorum fakat size göstermek istediğim dillerin birbirine olan benzerlikleri. Aynı şekilde radiobutton da karşımıza C# formu olsun, java olsun, python olsun karşımıza çoğu yerde çıkan bir form ögesidir. Özel bir seçenek listesinden seçim yapma imkanı sağlar. Radibuttonların name özelliğine aynı değerler verilerek sınıflandırılabiliriz.

Html üzerinde kodlanışı <input type = "radio"> şeklindedir.

Image: Tıklandığında Mouse imlecinin X ve Y koordinatlarını göndererek grafiksel onay butonu yapmada kullanılmaktadır. Html üzerinde kullanışı

<input type = "image"> şeklindedir.

Button: İstemci tarafı (Client-Side) scriptlerinden JavaScript ya da VBScript i tetikleyebilen komut düğmesi oluşturmaktadır. Html üzerinde kullanışı

<input type = "button"> şeklindedir.


TEXTAREA Kontrolü Yazım Şekli ve Örnekleri

TextArea: Çok satırlı metinlerin girilmesine imkan sağlayan bir kontroldür. Html üzerinde kodlanışı <TEXTAREA> şeklindedir.


SELECT Kontrolü Yazım Şekli ve Örnekleri

ComboBox: Kullanıcıya açılan bir listeden hazır seçenekler sunar. Html üzerinde kodlanışı <SELECT size="1"> şeklindedir.

ListBox: Kullanıcıya liste şeklinde hazır seçenekler sunar. Kodlanıştaki “n” ListBox’ın kaç satırlı olacağını belirtir.

Html üzerinde kodlanışı <SELECT size="n"> şeklindedir.


Böylece tüm HTML Form ögelerini incelemiş olduk. Hepsinin kullanım amacını ve syntaxlarını öğrenmiş olduk. Bir sonraki yazıda örneğin ListBox için kullanabileceğimiz özellikleri öğreneceğiz. Buraya kadar öğrenmiş olduğumuz tüm etiketlerin özelliklerini öğreneceğiz. Son olarak da öğrendiğimiz her şeyi birleştirerek bir örnek yapmaya çalışacağız. Bu bir şirkete iş başvuru formu olabilir. Yazıyı paylaştıktan sonra buradan ulaşabilirsiniz.

Böylece bir konunun daha sonun gelmiş olduk. Bir sonraki yazıda görüşünceye dek herkese sağlıklı günler dilerim.

One thought on “HTML Form Araçları

Yorumlar kapatıldı.