HTML Dersleri Ders#9 | Form İşlemleri

HTML Form İşlemleri

HTML’de Form İşlemleri

Fieldset ve Legend Etiketleri

Form içeriğinin güzel gözükmesi için <fieldset></fieldset> etiketlerinin kullanımından ve görünümünden bahsedecek olursak, görsel bir alan bir çerçeve oluşturur. Genellikle formlarda kullanılmalarına rağmen birçok farklı noktada kullanıldığını görebilirsiniz. <legend></legend> etiketi de fieldset etiketine başlıklı bir görünüm kazandırır. Aşağıdaki örneği kendi editörünüze ekleyerek kontrol edebilirsiniz.

Form Etiketi <form></form>

Dinamik sayfaların olmazsa olmazıdır form ve form elemanları etiketleri. Bir çok sitede görmüşsünüzdür, bize ulaşın, iletişim gibi menüler altında yer alan ziyaretçiden bilgiler isteyen, bu bilgilerin işlenerek gerek kayıt edildiği gerekse e-posta adresine yönlendirildiği HTML’in gerçek anlamda dinamizm kazanmasını sağlayan alanlardır formlar. Formlar bir çok alanda kullanılabilir genel amacı ziyaretçiden bilgi/veri toplamaktır. Bu bir iletişim formu olabilirken, başka bir platformda anket olarak çıkar karşınıza, kimi zamanda karşıya bir veri göndermek (upload) için kullanılırlar. Nasıl çalışır bu formlar?

HTML kod bloğunun içinde <form></form> etiketleri arasında işlem görürler. Doğal olarak bu ziyaretçiden toplanan bilgilerin kaydedilmesi, saklanması, işlenmesi gibi maksatlarla bir sayfaya, fonksiyona veya çalışacağı yapıya gönderilirler. Bu işleme jargonda post denir. Sonuç olarak toplanan veriler bir yere (action) belli bir metot (method) dahilinde gönderilirler. Form etiketi içinde action ve method özellikleri bulunur. Action özelliği toplanan verilerin nereye gönderileceğini belirlemek için değer alırken method özelliği ise bu verilerin belirtilen action’a hangi yöntemle gönderileceğini belirler. Method özelliği POST veya GET değerlerini alır.

Formun sonunda ise bu toplanan verilerin action kısmında belirtilen adrese yine belirtilen GET veya POST metodu ile gönderilmesi için işlemi başlatacak genelde bir butona ihtiyaç duyar. Bu butona tıklanması sonucu gerçekleşen olaya submit denir. Submit, input etiketinin type özelliğinin aldığı bir değerdir. Input etiketi formlarda tipine bağlı olarak işlevi yönlendirmeye yarayan araçlardır.

Post ve Get değeri arasındaki fark; get metoduyla gönderilen veriler URL kısmında gözükecektir. Tarayıcınızın adres satırında bulunan bu bilgiler görünür olduğundan güvenli değildir. POST metodu kullanıldığında veriler sadece alıcı tarafında gözükürler. Günümüzde get metodu çokça kullanılmakta olup genelde gizli olması gereken veriler kriptolanmış şekilde taşınmaktadır.

Her bir form elemanı veriyi gönderirken name özelliğinin aldığı değer üzerinden ayıklamaya ve çözümlemeye tabi tutulurlar. Name (isim) özelliği form etiketlerinin en önemli unsurudur. Bu kısımda doğacak yanlışlıklar alıcı tarafından yanlış yorumlanır veya verinin taşınmamasına sebep olurlar.

Input Etiketi <input>

Form işlemlerinde aldığı tip (type) özelliği değerine bağlı olarak şekillenen yapılardır. Type özelliğinin aldığı değerleri incelersek;

Text değeri: İçerisine belli bir karaktere kadar string veri girişini sağlayan form elemanlarıdır. Input etiketi içinde placeholder özelliğine verilen değer, yazma kutucuğunun içinde beliren ve ziyaretçiye yol gösteren minik anlatımlar olabilir.

<input type="text" name="adi" placeholder="Adınızı Giriniz">;

Radio değeri: Seçim yapılmasına olanak sağlayan yapılardır. Genellikle cevapları kısıtlı seçeneklerde kullanılırlar. Örneğin bir formda ziyaretçinin cinsiyetini sorarken bu yapı kullanılır. Bu özelliğin tek bir seçeneği olacağından post edilen verinin alacağı değerin ne olduğunu bildirebilmek için value özelliği de kullanılmak zorundadır. Value özelliğinin alacağı değer örnekte string olarak verilmiş fakat bu değer numerik bir değerde olabilir. Bu durumda aldığı değer veri tabanında işlenmeli ve anlamlandırılmalıdır.

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

Checkbox değeri: Çoklu seçim yapılmasına olanak sağlayan yapılardır. Genellikle anketlerde kullanılırlar. Örneğin hobileriniz nelerdir gibi soruya bir veya birden çok ilgi alanını belirtmek için kullanılırlar. Name özelliği değeri içinde taşınan değerler value değerleri olacaktır.

 
<input type="checkbox" name="hobi1" value="sanat">Sanat
<input type="checkbox" name="hobi2" value="spor">Spor
<input type="checkbox" name="hobi3" value="muzik">Müzik

Password değeri: Text değerinin yarattığı görünüm ile aynıdır, farkı ise burada yazdığınız değerler yazım esnasında gözükmeyecek veya yazılan karakterlerin * işareti ile kapatılmış şekilde olmasıdır.

Parola: <input type="password" name="parola">

File değeri: Ziyaretçiden bir dosya istenmesi durumunda kullanılır. seçilen dosya hosting alanınıza upload edilecektir. Text özelliğinin file değeri sadece POST metodu ile gönderilen verilerde kullanılabilir. Ayrıca bir form işleminde dosya upload işlemi gerçekleştirilecekse <form> etiketi içerisine action ve method’dan başka enctype özelliği verilerek bu özelliğe “multipart/form-data” değeri verilmelidir.

Dosya Seç: <input type="file" name="dosya">

Submit değeri: Type özelliğinin aldığı submit değeri ile oluşan butona tıklandığında <form> etiketi içindeki özellikler ve değerleri devreye girer. Sonuç olarak arka planda bu bilgiler çözümlenir, gerekirse ayrıştırılır hangi alanlarda kullanılacaksa işlevlerine göre bir veri tabanına kayıt edilirler. Value özelliğinin aldığı değer tıklamak için oluşan butonun içinde yazılı olacaktır.

<input type="submit" name="submit" value="Kaydet">

Reset değeri: Formda yazılmış olan verilerin temizlenmesi amacıyla kullanılan text özelliğinin değeridir. Value özelliğinin aldığı değer tıklamak için oluşan butonun içinde yazılı olacaktır.

<input type="reset" name="" value="Formu Temizle">

Select ve Option Etiketleri <select><option></option></select>

Formlarda çok seçenek arasından bir tanesini seçmeniz istenir, örneğin yaşadığınız şehir, Türkiye için vilayetleri kadar veri daha önceden girilmiştir, ziyaretçi bunların içinden seçimini yapar. Örnekte görüldüğü üzere value özelliğinin aldığı değerler ilgili illerin plaka numaralı olarak belirlenmiştir. Post işlemi sonucunda elde edilecek değerler bu plaka numaraları olacaktır.

<select name="sehir">
<option value="01">Ankara</option>
<option value="35">İzmir</option>
<option value="34">İstanbul</option>
</select>

Textarea Etiketi <textarea></textarea>

Genellikle formlarda uzun metinlerin girileceği bölümlerdir. Mesajınızı bırakınız gibi bölümler buna bir örnektir. Genişlik ve yükseklikleri alacağı cols ve rows özelliklerinin değerleri ile yapılanır.  Rows özelliğinin değeri bu alanda görünür kaç satır veri olacağını belirler. Örneğin rows özelliğinin alacağı 15 değeri bu textarea alanı için 15 satırlık bir görünüm sağlar. Cols özelliğinin alacağı değer ise bir satırda kaç karakter olacağıdır. Sonuç olarak rows değerinin 15 ve cols değerinin 40 olması bu alanda 15 satırlık ve her bir satırda 40 karakter içereceğini anlatır. Eğer bu değerler aşılırsa belirlediğiniz alanda scrollbar oluşacak, sağa veya aşağıya çekerek görünüm sağlanacaktır.

<textarea cols="40" rows="15" name="mesaj">Mesajınızı Yazınız</textarea>

Bu derse ait konu anlatımlı videoyu izlemek için tıklayınız.

Konu anlatımındaki kod satırları;

<!--
## fieldset ve legend etiketleri
## Form etiketi action, method, enctype özellikleri
## <input type="" name=""> Etiketi ve Özellikleri
## input text özelliği
## input radio özelliği
## input checkbox özelliği
## <textarea cols="" rows=""></textarea> etiketi
## <select name=""></select> Etiketi
## <option value="">İçerik</option> Etiketi
## input file özelliği
## input password özelliği
## input submit özelliği
-->
<fieldset>
<legend>Taslak Form Denemesi</legend>
<form action="#" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Adınız</td>
<td><input type="text" name="adi" placeholder="Adınızı Giriniz"></td>
<td>Soyadınız</td>
<td><input type="text" name="soyadi"></td>
</tr>
<tr>
<td>Cinsiyet</td>
<td><input type="radio" name="cinsiyet" value="erkek">Erkek</td>
<td><input type="radio" name="cinsiyet" value="kadın">Kadın</td>
<td></td>
</tr>
<tr>
<td>Hobileriniz</td>
<td><input type="checkbox" name="hobi1" value="sanat">Sanat</td>
<td><input type="checkbox" name="hobi2" value="spor">Spor</td>
<td><input type="checkbox" name="hobi3" value="muzik">Müzik</td>
</tr>
<tr>
<td colspan="4"><textarea cols="40" rows="15" name="mesaj">Mesajınızı Yazınız</textarea></td>
</tr>
<tr>
<td>Şehir:</td>
<td><select name="sehir">
<option value="01">Ankara</option>
<option value="35">İzmir</option>
<option value="34">İstanbul</option>
</select></td>
</tr>
<tr>
<td>Dosya Seç:</td>
<td><input type="file" name="dosya"></td>
</tr>
<tr>
<td>Parola: </td>
<td><input type="password" name="parola"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Kaydet"></td>
<td><input type="reset" name="" value="Formu Temizle"></td>
</tr>
</table>
</form>
</fieldset>

Bir önceki “HTML Dersleri Ders#8 | Resimlerle Çalışmak” konulu dersimize ulaşmak için tıklayınız…

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com