HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html form örnekleri
html form oluşturma
html form elemanları
html form example
html form action nedir
html form çeşitleri
html form ekleme
html form code
html form kodu
html form komutları
html form types
html form yapma
html form yapısı
html form yapımı
html form yazma
html form action nedir
html form actions
html form action code
html form action input
html form method nedir
html form method put example
html form methods
html form action method get
html form method get example
html form method get and post
html form method example
form method in html
html input types
html input name or id
html input placeholder font

HTML Form

HTML Form
Html
<form action="iletisim_kaydet.php">


  <fieldset>


    <legend>Ziyaretçi Bilgisi</legend>


    İsminiz:<br>


    <input type="text" name="isim_kutusu" placeholder="İsminiz">


    <br>


    Soyisminiz:<br>


    <input type="text" name="soyisim_kutusu" placeholder="Soyisminiz">


    <br><br>


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


  </fieldset>


</form>

Web sitelerin olmassa olmazı form elemanlarına geldi sıra. Her web sitesinde en azından bir iletişim formu bulunur.

Peki Ne İşe Yarar?

Formlar, kullanıcılar ile web site sahipleri arasında köprü görevi görevi görür. Formlar ile kullanıcıların çeşitli bilgilerini girmelerini isteyebilirsiniz. Bir iletişim formunda ne olur?.En basitinden "Adı Soyadı","Mesaj","Eposta" kutuları olur. Bu kutulara ziyaretçi isterse doldurur ve "Gönder" butonuna basarak web site sahibine mesajı ulaşmış olur.Bu dinamik bir sistemdir bu yüzden html,css dillerinden sonra üçüncü bir dil olan php yada asp bilmelisiniz.

Bu Dili Bilmek Zorunda Mıyız?

Eğer profesyonel bir site yapıcaksanız bilmek zorundasınız aksi taktirde birçok şey manual olarak işlemek zorundasınız ve bu neredeyse imkansız birşey.

Uff. Peki Zor Olmiyacak Mı Üç Dili de Öğrenmek?

Eğer ben gerçekten bu işi öğrenmek istiyorum diyorsanız maalesef bilmek zorundasınız ama korkmayın ! Bir şeyi çok isterseniz ve peşini bırakmassanız her yada geç öğreneceksiniz. Siz sadece planlı ve programlı bir şekilde çalışın. Programınızın sonuna geldiğinde nasıl öğrendiğinizi anlamayacaksınız bile gulucuk

Kaldığımız yerden konumuza devam edelim. Şimdi ilk olarak ana etiketimiz olan <form> ile başlayalım.Bu etiket formumuzun başlangıç ve bitiş noktalarını gösteriyor aslında.

<form> parametreleri

action: Formdaki verilerin hangi sayfaya gönderileceğini belirticeğiniz dosya(Dosya Yolunu düzgün belirtmeyi unutmayın!)

method: Formdaki verileri hangi tipte göndericekseniz onu belirtin.İki gönderme tipi vardır;

get : Verileri Url"'de göstererek göndermek. Bu yöntem ile veriler URL adres satırında gözükür ve çok veriyi gönderirken hata verir, pek güvenli değildir.Ör: /iletisim_kaydet.php?isim=Enes&soyisim=Kılıç

post: Verileri Url"'de göstermeden göndermek. Bu yöntemde ise veriler adres satırında gösterilmez.Gizli bir şekilde istenen sayfaya taşır.

Not: Taşınan bu veriler üçüncü dil olan Php veya Asp ile kaydedilir.

Formumuzu bir grup içinde yazmak istiyebiliriz ama zorunlu değiliz. Beni yinede öğretmek istiyorum.Bunun için grup etiketi olan <fieldset> kullanıyoruz.Bu etiketi formun başladığı ve bittiği yer arasına gelicek şeklinde ayarlayın sonra i <legend> etiketi arasında grup ismimizi yazıyoruz ve isim bittiğinde hemen kapatıyoruz.Artık form elemanlarımızı eklemeye başlayabiliriz. Form elemanlarını detaylı olarak diğer dersimizde göstericeğim şimdilik bir başlangıç yapalım.

Form elemanlarında kullanıcının girdiği her veri "giriş" olarak ifade edilir programlama dilin bununda ingilizcesi "input". Biz sadece "text" özeliğini görüceğiz. Kullanımına bakalım.

Kullanımı:

<input type="text" name="isim_kutusu" placeholder="İsminiz">

<input> Parametreleri

type: Ziyaretçinin girmesini istediğiniz veri türünü belirtin.(Biz text özeliğini kullanacağız.)

name: Yazmış olduğunuz input etiketi hangi amaç için yazılmış ? Örneğin ziyaretçinin ismini öğrenmek için mi yoksa mail adresini öğrenmek için mi ? Bu parametre sizin direk olarak bu input etiketine erişmeniz sağlayacak çünkü sayfanızda birden fazla input etiketi olacaktır. Bunu bildiğiniz insan isimleri gibi düşünebilirsiniz ama unutmayın insan isimleri birbirlerine benzer aynı isimde iki tane "Enes" olabilir siz aynı name değerini iki input etiketine birden vermeyin. Bu bütün Html dili etiketleri için geçerlidir bunu unutmayın !

placeholder: Bir çok formlarda gölgeli bir şekilde yazı kutularında "İsminiz" yada arama kutularında "Ne aramak İstiyorsunuz?" diye bir yazı görmüşsünüz. İşte bunu bu parametre sayesinde yapıyoruz.

Bu formumuzda sadece ziyaretçiden sadece isim soyisim bilgilerini girmesini istiyelim. Diğer dersimizde ayrıntılı olarak diğer form elemanlarını da işleyelim. Bu dersimizde sadece temel olarak nasıl bir form oluştururuz onu göstermek istedim.Şimdi de buton ekleyelim.

Bunun için type parametresini "text" değilde "submit" olarak değiştiriyoruz ve butonumuzun üstünde yazmasını istediğimiz yazımızı giriyoruz bu "Gönder" yada "Kaydet" olabilir.

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

Formumuzun son halini kod editöründe görebilir ve istediğiniz şekilde değiştirebilir ve test edebilirsiniz.



Paylaş:

Enes KILIÇ
Webmaster