HTMLWebmaster

HTML’de Form Kullanımı

HTML’de Form Kullanımı

HTML’de Form Kullanımı, Bu yazımızda sadece görsel olarak kullanıcıya sunduğumuz yapılardan farklı olarak formlar yardımı ile kullanıcının da aktif olacağı dinamik web sayfaları hazırlamayı açıklamaya çalışacağız.

HTML’de Form Kullanımı <FORM> etiketi

<form> etiketi html formları oluşturmak için kullanılan etikettir. Form oluşturmaya yarayan bütün elemanlar <form>…..</form> etiketleri arasına yazılmaktadır.

Genel Kullanımı: <form action=”url” method=”get-post” target=”pencere”>…….</form>

Action: Forma girilecek olan bilgilerin değerlendirileceği dosyanın URL adresini belirlemek için kullanılmaktadır.

Method: Forma girilecek olan bilgilerin, değerlendirici dosyaya hangi yöntem ile gönderileceğini belirtmek için kullanılmaktadır. Method, post ve get değerlerini alabilmektedir. Method bölümüne, get değeri verildiği zaman kontrollere girilen içerik o anda bulunan adrese eklenip değerlendiriciye gönderilmektedir. Post ise form içeriğini direkt olarak değerlendiriciye göndermektedir.

HTML’de Form Kullanımı <input> etiketi

<input> etiketi form içerisinde bilgi almak için kullanılan etikettir. <input> etiketi kapatılmamaktadır.

<input> etiketi ile kullanılacak parametreler tabloda gösterilmiştir.

TYPE Girilecek olan elemanın türünü belirlemek için kullanılan parametredir.
SRC Bir resim dosyası kullanılmış ise bu resim dosyanın adresini belirtmek için kullanılan parametredir.
ALİGN Tanımlanmış olan elemanın sayfada konumlanacağı yeri belirlemek için kullanılan parametredir. (sağ, sol, orta)
NAME Girilecek verinin değişken ismini belirlemek için kullanılan parametredir.
MAXLENGTH Girilecek verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılan parametredir.
SIZE Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılan parametredir.
DISABLED Veri girişini engellemek için kullanılan parametredir.
CHECKED Seçim kutusu kullanıldığı zaman kutunun işaretli olarak görünmesi için kullanılan parametredir. Sadece “radio” ve “checkbox” elemanları için kullanılmaktadır.

HTML’de Form Kullanımı FORM NESNELERİ

Bir form içerisinde metin kutuları, radyo düğmeleri, onay kutuları, metin alanları, açılır menüler gibi elemanlardan istenilenler kullanılabilmektedir. Şimdi bunları açıklamaya çalışalım.

CheckBox: Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılmaktadır.

Örnek kullanımı ve tarayıcı görüntüsü:

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

Örnek kullanımı ve tarayıcı görüntüsü:

Text: Hazırlamakta olduğunuz forma, tek satırlık yazı yazılabilecek alan (textbox) eklemek için kullanılmaktadır. Bu alan ile birlikte size, maxlength özelliklerini de kullanabilirsiniz.

Örnek kullanımı ve tarayıcı görüntüsü:

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

Örnek kullanımı ve tarayıcı görüntüsü:

Textarea: 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 belirlenmektedir.

Örnek kullanımı ve tarayıcı görüntüsü:

Açılır Menüler: Hazırlamakta olduğunuz formlara <select> etiketi kullanarak açılır menüler eklemek için kullanılmaktadır. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenmektedir.

Örnek kullanımı ve tarayıcı görüntüsü:

Reset: Ü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ğlamaktadır.

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

Örnek kullanımı ve tarayıcı görüntüsü:

HTML'de Form Kullanımı

megep/modüllerden yararlanılmıştır.

5 thoughts on “HTML’de Form Kullanımı

  • Orhan

    kodları resim değil de yazı olarak yapmanız biraz sorun oldu

    Yanıtla
  • Azim

    Gayet kaliteli teşekküerler

    Yanıtla
  • Ayşegül

    tam aradığım örnekler teşekkürler

    Yanıtla
  • Orhan

    Örnekler güzel ama biraz basit mi olmuş

    Yanıtla
  • utku

    yeni başladım güzel bilgi devamı gelsin

    Yanıtla

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir