1 / 31

Formlar

Formlar. GİRİŞ. Sizin Web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretçinin yapacağı belirten kutular bulunan ve en sonunda da bu bilgileri size göndereceği bir düğme bulunan bir Web sayfasıdır. UYARI!!.

lin
Download Presentation

Formlar

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Formlar

  2. GİRİŞ • Sizin Web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretçinin yapacağı belirten kutular bulunan ve en sonunda da bu bilgileri size göndereceği bir düğme bulunan bir Web sayfasıdır. • UYARI!!

  3. Bütün HTML etiketleri gibi formlarda etiketle başlar ve biter • <form></form> şeklindedir.

  4. UYARI!! • Form oluştururken GÖNDER düğmesini kullanmak oluşturulan formun gönderme işlemini yapması için tek başına yeterli olmayacaktır. • Bunun için; formların işlenmesi dinamik sayfaların(ASP,PHP, JSP vb dillerin kullanıldığı sayfalar) veya CGI denilen (Common Gateway Interface)scriptlerinin kullanımıyla gerçekleşir

  5. Formun Bölümleri • HTML formunun üç bölümü vardır: • Action: Web tasarımcısının formdan beklediği eylemin(action) ne olduğunu gösteren ve ziyaretçinin tarayıcısına hitap eden bölüm. • Ziyaretçinin doldurması gereken boşluklar • Ziyaretçiye bu formun eylem düğmelerini harekete geçirme veya vazgeçme imkanı veren komut düğmeleri.(Gönder veya Vazgeç düğmeleri gibi)

  6. FORM OLUŞTURMA • Dreamweaver’da form oluşturabilmek için Insert araç çubuğunda bulunan Formsmenü grubu içindeki düğmelerden faydanılmaktadır. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  7. FORM OLUŞTURMA

  8. 1. TEXT FIELD: Tek satırlı metin alanı oluşturmak için kullanılır. <p> <label>Adı: <input type="text" name="ad" id="ad" /> </label> </p> 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  9. InputTagAccessibilityAttributes (Giriş Etiketi Niteliklerine Erişim Penceresi Eklenen TextField(Metin Alanı)’a ait tanımlayıcı isim verilir. Bu metin alanına girilen bilgiler formdan çekilirken ID kısmındaki ismi kullanılır. Eklenen TextField(Metin Alanı)’ın ismini belirtmek için kullanılır <label>Adı: soyadınız: <labelfor="soyad">Soyadı:</label>

  10. 2. HIDDEN FIELD: Gizli bir alan eklemek için kullanılır. • <input type="hidden" name="hiddenField" id="hiddenField" /> 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  11. 3. Text Area: Çok satırlı metin alanı eklemek için kullanılır. • Not: Multi Line ve Single Line alanları?? • <label for="gorus">Görüşleriniz:</label> • <textarea name="gorus" cols="45" id="gorus"></textarea> 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  12. 4. Check Box: Onay kutusu eklemek için kullanılır. 3 5 7 9 11 13 15 17 1 2 4 6 8 10 12 14 16 Ne İşe Yarar?

  13. 5. Radio Button: Belirli bir grup öğesi tarafından yalnızca birini yapma imkanı sağlayan form nesnesidir. • 6. Radio Group: Birden fazla radio button grubu oluşturmak için kullanılır. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  14. 7. List Values: Ziyaretçinin istenen öğeler içinden seçim yapmasını sağlamak için kullanılır 1 3 5 7 9 11 13 15 17 Liste içerisinde bulunmasını istediğimiz seçeneklere ait giriş yer değişikliği ve silme işlemlerini yapabilirz. 2 4 6 8 10 12 14 16

  15. 8. Jump Menu: Oluşturulan listeye göre liste içerisindeki seçeneklere bağlantılar eklemekte kullanılır. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  16. 9. Image Field: Resim alanı eklemek için kullanılır. • 10. File Field: Web sayfası içerisine bir dosya yüklerken kullanılır 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16

  17. <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" enctype="multipart/form-data" method="post"> <p> Type some text (if you like):<br> <input type="text" name="textline" size="30"> </p> <p> Please specify a file, or a set of files:<br> <input type="file" name="datafile" size="40"> </p> <div> <input type="submit" value="Send"> </div> </form>

  18. 11. Button: Formların içerisinde , form verisini göndermek (Submit) ve temizlemek için (Reset) iki tür düğme kullanılır. 1 3 5 7 9 11 13 15 17 Ne işe yarar? 2 4 6 8 10 12 14 16

  19. Formları İşleme • Hazırlamış olduğumuz forma ait verilerin bir veritabanına aktarımı(bilgi gönderme/alma, arama vb. şekilde işlenmesi) gerektiğinde bu işlemin tamamlanması gerekecektir. • Bu tanımlama işlemi form seçili haldeyken Properities penceresinden ya da kod yazım ekranında ; • <BODY> • <FORM ACTION="formlar02_isle.php" METHOD="GET"> şeklinde yapılabilir

  20. Formları İşleme • <FORM> etiketi, kullanıcının tarayıcı programına bu formdaki bilgileri ne yapması gerektiğine ilişkin talimatı da içerir.

  21. Formları İşleme • Bunun için FORM etiketinin içinde, tarayıcıya ACTION yüklemiyle bu formun doldurularak gönderilmesi halinde içindeki bilgilerin nerede, hangi adreste, hangi programa teslim edileceğini söylersiniz.

  22. Formları İşleme • HTTP protokolü, Web Server ile ziyaretçinin bilgisayarı arasında iki tür iletişime imkan verdiği için bu bölümde tarayıcıya hangi yöntemi seçmesi gerektiğini de METHOD yüklemiyle bildirmeniz gerekir.

  23. Formları İşleme

  24. Formları İşleme • <FORM ACTION=”url” METHOD=POST veya GET>

  25. Formları İşleme • METHOD hanesine ya GET ya da POST yazabilirsiniz. • Get ve Post, ziyaretçinin bilgisayarı ile Web Server arasında kurulacak HTTP prorotokolüne dayanan bağlantı, ziyaretçinin Server’a bu iki yöntemden birisiyle bilgi göndermesini sağlar.

  26. Formları İşleme • Aralarındaki fark, Get yönteminde bilgiler Web Server’da “querry_string” denen değişkenin içine yazılırken, Post yönteminde bu bilgiler “stdin” değişkenine yerleştirilir. • $_POST metodu ile gönderilen değerler adres çubuğunda görüntülenmez.adres çubuğu siteadi.com/sayfa.php olarak görünür. • $_GET ile gönderilen değerler adres çubuğunda görünür.örn: siteadi.com/sayfa.php?id=1bu örnekte sayfa.php ye id değerini 1 olarak gönderiyoruz..

  27. Formları İşleme • Yani Post yöntemiyle daha çok bilgi gönderilebilir. Web alanı işletmecileri giderek daha yüksek oranda Post yöntemini tercih ediyorlar.

  28. Formları İşleme • Form etiketinin önüne form bilgisi ziyaretçinin bilgisayarından sizin Web Server’ınıza nasıl bir şifreleme yöntemi ile gelsin istiyorsanız, onu da yazabilirsiniz.

  29. Formları İşleme “ENCTYPE=”.....” şeklinde yazılan bu bölümü doldurmazsanız, varsayılan şifreleme yöntemi, HTTP’nin standart kodlama yöntemi olan MIME olacaktır.

  30. Formları İşleme • Gönderilen verilerin ikinci şahıslar tarafından okunmasını imkansız hale getirmek için Enctype kısmına text/plain girilmelidir

  31. UYGULAMA

More Related