Formlar
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Formlar PowerPoint PPT Presentation


  • 148 Views
  • Uploaded on
  • Presentation posted in: General

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!!.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Formlar

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!!


Formlar

  • Bütün HTML etiketleri gibi formlarda etiketle başlar ve biter

  • <form></form> şeklindedir.


Uyari

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


Formun b l mleri

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)


Form olu turma

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


Form olu turma1

FORM OLUŞTURMA


Formlar

  • 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


Input tag accessibility attributes giri etiketi niteliklerine eri im penceresi

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>


Formlar

  • 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


Formlar

  • 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


Formlar

  • 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?


Formlar

  • 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


Formlar

  • 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


Formlar

  • 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


Formlar

  • 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


Formlar

<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>


Formlar

  • 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


Formlar leme

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


Formlar leme1

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.


Formlar leme2

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.


Formlar leme3

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.


Formlar leme4

Formları İşleme


Formlar leme5

Formları İşleme

  • <FORM ACTION=”url” METHOD=POST veya GET>


Formlar leme6

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.


Formlar leme7

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..


Formlar leme8

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.


Formlar leme9

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.


Formlar leme10

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.


Formlar leme11

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


Uygulama

UYGULAMA


  • Login