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
Olamaz Olamaz
0
Olamaz
Kızgın Kızgın
0
Kızgın
Komik Komik
0
Komik
İlginç İlginç
1
İlginç
dergiCE

Dijital yayıncılık alanında Türkiye, yükselen bir grafik çizmektedir. Bu amaç ile profesyonel işlere imza atmak üzere yola çıktık. 5. yılımızda araştırmayı seven herkese kapımızı açtık. Sizlerde makalelerinizi dergiCE'de paylaşarak, dijital dünyada yerinizi alabilirsiniz.

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