html öne çıkan görsel

HTML ile İletişim Formu Oluşturma

Merhaba arkadaşlar önceki yazımda form etiketi ve elementlerini görmüştük. Bu yazımda ise basit bir iletişim formu hazırlamayı size göstereceğim.Öncelikle bir iletişim formunda hangi alanlar bulunuyor bunlara bakalım. İsim ve soyisim için bir alan, e-posta için bir alan, mesaj bırakabilmesi için bir alan ve son olarak bir gönder butonu bulunuyor. Bu yazdıklarımı dikkate alarak bir iletişim formu düzenleyelim.

Önceki yazımda da belirttiğim gibi biz kullanıcıdan bir işlem bekliyorsak, <input> etiketi kullanmaktayız. Yukarıdaki giriş alanları için sırasıyla, text, email tipini, mesaj girişi için <textarea> etiketini kullanacağız. Gönder butonu için ise submit tipini kullanacağız.

Bu anlattığım kısmın html kod hali aşağıdaki gibi olacaktır.

Öncelikle bu kodumuza hiçbir süsleme yapmadığımız için aşağıdaki gibi görünecektir.

html iletişim formu yapımı

Burada görüldüğü gibi çok sade bir görünüm oldu. Bunu biraz güzel hale getirmek için css kullanabilirsiniz. Css olmadan daha nasıl güzel olur onu da şöyle belirteyim.

İnsanlar ne yazacağını bilmek ister bu sebeple bu kutucuklar nedir ne değildir bunları formumuzun üstüne ekleyebiliriz. Bir de bu şekilde çok kenarda kalıyor bunu ortada gösterebiliriz.

Anlattığım kısmın çıktısı aşağıdaki gibi olacaktır.

iletişim formu html5

İletişim formumuz hazır. Burada div kullanımı göze çarpabilir. Bütün bir formu div içerisine alarak, div’i merkeze getirdiğimde tüm formu merkeze almış oldum. Eğer div kullanımını bilmiyorsanız buradaki yazıma göz atabilirsiniz.

Bu formu daha da güzel hale getirebilmek için css kullanabilirsiniz. Yakın zamanda css üzerine de makaleler yazmayı planlamaktayım. Umarım anlaşılır bir makale olmuştur.

Bir cevap yazın