5 Kasım 2012 Pazartesi

Blogger Arama Kutusu Ekle


Blogunuzdaki içerik sayınız arttıkça zamanla siz bile yazdığınız şeyi blogunuzda bulmak için baya bir vakit harcarsınız, birde blogunuza gelen ziyaretçileri düşünün, bu yüzden blogunuza gelen ziyaretçilerin aradığını rahatlıkla bulabilmesi için blogunuza mutlaka arama kutusu eklemelisiniz.Blogger kullanıcıları blogunuza özel entegrasyonu yapılmış ve temanızın rengine uygun arama kutusunu blogunuza basit bir yöntemle ekleyip ziyaretçilerinizin blogunuzda aradığını anında bulmalarına yardımcı olabilirsiniz.
Arama kutularını blogunuza eklemek için:
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javasript yolunu takip edip hangi arama kutusunu blogumuza eklemek istiyorsak aşşağıdaki kodlardan ona ait olan kodu kopyalıyoruz, açılan gadgetimizin içine yapıştırıp kaydediyoruz.
1.Arama Kutusu Stili:
search box style2
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_ruA9ydDrm3I6KTH7LJ06O1cZM7PWyntKDu4Ur4odXGDTTt7sYBJBqcJ8-Xa5kwso2laL_R6RtR1-By_EjbOTlEbubsDHxjlOSFFtO4qG8SuIEN_lR4knZ_dH-cL1iMmm-QC2aMGd35Z/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Arama..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
2.Arama Kutusu Stili:
search box style1
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBTHI6tiARuchTbR7V2A-PwHBG0tyBErpKXLo10JkUHFYGI7FPb2OYLPskRKAxpc5VP9CGRdcYw2K4ojHjo41w0itMluqMBphAgEbdmuR_KAhJBUZ-AY3J0oMk14k4uO-wH1DqxZCthTB/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="
Arama..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
3.Arama Kutusu Stili:
search box style3
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRphjby4Tu0Ka3dx9sWn-d1JLsCPyPDKrwEz6KAqH_GBo0BVS46sJaWuWNEQSWRz8ozoFKzJiWWXdrTcHrBG7v7uESuQ1GiaSudgl4V_BOC8fZgc5NhQWrVB7594f3yKTlbwAiWCIkaq4j/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="
Arama..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
4.Arama Kutusu Stili:
search box style4
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSSFK75aPFWfcvldu7QC7CNyPjr20J9N6cWHf6hOQw_9iYmV0X9LdR_wqe2pi3d_Nss0lmfj87IwNJuFaZIcJUal5rIOncMj0qoI_zfqGMKMDw7IDvmqdqzwBKtN0zhGBnpeqJEKDE1ve/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
5.Arama Kutusu Stili:
search box style5
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8NLJkaVoXpXITnbZ1cykhqGpGiJAp1QthvScHx1i-5ApLVWmF_VP_0RPNBxl8rYZ6Z3QsdgrenIZ1R7KemoxMmaJNW-20eG-8hLBo7eYp7-t0H8t6MQ3PHjiHPm6sL7RJ18lS_Cv4TCs/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
6.Arama Kutusu Stili:
search box style6
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQPiEK-cAiJLUCKByIKH1G_XINvfu4uS3FjNZiDnpxGQVI1hjwnwtfnKsCiyYObPPQTe6bYas58MvxLWp91V9LUWg0zknJbPXAt3hW9guhwvSR37FYAIECx9eu_z2LcJmYR8gppgXYHO8/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

4 Kasım 2012 Pazar

HTML Resimler

Kod : <img src=”dosyaismi.gif”>

Text ve Gömülen Resimin Düzeni

Kod : <img…> belirteciyle bazı özellikleri kullanarak text ve resim arasında nasıl bir düzen olmasını istiyorsanız ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağıdaki efektleri yapabilirsiniz:

align=top


Kod:

<img align=top src=”dosyaismi.gif>


Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı 
boşlukları dolduruyor.

align=middle

Kod:

<img align=middle src=”dosyaismi.gif”>


Yazı buraya gelecek. Bu sefer “align=middle” yani “orta” dediğimiz
için yazı grafiğin ortasından devam ediyor.


align=bottom (normal)

Kod:

<img align=bottom src=”dosyaismi.gif”>

Yazı bu sefer buraya gelecek. “align=bottom” demekle yazının en

alt kısımda olacağını belirttik.

HTML Dökümanımıza Resim Yerleştirelim

Bu çalışmada, üzerinde çalıştığımız dökümana bir giriş resmi koyacağız.

Çalışmanızı, açık değilse tekrar açın.
Text editörünüzde volkanlar.html dosyasını açın.
<h1>Volkanlar Sayfası<h1> başlığının üzerine şunu yazın:


Kod:

<img src=”lava.gif”>


Bu belirteç, sayfanızın en üstüne daha önce bulduğunuz volkan resimini yerleştirir. “lava.gif”, bu dosyanızın ismidir; eğer dosyanızın ismi değişikse, “lava.gif” yerine o ismi yazmalısınız.
Dosyanızı kaydedin ve browserınızda tekrar yükleyin.

NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız.

Resimi yerleştirdiğinizde aklınıza neden resim belirtecinden sonra <p> belirtecini kullanmadığınız gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başlık <hN> belirteci olmasıydı; daha önce gördüğümüz gibi bir browser başlık belirteçlerinden önce ve sonra bir satır boşluk bırakır (paragraf belirtecine gerek kalmaz).

HTML Arka Plan

Varsayılan olarak sitenizin arka planı beyaz görünür. Bu sitenize belli bir sadelik, ferahlık getirsede, çoğu zaman bunu değiştirmek isteriz. Farklı bir renk, hatta belli bir fotoğrafla arka planınızı döşemek ister miydiniz? Bu ders işte bunun için. Bunu yapmak içinde her zamanki gibi body etiketini kullanacağız ama bu sefer biraz farklı bir şekilde. Bu sefer kodlarımızı body etiketinin altına değil, bizzat body etiketinin yanına yazacağız. Şöyleki "body bgcolor="#000000" Bu kod arka planı siyah yapacak mesela. bgcolor etiketi arka planın rengini belirlerken kullanılıyor. #000000 ise siyah rengin HTML dilindeki karşılığı. Bunun gibi tüm renklerin karşılıklarını netde aratıp bulabilirsiniz. Şimdi biz yapacağımız örnekte arka planı siyah, yazı renginide beyaz yapalm mesela. Bunun için aşağıdaki kodu kullanmamız gerekir.

Html Arka Plan Dersleri

Html Arka Plan Dersleri

Ücretsiz blog oluşturma servisleri


Ücretsiz barındırma servislerinin sunduğu blog hazırlama araçları sayesinde extra bir yazılım veya teknik bilgiye ihtiyaç duymadan, dakikalar içerisinde blog oluşturmak mümkün.

Ücretsiz blog oluşturabileceğiniz bir çok servis bulunuyor bu servislerden öne çıkanları Wordpress,Blogcu ve Blogger  bu 3 servisin de ortak noktaları her hangi bir extra kurulum gerektirmeden tarayıcı üzerinden çalışıp HTML veya tasarım bilgisine gerek duymadan kendi blog’unuzu oluşturmanıza olanak tanımaları.


yanaok_thumb2Bu 3 sistemi de demenizde fayda var her sistemin kendine göre artıları ve eksiklikleri bulunuyor biraz zamanınızı ayırarak size uygun olan platformun hangisi olduğuna karar verebilir blog’unuzu kolayca oluşturabilirsiniz.

Biz şimdi yazımıza Blogger’ı  ile devam edelim.


Neden Blogger ?

blogger_logoBlogger’ın en sevilen servislerin başında gelmesinin ilk nedeni kesinlikle çok fazla esnek olması ve kolay kullanımından kaynaklanıyor. 

Google’un ücretsiz bir servisi olan Blogger size sınırsız bant genişliğinin yanında ücretsiz olarak  “http.blogunuzunadı.blogspot.com” diye birde alan adı sunuyor bu alan adını daha sonra cüzi rakamlar karşılığında satın aldığınız  “www.blogadınız.com” “Net” veya “Org” olarak ta  değiştirebilirsiniz.

Biraz zaman ve uğraş ile blog’unuza tam bir site havası katmak yine sizin elinizde.

Biraz “HTML” bilgisi ile blog’unuzun tasarımını  kişiselleştirebileceğiniz gibi internetten bulabileceğiniz ücretsiz şablonları kullanarak ta blog’unuzu benzersiz bir hale getirebilirsiniz.

Bunlara artı olarak ta  çeşitli Google uygulamalarının yanında geliştiricilerin Blogger için oluşturduğu  “gadget”lardan istediğinizi  blog’unuz da kullanarak blog’unuzun sıradanlıktan kurtarabilir ziyaretçilerinizin daha iyi vakit geçirmelerini sağlayabilirsiniz.

Ayrıca  bütün gelirini reklam hizmetlerinden elde eden Google’un, blog’unuza siz istemediğiniz sürece reklam yerleştirmemesi de cabası.

Tabi bu sizin blog’unuz da reklam yayımlayarak gelir elde edemeyeceğiniz anlamına da gelmiyor.

Güzel bir tasarım ve 10$ karşılığında alacağınız kendi alan adınız ile Blogger’ı sadece bir hosting firması gibi kullanmanızda mümkün.

Blogger ile kendi blog'unuzu oluşturun


Bir blog sahibi olmak istiyorsanız, görseller için grafik bilgisine, içerik için programlama bilgisine sahip olmalısınız. Ayrıca hazırladığınız blog’un ziyaretçilere ulaşabilmesi için bir alan adı ve bunun yanında barındırma ( hosting ) hizmetine sahip olmalısınız.

Yani uğraşmanız gereken fazlası ile detay olacaktır.

yanaok_thumb2İşte bu konuda Blogger yardımınıza koşuyor size hiç bir teknik bilgi bilmenize gerek kalmadan 3 adımda kolayca  blog’unuzu oluşturmanızı sağlayacak platformu ve “blog’unuzunadı.blogspot.com” diye bir alan adının yanında sınırsız banvit (bant) genişliğe sahip barındırma hizmetini ücretsiz sunuyor.


3 Adımda Blog’unuzu Oluşturun

Blogger’ın en güzel taraflarından biriside kuşkusuz kullanıcıya hiç zorluk çıkarmayan yapılandırma süreci.Bu sayede 3 adımda blog’unuzu oluşturabiliyorsunuz.

1_T
Blogger’ın ana sayfasına girdiğinizde sizden Google hesabıyla oturum açmanızı isteyen bir sayfa ile karşılaşıyorsunuz , eğer bir Google hesabınız yoksa buradan kendinize bir hesap oluşturabilirsiniz. Hesabınızı oluşturmak için Hotmail,Yahoo,Gmail gibi her hangi bir e-mail servisini kullanabilirsiniz.
Hesabınızı aldıktan sonra yapmanız gereken Blogger’ın ana sayfasından aldığınız Google hesabı ile giriş yapmak.

200
2_TBlog oluşturun yazan butona tıkladıktan sonra açılan sayfada Blog başlığı yazan kısma istediğiniz blog Blog adresi yazıyorsunuz.Blog adresiniz uygunsa http://fatihcetinn.blogspot.com şeklinde oluşturuluyor.
blogger-2-adım

Burada seçiceğiniz blog başlığı ile blog’unuzun adresinin aynı olması arama motorlarında üst sıralarda çıkmanızıda etkileyecektir.


3_T
blogger-şablon-seçinSon olarak sıra blog’unuzun tasarımını belirleyecek olan şablonu seçmeye  geliyor açılan sayfada bir çok blogger şablonu(template) bulunuyor fakat siz bunlara bağlı kalmak durumunda olmadığınız için her hangi bir şablonu seçerek bu adımı geçebilirsiniz daha sonra internetten bulduğunuz her hangi bir şablonla blog’unuzun tasarımını özelleştirebilirsiniz.


Bundan sonra yapmanız gereken tek şey blog’unuzun içeriğini doldurmak.

Blog Nedir ?


Bloglar yani diğer adıyla, Web günlükleri(“weblog”) belirli bir konusu olmayıp her hangi bir konu hakkında güncel haberler, olaylar, politika, günlük hayat, spor, teknoloji, müzik, yemek hatta bakkal mehmet amcanın sorunları hakkında bile yazılar yazıp bunları  internette ters kronolojik sırayla yeniden eskiye doğru paylaşabilmenizi sağlayan online platformlardır.

Blogları klasik bir internet sitelerinden ayıran en önemli etken çok daha kolay hazırlanıp hayata geçirilebilir olması.Blogiçinde yazarların, blog ziyaretçileri ile etkileşim sağlayabilmesi için yorum özelliği barındırması sayesinde yazar ve blog ziyaretçilerinin katkıları ile içeriğin zenginleşip ön plana çıktığı online platformlar olarak da düşünebilirsiniz.

İngilizcedeki “web” ve “log” kelimelerinin hızlı okunması ile oluşan “weblog” kavramının zamanla yaygınlaşması ile “blog” ve bunlara içerik giren“blogger” gibi terimlerinde doğmasını sağlamıştır .



 

Blog’umla neler yapabilirim ?

Benim de yaşananlara, sanata, spora, magazine, ilgi alanlarıma kısaca hayata dair    söyleyeceğim iki çift sözüm var diyorsanız sizinde bir bloga ihtiyacınız var demeketir.

Yazılarınızı, beğendiğiniz, ilgi duyduğunuz veya kendi ürettiğiniz amatör/profesyonel içeriklerle zenginleştirebilir, blog’unuza  eklediğiniz videoları, resimleri tanıdığınız veya tanımadığınız herkesle paylaşapıp onların fikirlerinide alabilirsiniz.

Kendi topluluğunuzu oluşturun

blog siteleriBlog’unuzu tek başınıza güncelleyebileceğiniz gibi arkadaşlarınızı bir araya toplayabilir sizinle aynı ilgi alanına sahip insanlarla birlikte ilgi duyduğunuz bir alanda (sanat, spor, magazin, teknoloji, siz seçin...) kısaca sizinle aynı şeyleri düşünen ve aynı duyguları paylaşanlarla,  kendi ürettiğiniz içerikleri internette paylaşabilirsiniz.

Resimlerinizi paylaşın

Beğendiğiniz, ilgi duyduğunuz veya kendi çektiğiniz amatör veya profesyonel
fotoğrafları, Blog’unuzda oluşturabileceğiniz kişisel galerilerinizde herkesin beğenisine sunabirsiniz.

Videolarınızı paylaşın

blog nedir nasıl yazılırGünümüzde internet denince akla ilk gelenlerden biri videolar.
Gittiğiniz konserde çektiğiniz veya Yotube,Dailymotion gibi video akışkanı gibi servislerde beğendiğiniz bir videoyu, blog’unuzun sayfalarına ekleyerek paylaşabilirsiniz.

Müziklerinizi paylaşın

blogger müzikBeğendiğiniz dinlediğiniz sanatçıların parçalarını kendi blogunuzda herkesle paylaşabilirsiniz, internnete bulabileceğiniz bir çok servis ve eklenti sayesinde istediğiniz müziği tek tek veya liste halinde kolayca paylaşabilirsiniz.


KAYNAK: http://www.bloggermodifiye.com/2010/01/blog-nedir_05.html#more

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

Bir form oluşturmak için <form>...</form> 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
 
<form action=url method=get-post target=pencere>...</form>


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

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.

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.

<input> 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ı:
 
<INPUT ALIGN="konum" [CHECKED] MAXLENGTH="uzunluk" NAME="isim" SIZE="boyut" TYPE="tip" VALUE="değer" SRC "image">


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.

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

 
<HTML>
<body >
<FORM ACTION=' http://sitem.com/form.php' METHOD=POST>
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
</FORM>
</body>
</HTML>


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.

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.

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.

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.

 
<HTML>
<body >
<FORM ACTION=' http://sitem.com/form.php' METHOD=POST>
<input type="radio" name="kutu" value="1"> HTML<br>
<input type="radio" name="kutu" value="2"> PHP<br>
<input type="radio" name="kutu" value="3"> MySQL</FORM>
</body>
</HTML>
Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">
Kullanıcı:
<input type="text" name="username"><br>
Parola:
<input type="password" name="password">
<input type="submit" name="submit" value="Gönder">
</FORM>
</body>
</html>
 



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.

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

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

Uygulama

 
<html>
<head><title>Form Etiketleri</title><head><body>
<h1> Sanal Sınıf</h1>
<form action="http://sitem.com/form.php" method="post"><br>
Kullanıcı Adı:<input type="text" name="ad"><br>
E-posta Adresi:<input type="text" name="eposta"><br>
İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.
<textarea name="mesaj" rows="10" cols="50"><br>
<input type="reset" name="reset" value="Temizle">
<input type="submit" name="submit" value="Gönder">
</FORM>
</body>
</html>


KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-formlar.html