Webmasterlık ve pc bilgileri
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Webmasterlık ve pc bilgileri

Bilgi ve eylence amaçlı kurulmuştur
 
AnasayfaAramaLatest imagesKayıt OlGiriş yapOyun Salonuİletişim
Arama
 
 

Sonuç :
 
Rechercher çıkıntı araştırma
En son konular
» LG Widebook R590 hız canavarı
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:49 pm tarafından Admin

» 2010'da bu teknolojiler konuşulacak!
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:48 pm tarafından Admin

» Symbian tüm zincirlerinden kurtuldu
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:45 pm tarafından Admin

» Google tek başına web'in %13'ünün sahibi!
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:44 pm tarafından Admin

» Nokia'dan yeni Symbian cep: C5
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:44 pm tarafından Admin

» iPhone eskisi gibi değil
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:44 pm tarafından Admin

» Core i7 920: Altı çekirdekli ne zaman geliyor
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 8:44 pm tarafından Admin

» Scny Eriosson Xperia Pureness ile geliyor!
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 1:24 pm tarafından Admin

» Microsoft'un iki kalesi de düştü!
html ile form olusturma * Icon_minitimeC.tesi Şub. 06, 2010 1:24 pm tarafından Admin

Tarıyıcı
 Kapı
 Indeks
 Üye Listesi
 Profil
 SSS
 Arama
Ortaklar

 

 html ile form olusturma *

Aşağa gitmek 
YazarMesaj
Admin
Admin
Admin


Mesaj Sayısı : 120
Tecrübe Puanı : -2147483639
Kayıt tarihi : 03/02/10

html ile form olusturma * Empty
MesajKonu: html ile form olusturma *   html ile form olusturma * Icon_minitimeÇarş. Şub. 03, 2010 8:58 pm

HTML ile hoş ve kullanışlı bir form oluşturalım.

Hemen hemen bütün web sitelerde en basitinden bir iletişim formu oluyor ki bu şart. Ziyaretçilerinizle iletişim kurabilmeniz için ziyaretçi defterleri, iletişim formları vb. şeylere gerek duyulur. Şimdi biz HTML' de bir form oluşturacağız. Bu form ufak çaplı birşey olmayacak.

1- Şimdi hemen not defterini açıyoruz.(Sizler isterseniz Dreamweaver, Front Page gibi programlarla da yapabilirsiniz. Ben not defterini tercih ediyorum.)

İskelet yapımızı oluşturlarım. İskelet yapımız şu şekilde olacak;

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


2- İskelet yapımızı oluşturduktan sonra sayfamızı .htm olarak kaydedelim. Bunun için Dosya Menüsü> Farklı Kaydet ve açılan ufak pencerede Dosya İsmine index.htm diyerek tamama tıklayın.

3- <body> taglarımızın arasına girelim ve formumuzu oluşturmaya başlayalım. Bunun için öncelikle <form> etiketini kullanacağız.

<form name="ilkformum" action="kaydet.asp" method="post">

name: Bu bizim formumuzun ismini belirmemektedir.

action: Oluşturacağımız bu formun çalışması için HTML bize tek başına yardımcı olamıyor. Bunun için Asp veya Php' ye başvurmamız gerekecektir. Ama biz bu dersimizde sadece formu oluşturacağız.

4- Öncelikle kullanacağımız araçları tanımamız lazım.

Form oluşturur kullanacağımız etiketler:

text:
Bu etiket ile web site kullanıcılarına yazı yazdırabiliriz. Ancak "text" etiketi genelde kullanıcı adı, parola gibi az kelimeler içerin yerlerde kullandırılır.

password:
"text" etiketi ile kullanıcı adı, parola gibi az kelimeler içerin yerlerde kullandırıldığını söylemiştim. Ancak bu password etiketi ile de yapabilirsiniz. Ancak yukarıdaki resimde gördüğünüz gibi kullanıcı bu kutucuğa yazı yazdığı zaman yuvarlaklar çıkar. Bu etiket çoğu zaman şifre bölümlerinde kullandırılır.

textarea:
Bu etiket "text" etiketine benzer bir etikettir. Ancak bunun bazı farkları var. Bunu istediğiniz boyuta getirebilir, ziyaretçilerinize mesaj vs. yazdırabilirsiniz. Yani bu etiket ziyaretçilerinize çok fazla yazı yazdıracağınız zaman kullandırılır.

radio:
Bu etiket kullanıcılarınıza sadece bir tane seçim yapmalarını sağlar.

checkbox:
Yurkarıda "radio" etiketi ile kullanıcılarınıza sadece bir tane seçim yapmalarını sağlayabileceğinizi söylemiştim. Bu "checkbox" etiketi ile kullanıcılarınıza birden fazla seçim yapmalarını sağlayabilirsiniz.

submit:
Bununla kullanıcıların formu doldurduktan sonra bilgileri bize göndermeleriniz sağlıyoruz.

reset:
Bununla ise kullanıcıların doldurdukları formun temizlemelerini sağlıyoruz.

Bizim oluşturacağımız formda sadece bunları kullanacağız. Bizim kullanacağımız etiketlerden başka etiketlerde bulunmaktadır.

5- Şimdi etiketleri öğrendikten sonra uygulamaya geçelim. Öncelikle bir kullanıcı adı kısmı yapalım. Bunu "text" etiketini kullanarak yapacağız.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="kullaniciadi" value="Kullanıcı Adınız">
</form>
</body>
</html>


Yukarıdaki kodlarda daha önce size bahsetmediğim bir etiket görüyorsunuz. Bu etiketin adı "value". Bu etiket ile oluşturduğunuz "text" veya "textarea" etiketlerinde kullanıcıdan önce sizin bu kutucukların içlerini açıklama vs. yazmanızı sağlar. Tabii kullanıcılar bunu silebilir ve yerine kendi istediklerini yazabilirler.

6- Şimdi de bir parola kısmı ekleyelim. Ancak bunu "text" ile değil, "password" ile yapalım.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız">
<input type="password" name="adisoyadi" value="Parola">
</form>
</body>
</html>


7- Bir e-mail adresi, ev adresi, telefon numarası bölümleri ekleyelim.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız">
<input type="password" name="parola" value="Parola">
<input type="text" name="email" value="E-mail Adresiniz">
<input type="text" name="tel" value="Telefon Numaranız">
<input type="text" name="adres" value="Ev Adresiniz">
</form>
</body>
</html>


8- Şimdi "radio" ve "checkbox" etiketlerini kullanalım. Öncelikle "radio" etiketini kullanalım. Bunu kullanıcının cinsiyetini öğrenmek için kullanalım.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız">
<input type="password" name="parola" value="Parola">
<input type="text" name="email" value="E-mail Adresiniz">
<input type="text" name="tel" value="Telefon Numaranız">
<input type="text" name="adres" value="Ev Adresiniz">
Cinsiyetiniz:
Bay: <input type="radio" name="bay"> Bayan: <input type="radio" name="bayan">
</form>
</body>
</html>


9- "radio" etiketimizi kullandıktan sonra "checkbox" etiketimizi kullanalım. Bunu da (biraz mantıksız olacak ama) kullanabildiniz progamlar olarak kullanalım.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız">
<input type="password" name="parola" value="Parola">
<input type="text" name="email" value="E-mail Adresiniz">
<input type="text" name="tel" value="Telefon Numaranız">
<input type="text" name="adres" value="Ev Adresiniz">
Cinsiyetiniz:
Bay: <input type="radio" name="bay"> Bayan: <input type="radio" name="bayan">
Kullanabildiğiniz Programlar:
Dreamweaver: <input type="checkbox" name="dreamweaver"> Photoshop: <input type="checkbox" name="photoshop">
</form>
</body>
</html>


10- Bu seferde "textarea" etiketini kullanarak ziyaretçilerin bize bir mesaj göndermelerini sağlayalım. Ayrıca "textarea" etiketimizin büyüklük ve genişliğinide verelim.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız">
<input type="password" name="parola" value="Parola">
<input type="text" name="email" value="E-mail Adresiniz">
<input type="text" name="tel" value="Telefon Numaranız">
<input type="text" name="adres" value="Ev Adresiniz">
Cinsiyetiniz:
Bay: <input type="radio" name="bay"> Bayan: <input type="radio" name="bayan">
Kullanabildiğiniz Programlar:
Dreamweaver: <input type="checkbox" name="dreamweaver"> Photoshop: <input type="checkbox" name="photoshop">
<textarea name="mesaj" value"Mesajınızı Yazınız" rows="5" cols="30">
</textarea>
</form>
</body>
</html>


11- Şu an görünüm çok iğrenç değil mi? Çünkü bütün herşey yan yana. Bunun için <br> etiketini kullanalım. <br> etiketi bir alt satıra geçmemizi sağlar.

<html>
<head>
<title></title>
</head>
<body>
<form name="ilkformum" action="kaydet.asp" method="post">
<input type="text" name="adisoyadi" value="Adınız ve Soyadınız"><br>
<input type="password" name="parola" value="Parola"><br>
<input type="text" name="email" value="E-mail Adresiniz"><br>
<input type="text" name="tel" value="Telefon Numaranız"><br>
<input type="text" name="adres" value="Ev Adresiniz"><br>
Cinsiyetiniz:
Bay: <input type="radio" name="bay"> Bayan: <input type="radio" name="bayan"><br>
Kullanabildiğiniz Programlar:
Dreamweaver: <input type="checkbox" name="dreamweaver"> Photoshop: <input type="checkbox" name="photoshop"><br>
<textarea name="mesaj" value"Mesajınızı Yazınız" rows="5" cols="30">
</textarea>
</form>
</body>
Sayfa başına dön Aşağa gitmek
http://frisby.benimforum.org
 
html ile form olusturma *
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» HTML nedir? *
» html kodlari ve anlamlari *

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
Webmasterlık ve pc bilgileri :: Web Master :: Html-
Buraya geçin: