Cumartesi , 21 Ekim 2017
Anasayfa » WEB » HTML » HTML Form

HTML Form

Web’in en kullanışlı niteliği ve belki de, internet üzerindeki öteki servislere göre daha yaygın olmasının nedeni formlardır . Kullanıcı ile etkileşimli dinamik web sayfaları hazırlayabilmek için HTML

‘dan faydalınılır. Bu sayede kullanıcıdan bilgi alınabilir ve içeriğimiz bu bilgiler ile daha kişisel, dinamik bir yapıya kavuşabilir. Örneğin e-bankacılık, e-sigortacılık, e-ticaret, e-eğitim,… gibi etkileşimli (interactive) her işte form kullanılır.

Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. Kullanıcının girdiği bilgiler sunucu makinaya gönderilir. Gönderilen bu bilgiler belirlenen bir dosyaya yazılır. Burada biriken verilerin işlenmesi gerekiyorsa, o işi yapacak bir programın ayrıca yazılması gerekir. HTML yalnızca, kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez.

Kullanıcının form aracılığı ile sunucuya gönderdiği verileri işleyen programlar uygun bir programlama diliyle yazılabilir. Örneğin php, asp.net gibi…

HTML formların ne şekilde kullanıldıklarına bir bakalım.

<Form> nedir?

<form> etiketi html formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları

….

etiketleri arasında yer alır.

Genel Kullanımı :
ACTION : Form verilerin gönderileceği sunucu taraflı çalışan (php, aspx) dosya yoludur.
METHOD : Form verilerinin gönderim şeklidir. Bu yöntemler GET ve POST yöntemidir.
HTTP protokolünün günümüzde en çok kullanılanları GET ve POST metodlarıdır. Sadece istemci tarafına basit veri alma gibi işlemler söz konusu olduğunda GET metodu, tam tersine servis tarafına parametreler gönderip düzenleme, veri aktarma yada operasyon çağırma gibi işlemler söz konusu olduğunda POST,PUT gibi metodlar kullanılır.

Şimdi <form> etiketleri arasında kullanacağınız form elementlerini yakından tanıyalım.

<INPUT> element

<INPUT> etiketi form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. type elemanının varsayılan değeri text(metin) olmakla birlikte belirtilecek olan (text, password, checkbox, radio,submit, reset gibi) farklı değerleri de alabilir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz.

<INPUT  TYPE=tip NAME=isim VALUE=değer MAXLENGTH=uzunluk SIZE=boyut  >

Özellik Açıklama
TYPE Girilecek olan elemanın türünü belirtmek için kullanılır
NAME Girilecek olan verinin değişken ismini belirlemek için kullanılır.
VALUE
SIZE Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır.Hiçbir rakam belirtilmediği takdirde varsayılan değeri 20’dir.
MAXLENGTH

Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır.

Daha fazla özellikler için http://www.w3schools.com/html/html_form_attributes.asp adresine gözatabilirsiniz.

Aşağıdaki örnekte <input> ile metin kutularından oluşan basit bir form örneği görüyorsunuz.

input

CheckBox

Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar.

check

Radio

Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin ayni olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.

radio

Password

Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulur.

password

TextArea

Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken <Textarea> kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenebilir.

textarea

Select

Hazırlamakta olduğunuz formlara <select> (seç) etiketi kullanarak açılır menüler ekleyebilirsiniz. Listbox (liste kutusu) ve drop-down list (aşağı açılır liste) şeklinde iki farklı tür de seçim kutusu oluşturulabilir. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenir.

select

Size özelliği listeden yer alan elemanlardan istediğiniz kadarının ekranda görüntülenmesini ayarlamak için kullanılır. Multiple özelliği ise Ctrl tuşu kullanarak birden fazla seçim yapmamıza olanak sağlamaktadır.

Liste öğesine selected özelliği eklenerek seçilmiş olanı belirleyebilirsiniz.

Button

Formunuza tıklandığında bir görevi çağıran bir buton ekleminizi sağlar.

onclick özelliği ile html dökümanınızda bulunan bir javascript fonksiyonu çağırabilirsiniz.

Submit Button

Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılır.

<input type=”submit”>
“Value” özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.

submit

Reset Button

Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar.

<input type=”reset”>
“Value” özelliği, düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.

submit2

 

Hakkında Recep ORTAKÖYLÜ

İlginizi Çekebilir

API Nedir?

Bu yazımızda API Nedir, yazılım dünyasında önemi neden bu kadar büyüktür, sahip olduğu potansiyeli ve …

2 Yorumlar

  1. Teşekkürler. Hizalama işlemlerini nasıl yapabiliriz. Daha güzel görünmesi için.

    • Recep ORTAKÖYLÜ

      Konuda form elemanlarını öne çıkarmak amacıyla hizalama gibi diğer biçimlemeleri gözardı ederek örneklemelerde bulundum. Sorunuz için en basitinden form içeriğini tablo içinde saklı tutarak hizalamaları yapabiliriz ve birazda style tanımlaması katarak… Örneğin ;

       

      Tabi sadece tablolarla değil “div” elementi ile aynı hizalamaları yapabilirsiniz. Bu konu hakkında yazımız yayınlandığında ilgili linki size paylaşabilirim. İyi çalışmalar…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir