Gorsel Programlama

Form Oluşturma Html-Web Tasarımı Ve Programlama Ders 6

Tablo Oluşturma:

Html dilinde formlar <form></form> etiketleri arasına yazılır.

method olarak daha güvenilir olduğu için post kullanılır.

form oluştururken girdi nesneleri eklemek için input kullanıyoruz.Bu kısımda tipini(type),ismini(name),(size),hizalamasını(align),seçilme(checked) gibi özellikler kullanılabilir.

Text: Formumuza tek satırlık yazı girdisi eklemek için kulanıyoruz.

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi"><br>

</form>

</body>

</html>

çalıştıralım.

Button: Düğme eklemek için kullanılır.Düğme üzerinde yazılacak ifadeyi value’den sonra belirtiyoruz.

Örnek :


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et">

</form>

</body>

</html>

Html’de hazırlanmış form örnekleri için link : http://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : http://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

Password: Şifre girişi yapılacak durumlarda kullanılır

Ör:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et">

Şifre:<input type="password" name="sifre">

</form>

</body>

</html>

radio: Seçenek eklemek içim kullanılır.Burada dikkat edilmese gereken eğer tek bir tanesi seçilsin istiyorsanız name’lerini aynı yazmalısın.Farklı name verdiğinizde birden fazla seçim gerçekleşebilecektir.

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

Şifre:<input type="password" name="sifre"><br>

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

</form>

</body>

</html>

Checkbox: Onay kutusu eklemek için kullanılır.Seçili olmasını istiyorsanız checked veya checked=”on” yazmalısınız.(<input type=”checkbox” name=”aa” checked>)

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

Şifre:<input type="password" name="sifre"><br>

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro">

</form>

</body>

</html>

Select-option: Açılır menü eklemek için kullanılır.option etiketleri arasına seçeneklerin herbiri yazılır.Seçeneklerin hepsi select etiketleri arasına alınır.Size ile açılır menünün yüksekliğini değiştirebilirsiniz.Birden fazla seçim yapabilmek için multiple’yi kullanın.(<select name=”aa” multiple>)

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

Şifre:<input type="password" name="sifre"><br>

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

</form>

</body>

</html>

Html’de hazırlanmış form örnekleri için link : http://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : http://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

textarea: Uzun satırlı mesajlar eklemek istediğimiz zaman kulllanılır. cols ile enini , rows ile boyunu piksel olarak ölçülendiririz.Bunda input’u kullanmıyoruz.

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

Şifre:<input type="password" name="sifre"><br>

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea>

</form>

</body>

</html>

Submit:Verileri sunucuya yollamak için kullanılır.Value değeri düğme üzerine yazılan metini belirler.

Reset:Formdaki nesneleri temizlemek için kullanılır.Value değeri düğme üzerine yazılan metini belirler.


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

Şifre:<input type="password" name="sifre"><br>

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</body>

</html>

Formumuza dikkat ettiyseniz yazılar ve texler aynı hizada olmadı.Htölde hizalama için tabloları kullanabiliriz.

Mesela 1. satır için üye adı ,yanındaki text ve buton.bunlar aynı satır ve her biri bir hücre olacak şekilde tabloyu oluşturuyoruz.Diğerlerine aynı işlemler uygulanır.Kenarlıklar gözükmesin diye border=0 olarak belirtiyoruz.Ben hizalama işlemini ilk 4 satır için yaptım.Bunu diğer satırlarada uygulayabilirsiniz.

Örnek :


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

<table border="0"><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</body>

</html>

Eğer textleri biraz daha sağa hareket ettirmek isterseniz tablonun genişliğini (width) artırabilirsiniz.

Örnek:


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

<table border="0" width=400><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</body>

</html>

tablo için border=1 yaparak hizalamanın nasıl yapıldığını gözlemleyebilirsiniz.


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</body>

</html>

Burada sağa,sola,ortaya hizalama işlemlerini kullanarak formunuza farklı bir görünüm sağlayabilirsiniz.


<html>

<body>

<form action="http://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td align="right"><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</body>

</html>

fieldset:Forma kenarlık eklemek için kullanılır.

legend: Formadaki çizginin üzerine başlık eklemek için kullanılır.align kullanılarak hizalama(left:sola,center: ortaya,right: sağa) yapılabilir.ör: <legend align=”center”> gibi.


<html>

<body>

<fieldset><legend>Kişi Bilgileri</legend>

<form action="http://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td align="right"><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

<option value="sehir">İstanbul</option>

<option value="sehir">Ankara</option>

<option value="sehir">İzmir</option>

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

<input type="submit" value="Gönder">

<input type="reset" value="Temizle">

</form>

</fieldset>

</body>

</html>

Html’de hazırlanmış form örnekleri için link : http://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : http://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

Paylaş :

Yorum Yazın | Geri

20 Ekim Çarşamba,2010 Tarihinde Yayınlanmıştır. Bulunduğu Kategori : Dersler, Html

« Textbox’a Girilen Değer Kadar Listbox’a Ad Soyad Aktarma Vb.Net Rastgele Tek ve Çift Sayı Üretmek C# »

Gamze Kahyaoğlu

Cevap | Gönder

Nis 22nd, 2011 at 08:32 | #1

üye tekip programı istiyorum lütfen yardımcı olun 🙁
admin

Cevap | Gönder

Nis 22nd, 2011 at 10:00 | #2

proje isteklerinizi gorselprogram@gmail.com adresine mail atınız.
Enes Başer

Cevap | Gönder

Tem 2nd, 2012 at 08:09 | #3

Ünivde iken bir dönem boyuca saçma sapan hocalarla gördüğümüz derslerin tamamını burda bir saatte görebildim. Teşekkürler
Ahmet Yılmaz

Cevap | Gönder

Eyl 12th, 2013 at 22:13 | #4

Gönder olayını anlamadım yalnız Gönder e basınca hiç bir şey olmuyor
özgür

Cevap | Gönder

Mar 6th, 2015 at 12:39 | #5

bu bilgiler form action bölümüne ne şekilde yazmamız gerekiyor yanlızca bizim ulaşmamız için siz kendi sitenizin anasayfasını yazmışsınız ama biz nereden nasıl alacağımızı da resim örneği ile anlatırmısınız anlatımınız çok güzel
admin

Cevap | Gönder

Mar 6th, 2015 at 23:37 | #6

özgür :
E mail gönderme yani iletişim bölümünden bahsediyorsanız aşağıdaki linki inceleyin.
http://www.gorselprogramlama.com/iletisim-formu-olusturma/
ömer

Cevap | Gönder

May 8th, 2015 at 11:02 | #7

bendede buna benzer ama daha amatorce bir site var gondere basınca hıcbır şey olmuyor onu nasıl yaparım yardımcı olur musunuz?
admin

Cevap | Gönder

May 9th, 2015 at 00:45 | #8

ömer :
sitede kategoriler bölümden asp.net örneklerini incele.
ailana

Cevap | Gönder

Haz 25th, 2015 at 13:07 | #9

kolay gelsin. ben isim yada parola yazdiginda mesala yanliş yazzrsa yanına kırmızı iişaret dogru olunca mavi tik işareti oluyor ya onu nasil yapariz. simdiden tesekkuler
admin

Cevap | Gönder

Eyl 9th, 2015 at 15:55 | #10

ailana :
Aşağıdaki link işini görecektir.
http://www.gorselprogramlama.com/stok-takip-programi-c/
seda

Cevap | Gönder

Kas 15th, 2015 at 17:40 | #11

yaa bu tablo nasıl olusacak :/
admin

Cevap | Gönder

Ara 5th, 2015 at 17:30 | #12

seda :
tablo html kodları ile oluşturalacak.Kodları görmek için sayfada sağ tık yapıp kaynağı görüntüle diyoruz.
fevzi savaş

Cevap | Gönder

Oca 20th, 2016 at 22:37 | #13

Forumu İnternet E tablolara Nasıl Gönderirim Yardım Ederseniz Sevinirim
edip

Cevap | Gönder

Mar 22nd, 2016 at 18:55 | #14

textarea’yı cssden nasıl şekillendirebilirim ? jquery ile çağırmayı falan denedim fakat beceremedim. Arka plan rengini, yazı rengini v.s değiştirmeliyim.
admin

Cevap | Gönder

Mar 22nd, 2016 at 21:07 | #15

edip :
class tanımlayıp bunu çağırarak yapabilirsin.
Boray

Cevap | Gönder

Mar 23rd, 2016 at 08:08 | #16

Formu internette google e tablolara nasıl gönderebilirim?
ozgurogut

Cevap | Gönder

Mar 25th, 2016 at 15:57 | #17

Arkadaşlar üyelik formu nereye gelir bilğiler bilen var mı?Birde Resim Yükleme Yazılımı Bilen Varsa mail ya da Cvp yazabilir mi?
Muhammet Ali

Cevap | Gönder

Eyl 6th, 2016 at 07:21 | #18

Üstadım bu formu gönder butonu ile mail olarak alabilirmiyiz ?
ayşe sevinç

Cevap | Gönder

Oca 21st, 2017 at 17:35 | #19

meraba hocam ben 11.sınıf bilgisayar bölümündeyim web tasarım proje ödevimde web site sayfası tasarlamak ama benim pek bilgim yok ve proje teslim etmek zorundayım lütfen yardımcı olun kodları gerekleri acil yardimcı olursanız sevinirim dreamweaver programını kullanıyoruz okulda lütfen hocam
guzel duvar yazıları

Cevap | Gönder

Ara 7th, 2017 at 18:38 | #20

hocam ben forma resim nasıl ekleyip göndere bilirim bir türlü bilgisayardan seçtiğimr esmi göndermeden önce göremedim
admin

Cevap | Gönder

Ara 7th, 2017 at 22:51 | #21

guzel duvar yazıları:
asp net veya php kullanmalısın.
serhat kaynak

Cevap | Gönder

Şub 27th, 2019 at 07:58 | #22

arkadaşlar iyi günler tur vocher yapıcam t.c ad soyad adresi yapıp …….. nokta lanları isimleri yaptığım yerden oraya nasıl ekleme yapılabinir.. kodlamalara yeni başladım yardımcı olursanız sevinirimm

Form Oluşturma Html-Web Tasarımı Ve Programlama Ders 6

Yorum Yazın ...

Böyle bir web sayfam olsun diyorsanız iletişim bölümünden veya gorselprogram@gmail.com mail adresinden bize ulaşabilirsiniz.

Son Yazılar

Etiket Bulutu

Kategoriler

Arşiv

Bağlantılar

Kimler Sitede ?