Html Eğitimi Ders 7-Form Oluşturma

Merhaba,
Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim.

Formlar

Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "text" yani yazı özelliğini göreceğiz. Sonradan "name" ile forma isim verebilir, "size" ile büyüklüğü belirtebilirsiniz. Örneğin:

<form name="giris" action="giris.asp" method="post">
<b>Kullanıcı Adı:</b><br />
<input type="text" name="kullaniciadi" size="12"><br /><br />
<b>Şifre:</b><br />
<input type="password" name="sifre" size="12"><br /><br />
<input type="submit" name="giris" value="Giriş"><br /><br />
</form>

Şimdi formu inceleyelim:

• name="isim": Form veya bir bölümüne isim vermek için kullanılır. Değerlendirmede bize yardımcı olur.
• action="dosya": Form bilgilerinin gönderileceği veya test edileceği dosyadır.
• method="post": Hangi şekilde dosyaya gideceğidir.. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
• type="tür": Kullanacağımız form nesnesidir. Burada "text" yazı kutusu, "password" şifre kutusu ve "sumbit" ile gönderme düğmesi oluşturmuş oluruz.
• size="boyut": Form nesnelerinin uzunluğunu belirtip sadece "text" ve "password" özelliklerinde kullanılır.
• value="deger": Butonda ya da metin kutusunda yazılacak değerler bu kısımda belirtilir.

Bunları öğrendikten sonra örneklere devam edelim. Bir yorum kutusu örneği (Çalışmaz ve sadece örnek önizlemedir):

<form name="yorum" action="yorum.asp" method="post">
<b>Adınız Soyadınız:</b><br />
<input type="text" name="adsoyad" size="24"><br /><br />
<b>Yorum:</b><br />
<textarea  cols="36" rows="4">Yorumunuz...</textarea><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br />
</form>

Burada "textarea"yı bir "type" değeri içinde kullanmadık. Çünkü bu textarea bir form nesnesi olmayıp sadece içinde kullanılır. Özellikleri:

• cols="sutun sayısı"
• rows="satır sayısı"

Bunun dışında "textarea" ve kapanma etiketi arasına içinde bulunan değer yazılır. Şimdi sadece bir tanesi seçilebilen radyo düğmeleri yapalım:

<b> Öğrenmek İstediğiniz Programlama Çeşidi Nedir: </b><br /><br />

<input type="radio" name="kod" value="html"> Html <br />

<input type="radio" name="kod" value="css"> Css <br />

<input type="radio" name="kod" value="php"> Php <br />

<input type="radio" name="kod" value="asp"> Asp <br />

Eğer denerseniz sadece bir tanesinin seçilebildiğini görebilirsiniz. Gördüğünüz gibi "type" değerini "radio" olarak verdik. Şimdi birden çok seçilebilen seçenekler oluşturalım:

<b> Bildiğiniz Programlama Çeşitleri Nelerdir: </b><br /><br />
<input type="checkbox" name="_html" value="html"> Html <br />
<input type="checkbox" name="_css" value="css"> Css <br />
<input type="checkbox" name="_php" value="php"> Php <br />
<input type="checkbox" name="_asp" value="asp"> Asp <br />


Denediyseniz birden fazla seçenek seçebiliyorsunuz. Burada da "type" değerini "checkbox" yaptık. Şimdi açılır seçim kutusu yapalım:

<select name="kodlar">
<option value="html"> Html </option>
<option value="css"> Css </option>
<option value="php"> Php </option>

<option value="asp"> Asp </option>
</select>

Şimdi ise bambaşka bir seçenek kullandık. Bunu ve diğerlerini "form" tagları arasına koyabiliriz. Bu arada açılır seçim kutusunda ilk değer herzaman ilk olarak gözüken değerdir.

Bu derslik bu kadar ve form oluşturmayı tam olarak öğrendik. İletişim formu bu bilgi ile oluşturulmaz. Bundan dolayı çalışan form oluşturmak için diğer sitelerden örnekeri inceleyin. Kolay Gelsin. Emek karşılığı ve soruları yorumda belirtin.