link

Formlar ve Form Nesneleri…

HTML-Formlar-Form-Nesneleri_emresupcinSevgili Okurlarım,

İnternet kullanımının hızla yaygınlaşması, web sayfalarının ve dolayısıyla sayfa tasarımının öneminin artmasına sebep olmuştur.  İnternet ortamında gezinirken ziyaret etmiş olduğunuz tüm sayfalar web tasarım editörleri kullanılarak hazırlanmaktadır.

Bu makalemde sizlere web sayfaları içinde sıkça rastlanılan formlar ve form nesnelerini anlatacağım. Stil şablonlarının kullanımını ve bunların sağlamış olduğu kolaylıklardan da sizlere bahsetmek istiyorum.

 

FORMLAR


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.
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 ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

 

<form>


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.

 

Genel Kullanımı:


<form action = url method = get- post target = pencere> ….. </form>

 

Action


Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir.

 

Method
Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye yönlendirir.

 
Target
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir.

 

<input>


Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar.

 

Genel Kullanımı:

<input align = tip [checked] maxlength = uzunluk name = isim size = boyut src =adres type = tip value = değer>

 

align: Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır (left, center, right). Eğer type değeri bir resim olarak
atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini belirler. Top, middle veya bottom değerlerinden birini alabilir.
checked:  Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.
maxlength: “text” ve “password” elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri
sınırsızdır.
name: Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
size: “text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
src: “image” elemanında resim dosyasını belirtmek için kullanılır.
type: Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır.

 

 

FORM NESNELERİ

 

CheckBox


Formumuza onay kutuları eklemek için kullanılır.

 

Radio


Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine atanmalıdır.

 

Text


Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir.

 

Image


Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu URL’yi göstermelidir.

 

Password


Formumuza parola yazılabilecek alan eklemek için kullanılır. “text” elemanından farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu “*” işareti de olabilir.

 

Textarea


Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır.

 

Reset


Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.

 

Submit


Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:İlk Bilgisayarın Hangisi Olduğunu Biliyor musunuz?

Sonraki Yazı:Form Nesneleri Uygulaması…

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.