Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır.

Transkript

1 Form İşlemleri

2 Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı öğrendik formlar sayesinde ise tam tersini yapacağız. Ziyaretçilerden bilgi alacağız. Formlar sayesinde diğer ortamlarda olmayan veya çok daha zor olan geri besleme şikayet öneri yorum veya sipariş gibi işlemleri çok daha kolay yapabiliriz. Örneğin bir gazete yada dergide belli bir makale için doğrudan yorum yazamazken, internetteki bir makale için hemen yorum yazabilir ve yazara geri besleme gönderebilirsiniz. Formlar sayesinde ziyaretçiler web sitelerine üye yapılabilmekte, ziyaretçilerden e- mail alınabilmekte veya herhangi bir ürünün satışı yapılabilmektedir. Yani aslında bakılırsa interneti internet yapan en önemli özelliklerden biri formlardır.

3 Form Oluşturma Form Oluşturmak İçin; <form> Forma İsim Vermek İçin; name Forma Girilen Verilerin Hangi Sayfaya Gideceğini Belirtmek İçin; action Formdaki verilerin hedef sayfaya gönderilme yöntemini belirlemek için; method Formdaki verileri hedef sayfaya iki yöntemle gönderebilirsiniz bunlar; -get: Form verilerini adres çubuğunda görünür bir şekilde gönderir ve bu verilerin boyutu en fazla 2KB olabilir. -post: Verileri gizli olarak gönderir ve herhangi bir boyut kısıtlaması yoktur. Örnek; <form name=" " action="mail.php" method="get">

4 Metin Text Kutuları Metin kutusu oluşturmak için <input> tagı kullanılır. Örnek; <form name=" " action="mail.php" method="get"> <input type="text" name="ad" size="50" maxlength="10"> <br/> <input type="text" name="soyad" size="10" maxlength="10"> Size; Metin kutusu genişliği belirler Maxlenght; Maksimum karakter sayısı belirler

5 ve Web Adres Kutuları ve web adreslerini metin kutusu kullanarak da alabilirsiniz ama HTML5 ile birlikte ve web adresleri için özel metin kutuları geliştirildi. Bazı tarayıcılar bu metin kutuları kullanıldığında veri girişi için bazı özel karakterler ve kolaylıklar sağlarlar. Örnek; <form name=" " action="mail.php" method="get"> Ad:<input type="text" name="ad"><br/> Soyad:<input type="text" name="soyad"><br/> <input type=" " name="ad"><br/> Web:<input type="url" name="web"><br/>

6 Metin Alanları (Textarea) Metin kutuları tek satırlık alanların girilmesini sağlarken metin alanları birden fazla satırın girilebildiği alanları ifade eder. Örneğin yorum, şikayet vb. Bunun için <textarea> tagı kullanılır. Örnek; <form name=" " action="mail.php" method="get"> <textarea name="ileti" rows="5" cols="50"> </textarea>

7 Onay ve İptal Butonları Form elemanlarına girilen verilerin onaylanması ve bu sayede hedefe gönderilebilmesi için onay (submit) butonları kullanılır. Onay butonuna tıkladığınızda herhangi bir kod yazmaya gerek kalmadan otomatik olarak form elemanlarına girilen veriler action özelliği ile berlitilen sayfaya gönderilir. İptal (reset) butonuna tıkladığınızda ise form elemanındaki tüm veriler temizlenir. Örnek; <form name=" " action="mail.php" method="get"> Ad:<input type="text" name="ad"><br/> Soyad:<input type="text" name="soyad"><br/> <input type=" " name="ad"><br/> Web:<input type="url" name="web"><br/> İleti:<textarea name="ileti" rows="5" cols="30"></textarea> <br/> <input type="submit" value="gönder"> <input type="reset" value="iptal">

8 Ortak Özellikler Form elemanları bazı ortak özelliklere sahiptir. Bu özelliklerden çok sık kullanılanları aşağıdaki gibidir; -value: Form elemanının değerini, yani, içindeki veriyi belirtir. -placeholder: Açıklama metni ilgili form elamanında bir açıklama metni görünmesini sağlar. Form elemanına tıkladığınızda otomatik kaybolur. -name: Form elemanının adı. -id: Form elemanının adı. Name özelliği ile hemen hemen aynı işe yarar. -autofocus: Sayfa açıldığında fare imlecinin form elemanını aktif yapsını sağlar. -autocomplete: Formlara girilen verilen daha önce girilen veriler dikkate alınarak tamamlanmasını sağlar. -maxlength: Form elemanına girilebilecek maksimum karakter miktarını belirler. -required: Form elemanının mutlaka doldurulması gerektiğini belirtir. Form elemanı boş bırakılırsa hata mesajı alırsınız.

9 Uygulama <form name=" " enctype="text/plain" <table> <tr> <td>ad Soyad</td> <td>:<input type="text" name="ad" required="required" autofocus="autofocus"> </td> </tr> <tr> <td> </td> <td>:<input type=" " name=" " required="required"> </td> </tr> <tr> <td>ileti</td> <td>:<textarea name="ileti" rows="4" cols="50" required="required"></textarea> </td> </tr> <tr> <td><input type="submit" value="gönder"></td> <td><input type="reset" value="iptal"></td> </tr>

10 Onay (Checkbox) ve Seçenek (Radio) Kutuları Eğer ziyaretçilerden Evet/Hayır Doğru/Yanlış Onayla/Onaylama gibi cevaplar girmesini istiyorsanız checkbox yani onay kutusu kullanırsınız. Eğer seçenekleri ikiden fazlaya çıkarmak istiyorsanız radio yani seçenek kutusu kullanırsınız. <form> <h1>sitemiz hakkındaki fikirleriniz:</h1> <input type="checkbox" name="begen" value="evet"> Sitenizi beğendim<br> <input type="checkbox" name="bilgi" value="evet"> Aradığım bilgiyi bulamadım<br> <input type="checkbox" name="ayrinti" value="evet"> bilgiler ayrıntılı<br> <h1>cinsiyetiniz</h1> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female

11 Seçenek Listesi ( Combo ) Seçenek sayıları çok fazla ise genelde Seçenek Listesi kullanılır mesela 81 tane ili göstermek için seçenek listesi kullanmalıyız. <form> Doğum Yeri: <select name="il" size="1"> <option>istanbul</option> <option>ankara</option> <option>izmir</option> <option>trabzon</option>

12 <form method="post" action="yukle.php"> Dosya Yükle:<input type="file" name="dosya"><br> Dosya Yükleme Elemanı