HTML Form Oluşturma [Ders 9]


Form Oluşturma
Form Oluşturma

Varsayalım sitemizde ziyaretçi defteri yada iletişim formu olsun istiyoruz. O zaman ziyaretçilerin doldurması için form alanı oluşturmamız gerekiyor. Form alanı oluşturmak için gerekli olan araç ve gereçleri inceleyelim. Formun yapı taşları:

  • input: Tek Satırlık Metin Alanı, Radio ve Checkbox Kutucukları
<input type="text" name="isim" size="30" value="Ad Soyad">

<input type="radio" name="cinsiyet" value="erkek">Erkek<br>
<input type="radio" name="cinsiyet" value="kadin">Kadın

 Erkek
 Kadın

<input type="checkbox" name="html" value="html">HTML Dersi<br>
<input type="checkbox" name="css" value="css">CSS Dersi

 HTML Dersi
 CSS Dersi

  • textarea: Çok Satırlı Metin Alanı
<textarea cols="50" rows="3">Mesak Kutusu</textarea>
/* cols metnin genişliğini, rows satır aralığını belirtmede kullanılır */
  • button: Düğme
<input type="submit" name="gonder" value="Gönder">
<input type="submit" name="sil" value="Sil">

 

  • select: Açılır Seçim Kutusu option: Seçenekler
<select name="Mevsimler" size="1">
<option selected="selected">En Sevdiğiniz Mevsim</option>
<option value="İlkbahar">İlkbahar</option>
<option value="Yaz">Yaz</option>
<option value="Sonbahar">Sonbahar</option>
<option value="Kış">Kış</option>
</select>

  • fieldset: Alan Kutusu
<fieldset>
<legend>Kişisel Bilgiler:</legend>
Ad Soyad: <input type="text"><br>
E-posta : <input type="text"><br>
D.Tarihi: <input type="text">
</fieldset>
Kişisel Bilgiler:

Ad Soyad: 
E-posta : 
D.Tarihi: 

ÖRNEK İLETİŞİM FORMU

Bu bilgilerden sonra sitemiz için örnek bir iletişim formu oluşturalım. Öncelikle bir formda kullanılabilecek komutları kısaca inceleyelim. Sonrasında aşağıdaki butona tıklayarak örnek iletişim formunu indirebilirsiniz.

  • name: isim     //Form için bir isim belirlenir, bu isim bilgileri değerlendirirken yardımcı olur.
  • action: dosya     //Formdan alınan bilgiler hangi dosyaya gönderilecek ise berlirtilir.
  • method: post     //Hangi yöntemle formun teslim edileceği yazılır. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
  • type: tür     //Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğu belirtilir.
  • size: boyut     //Nesnenin uzunluğunu sadece type değeri text ya da password ise belirtiriz.
  • name: isim     //Forma isim verdiğimiz gibi nesnelere de isim veririz. Bilgileri gönderdiğimiz zaman dosyadan veriyi alırken buradaki isimden yola çıkarız.
  • value: değer     //Metin kutusunda ya da buton da yazacak olan yazıyı buradan belirtiriz.

Örnek iletişim formunu indirmek için tıklayınız.

Bu içeriği nasıl buldunuz?

Beğen Beğen
4
Beğen
Mutlu Mutlu
0
Mutlu
Eğlenceli Eğlenceli
0
Eğlenceli
Üzgün Üzgün
0
Üzgün
Berbat Berbat
0
Berbat
Kızgın Kızgın
0
Kızgın
Komik Komik
0
Komik
İlginç İlginç
1
İlginç

Yorumlar 0

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

İçerik Türünü Seçin
Kişilik Testi
Kişilik Hakkında Testler
Test
Cevaplamalı Testler
Anket
Oylamalı Seçenekler
Yazı
Biçimlendirilmiş Metinler
Puanlamalı Liste
Puanlamalı Liste
Video
Youtube, Vimeo, Vine vs
Ses/Müzik
Soundcloud, Mixcloud
Resim
GIF veya Resim