HTML'de Formlar

geceninmavisi Cuma Ağus. 08, 2008 1:57 am

HTML'de Formlar

HTML'de form kullanımı

1. Formlar
Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki
veri alışverişini sağlamak için ideal bir araçtır.

Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

1.1. etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir.

Genel kullanım

1.1.1. Action
Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir.

1.1.2. Method
Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir.
GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye yönlendirir.

1.1.3. Target
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede
belireceğini gösterir. Pencere isimleri HTML 1 modülü bağlantılar konusunda da
gösterdiğimiz �_blank� , � _top� gibi değerlerden biri olabilir.

1.2.
Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde
belirtilerek farklı girdilerin alınmasını sağlar.
Genel kullanımı:
SIZE=boyut SRC=adres TYPE=tip VALUE=değer>
Kullanılacak Parametre Görevi
ALIGN Elemanın form üzerinde nasıl konumlanacağını belirtmek için
kullanılır (left, center, right). Eğer type değeri bir resim olarak
atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini
belirler. Top, middle veya bottom değerlerinden birini alabilir.
CHECKED Kontrol olarak bir işaretleme veya seçim kutusu
kullanıldığında CHECKED değeri bu kutuların işaretlenmiş
olarak karşımıza gelmesini sağlar.
MAXLENGTH �text� ve �password� elemanlarında girilebilecek en çok
karakter sayısını belirtmek için kullanılır. Öntanımlı değeri
sınırsızdır.
NAME Girilen verinin hangi değişken ismi altında
değerlendirileceğini belirtmek için kullanılır. Mutlaka
belirtilmelidir.
SIZE �text� ve �password� elemanlarında karakter sayısını,
diğerlerinde ise piksel cinsinden genişliği belirtmek için
kullanılır.
SRC "image" elemanında resim dosyasını belirtmek için kullanılır.
TYPE Eleman türü belirtilir. text, password, checkbox, radio,
submit, reset, file, hidden, image, button değerlerinden biri
kullanılır.

1.3. Form Nesneleri

1.3.1. CheckBox
Formumuza onay kutuları eklemek için kullanılır.

1.3.2. Radio
Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup
içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine atanmalıdır.

1.3.3. Text
Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu
kontrolle birlikte kullanılabilir.

1.3.4. Image
Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar.
Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu
URL'yi göstermelidir.

1.3.5. Password
Formumuza parola yazılabilecek alan eklemek için kullanılır. �text� elemanından
farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu �*� işareti de olabilir.

Adı:

Soyadı:
Kullanıcı:

Parola:

...

1.3.6. Textarea
Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır.

1.3.7. Reset
Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.

1.3.8. Submit
Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir.

Uygulama

Form Etiketleri

Sanal Sınıf

Kullanıcı Adı:

E-posta Adresi:

İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.

</div></div></div><div class="postprofile" id="profile933"><dl><dt><img loading="lazy" src="https://2img.net/i/fa/i/avatars/gallery/Divers/Divers_22.gif"   alt="geceninmavisi" style="max-width: 200px; max-height: 600px"  /><br /><strong style="font-size:1.2em">geceninmavisi</strong></dt><dd>*** FORUM KRAL ÜYE ***<br /><img src="https://2img.net/i/itest/ranks/stars/stars6.gif"   alt="*** FORUM KRAL ÜYE ***" title="*** FORUM KRAL ÜYE ***" loading="lazy" /><br /></dd><dd  class="dd_award left"></dd><dd class="award_more"></dd><dd><br /></dd><dd><span class="label"><span style="color:#000000;"></span></span> <img src="https://2img.net/i/fa/subsilver/icon_minigender_male.gif" alt="Erkek" title="Erkek" /><br /><span class="label"><span style="color:#000000;">Mesaj Sayısı</span> : </span> 160<br /><span class="label"><span style="color:#000000;">Yaş</span> : </span> 42<br /><span class="label">Kayıt tarihi : </span> 07/08/08<br /></dd><dd><br /></dd><dd>  </dd></dl></div><div class="clear"></div><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button "  data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>Like</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>Dislike</span><span class="rep-nb" style="display:none;"></span></button></div><p class="right"><a href="#top"><img class="sprite-arrow_prosilver_up" src="https://2img.net/i/empty.gif"   alt="Sayfa başına dön" loading="lazy" /></a> <a href="#bottom"><img class="sprite-arrow_prosilver_down" src="https://2img.net/i/empty.gif"   alt="Aşağa gitmek" loading="lazy" /></a></p><span class="corners-bottom"><span></span></span></div></div><a name="bottomtitle"></a><p class="left-box"><a href="#top"><img class="sprite-arrow_prosilver_up" src="https://2img.net/i/empty.gif"   alt="Sayfa başına dön" loading="lazy" /></a></p><div class="clear"></div><div class="noprint"><p class="right"></p></div><a name="quickreply"></a><hr /><div class="topic-actions"><div class="buttons"></div><div class="pathname-box"><p><a class="nav" href="/forum">|| HAYATTA HER ŞEYİ PAYLAŞAN BİR PLATFORM || TÜRKİYENİN YÜKSELEN YILDIZI || HAYAT BURDA ||</a><a class="nav" href=""></a> :: <a href="/f36-web-programlama" class="nav"><span>Web Programlama</span></a></p></div><div class="pagination"><strong>1</strong> sayfadaki <strong>1</strong> sayfası</div></div><div class="clear"></div><form action="/viewforum" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><fieldset class="jumpbox"><label>Buraya geçin: </label><select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Bir Forum Seçin</option><option value="-1"></option></select><input type="hidden" name="tid" value="26ecf03828ea0c66e9800998ecf8427e" /> <input class="button2" type="submit" value="OK" /></fieldset></form><div class="h3"><strong>Bu forumun müsaadesi var:</strong></div>Bu forumdaki mesajlara cevap <strong>veremezsiniz</strong><br /><div id="ef5de5cb" style="clear:both;"><div align="center"><div>    <div id="taboola-below-desktop-forum-thumbnails" style="max-width:1000px; background-color: #fffd"></div>
    <script type="text/javascript">
      window._taboola = window._taboola || [];
      _taboola.push({
        mode: 'thumbnails-desktop-a',
        container: 'taboola-below-desktop-forum-thumbnails',
        placement: 'Below Desktop Forum Thumbnails',
        target_type: 'mix'
      });
    </script></div></div></div><div style="height:3px"></div></div></div></div></div><div id="emptyidright"></div></div></div></div></div><div id="page-footer"><div class="navbar"><div class="inner"><span class="corners-top"><span></span></span><ul class="linklist clearfix"><li class="footer-home"><a class="icon-home" href="/forum" accesskey="h">Anasayfa</a></li><li class="rightside"><strong><a href="http://www.yetkinforum.com/" target="_blank">Yetkinforum.com</a></strong> | <span class="gensmall">©</span><a href="https://www.yetkinforum.com/phpbb" target="_blank">phpBB</a> | <a name="bottom" href="https://help.forumotion.com/" target="_blank">Bedava yardımlaşma forumu</a> | <a href="/abuse?page=%2Ft932-html-de-formlar&report=1" rel="nofollow">Suistimalı göstermek</a> | <strong><a href="/latest" target="_blank">Son tartışmalar</a></strong></li></ul><span class="corners-bottom"><span></span></span></div></div><p class="copyright"><strong></strong></p></div></div></div></div></div><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'https://hayatburda.yetkinforum.com/topicit/index.php/connect','data-version' : '1','data-lang' : 'tr'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[
fa_endpage();//]]></script><script type="text/javascript">
    var vglnk = { key: '9019de09e2fbd24ca1be00a9fededd9e' };

(function(d, t) {
        var s = d.createElement(t); s.type = 'text/javascript'; s.async = true;
        s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>    <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script></body></html>