Html Formlar

Html dilinde formlar etkileşimli web siteleri hazırlamak için kullanılmaktadır.

Etkileşimli web siteleri : Kullanıcının aktif olduğu (yorum yapma, kayıt işlemleri, giriş işlemleri, resim ekleme vb. işlemlerini yapabildiği) web sitelerine etkileşimli web siteleri denmektedir.

Formları kullanarak etkileşimli web siteleri için sayfa tasarımı yapmayı öğreneceksiniz.

Formlar etkileşimli web sitelerinin olmazsa olmazıdır.

Formlar ile neler yapılır?

  • Sosyal ağ site tasarımı
  • Arama motoru site tasarımı
  • E-ticaret Site Tasarımı
  • İletişim Sayfası Tasarımı
  • Ziyaretçi Defteri Tasarımı

Bilgi: Formlar ile kısaca kullanıcının etkin olduğu tüm web sitelerinin tasarımında formlar kullanılmaktadır.

Formlar ne işe yarar?

Html dilinde formlar kullanıcıyı etkin hale getirmek için kullanılmaktadır. 

Form Elemanları:

  • Form Etiketi
    • Action
    • Method
  • İnput Etiketi
    • Text
    • Password
    • Checkbox
    • Radio
    • Submit
    • Reset
  • Select Etiketi
  • Textarea Etiketi

Form Etiketi

Formları oluşturmak için kullanılan etiket'tir. Bu etiket form elemanlarının olmazsa olmazı'dır. Form etiketi <form> ile açılmakta ve </form> şeklinde kapanmaktadır. Bütün form elemanları bu iki etiket arasına yazılmaktadır.

Form Etiketinin önemli alt parametreleri bulunmaktadır. Bunlar:

  • Action
  • Method
Form Etiketi Kullanımı:
<form> 

</form>

Kodu Çalıştır

Form Etiketi Action Parametresi

Action parametresi forma girilen verilerin hangi sayfada kullanılacağını (işleneceğini) belirlemek için kullanılmaktadır. Action parametresi içine sayfa adresi (link) girilmektedir.

Action Parametresi Kullanımı:
<form action="sayfa_adresi">

</form>

Kodu Çalıştır

Form Etiketi Method Parametresi

Method parametresi forma girilen verilerin hangi yöntem ile gönderileceğini belirlemek için kullanılmaktadır. Method parametresi iki farklı değer alabilmektedir. Bunlar:

  • GET : Get değeri formdaki verileri sayfa adresi üzerinden gönderme işlemi yapmaktadır. Bütün girilen bilgileri sayfa adresine (linke) ekleyerek verilerin kullanılacağı sayfaya göndermektedir.
  • POST : Post değeri formdaki verileri hiç bir yerde göstermeden direkt verilerin kullanılacağı sayfama göndermektedir. Post değeri daha güvenlidir.

değerlerini alabilmektedir.

 

GET Yöntemi Ne Zaman Kullanılmalı?

Get özelliği kullanıldığında formdaki veriler sayfa adresi üzerinde görülmektedir.

/kaydet.php?ad=Azkod&ders=Html

Sayfa adresi üzerindeki URL uzunluğu 3000 karakter ile sınırlıdır. Bu yüzden uzun veriler gönderilmez.

Sayfa adresi üzerinde görüntüleneceğinden önemli bilgiler bu yöntem ile gönderilmez.

Önemsiz bilgileri gönderirken Get özelliği kullanılmalıdır.

Bilgi: Form etiketinde varsayılan method yöntemi Get değeri'dir.

 

POST Yöntemi Ne Zaman Kullanılmalı? 

Form verileri, önemli bilgiler içerdiği zaman POST metodu kullanılması önerilmektedir. POST yöntemi ile gönderilen veriler sayfa adresinde görüntülenmez.

Post metodu ile direkt gönderildiği için karakter sınırlaması yoktur ve uzun veriler gönderilebilmektedir.

Post metodu Get metoduna göre daha güvenli ve kişisel bilgilerin çalınmasını engelleyici bir yöntem'dir.

Form Method GET Değeri Kullanımı:
<form method="GET">

</form>

Kodu Çalıştır

Form Method POST Değeri Kullanımı:
<form method="POST">

</form>

Kodu Çalıştır

İnput Etiketi

Formlar içerisinde en önemli etiketlerden biridir. İnput etiketi kullanıcıdan bilgi almak için kullanılmaktadır. İnput etiketi ile hangi türde veri girişi yapılacağı type parametresi ile belirlenmektedir. İnput etiketi <input type=" "> şeklinde kullanılmaktadır.

Bilgi: İnput etiketi kapatılmamaktadır. 

İnput Etiketi Parametreleri:

Type : Kullanılacak elemanın türünü belirlemek için kullanılmaktadır. Örneğin: Textbox, Checkbox vb.

Src : Resim dosyasının adresini belirtmek için kullanılmaktadır.

Align : Type parametresi ile tanımlanmış olan elemanın konumunu belirlemek için kullanılmaktadır. (Sağ, Sol, Orta gibi.)

Name : İnput etiketine girilen verinin değişkenini oluşturmak için kullanılmaktadır. 

Maxlength : İnput etiketine girilen verinin en çok kaç karakter olacağını belirlemek için kullanılmaktadır. Örneğin : Tc kimlik no 11 karakter 

Size : İnput etiketi ile oluşturulan elemanın genişliğini belirlemek için kullanılmaktadır. Hiç bir değer girilmezse varsayılan değer kullanılır ve bu değer 20 'dir.

Checked : İnput etiketi ile radio veya checkbox kullanıldığında bu etiketlerin seçili olmasını istediğimize eklememiz gereken parametredir.

Disabled : İnput etiketine veri girişini engellemek için kullanılmaktadır.

İnput Etiketi Type Parametresi ile Kullanılan Özellikler: 

  • Text
  • Password
  • Checkbox
  • Radio
  • Submit
  • Reset

Html5 ile Gelen İnput Tipleri :

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

İnput Etiketi Text

İnput text özelliği tek satırlık veri girişi yaptırmak için kullanılmaktadır. C# programlama dili kullandıysanız textbox'ın aynısıdır.

İnput Text Kullanımı 
<form>

<input type="text">

</form>

Kodu Çalıştır

Örnek:
<form>

<b> Kullanıcı Adı : </b> <input type="text" name="ad">

</form>

Kodu Çalıştır

İnput Etiketi Password

İnput etiketi password özelliği girilen veriyi gizlemek için kullanılmaktadır. Sosyal ağlarda giriş yaparken şifrenizi girdiğiniz kısım password özelliği kullanılarak oluşturulmaktadır.

İnput Password Kullanımı
<form>

<input type="password">

</form>

Kodu Çalıştır

Örnek:
<form>

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

</form>

Kodu Çalıştır

İnput Etiketi Checkbox

İnput etiketi checkbox özelliği onay kutusu eklemek için kullanılmaktadır. Checkbox özelliği birden fazla olduğu zaman hepsini seçebilmemize veya hiçbirini seçmemize olanak sağlamaktadır. Bu özellikle bir seçenek veya hepsi seçilebilir veya hiçbiri seçilmeyebilir.  

İnput Checkbox Kullanımı
<form>

<input type="checkbox"> Seçenek

</form>

Kodu Çalıştır

Birden Fazla Seçenekli Checkbox Kullanımı
<form>

<input type="checkbox" name="secim1"> Html <br>

<input type="checkbox" name="secim2"> Css  <br>

<input type="checkbox" name="secim3"> JavaScript 

</form>

Kodu Çalıştır

Bilgi: Name özelliğine girilen isimler farklı olmak zorundadır.

Checkbox ile Checked Özelliği Kullanımı
<form>

<h1> Hangi Dilleri Biliyorsunuz? </h1>

<input type="checkbox" name="secim1" checked> Html <br>

<input type="checkbox" name="secim2"> Css  <br>

<input type="checkbox" name="secim3"> JavaScript <br>

<input type="checkbox" name="secim4"> Php <br>

<input type="checkbox" name="secim5"> MySQL  <br>


</form>

Kodu Çalıştır

İnput Etiketi Radio

İnput etiketi radion özelliği sayfaya tek bir seçenek seçilebilmesine olanak sağlayan onay kutusu eklemek için kullanılmaktadır. Radio özelliği tek seçenek seçmemize olanak sağlamaktadır. Bu özellikte kesinlikle bir seçenek seçilmesi gerekmektedir. Radio özelliği ile eklenen onay kutuları birbirleri ile etkileşim halinde olmak zorundadırlar bu yüzden name parametresine girilen isimler aynı olmalıdır. Radio özelliği ile eklediğimiz onay kutuların verileri(içerikleri-yazıları) value parametresinin içine girilmektedir.

Bilgi: Radio onay kutularının birbiri ile iletişim halinde olması için name isimleri aynı olmak zorundadır.

İnput Radio Kullanımı:
<form>

<input type="radio" value="AZKOD"> AZKOD

</form>

Kodu Çalıştır

Birden Fazla Seçenekli Radio Kullanımı
<form>

<input type="radio" name="secim" value="Html"> Html <br>

<input type="radio" name="secim" value="Css"> Css <br>

<input type="radio" name="secim" value="JavaScript"> JavaScript


</form>

Kodu Çalıştır

Radio ile Checked Özelliği Kullanımı
<form>

<h2> En iyi bildiğiniz dili seçin : </h2>

<input type="radio" name="secim" value="Html" checked> Html <br>

<input type="radio" name="secim" value="Css"> Css <br>

<input type="radio" name="secim" value="JavaScript"> JavaScript <br>

<input type="radio" name="secim" value="Ajax"> Ajax <br>

<input type="radio" name="secim" value="Php"> Php <br>

<input type="radio" name="secim" value="Asp"> Asp

</form>

Kodu Çalıştır

İnput Etiketi Submit

İnput etiketi submit (gönder) özelliği form içerisinde bulunan verileri sunucuya göndermek için kullanılmaktadır. Kısaca sayfaya gönderme butonu eklemektedir. Bu butona isim vermek için value parametresi kullanılmaktadır.

İnput Submit Kullanımı
<form>

<input type="submit">

</form>

Kodu Çalıştır

İnput Submit Butonuna İsim Verme
<form>

<input type="submit" value="Giriş Yap">

</form>

Kodu Çalıştır

İnput Etiketi Reset

İnput etiketi reset (temizle) özelliği form içerisinde bulunan verileri temizlemek için kullanılmaktadır.

İnput Reset Kullanımı
<form>

<input type="reset">

</form>

Kodu Çalıştır

İnput Reset Butonuna İsim Verme
<form>

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

</form>

Kodu Çalıştır

İnput Etiketi Color

İnput etiketi color özelliği Html5 ile gelmiştir. Color özelliği ile renk seçme işlemi için kullanılmaktadır. 

İnput Color Kullanımı
<form>

<input type="color" name="renk">

</form>

Kodu Çalıştır

İnput Etiketi Date

İnput etiketi date özelliği Html5 ile gelmiştir. Date özelliği ile tarih seçme işlemi için kullanılmaktadır. 

İnput Date Kullanımı
<form>

<input type="date" name="tarih">

</form>

Kodu Çalıştır

İnput Etiketi Datetime-local

İnput etiketi datetime-local özelliği Html5 ile gelmiştir. Datetime-local özelliği ile tarih ve saati aynı anda seçme işlemi için kullanılmaktadır. 

İnput Datetime-local Kullanımı
<form>

<input type="datetime-local" name="tarihsaat">

</form>

Kodu Çalıştır

İnput Etiketi Email

İnput etiketi email özelliği ile mail adresinin doğruluğunu kontrol etme işlemi için kullanılmaktadır. 

İnput Email Kullanımı
<form>

<input type="email" name="mail">
<input type="submit">

</form>

Kodu Çalıştır

İnput Etiketi File

İnput etiketi file özelliği ile dosya seçme ve yükleme (resim,pdf,rar vb.) işlemi için kullanılmaktadır. 

İnput File Kullanımı
<form>

<input type="file" name="dosya">

</form>

Kodu Çalıştır

İnput Etiketi Month

İnput etiketi month özelliği ile ay ve yıl tarihini seçme işlemi için kullanılmaktadır. 

İnput Month Kullanımı
<form>

<input type="month" name="ay">

</form>

Kodu Çalıştır

İnput Etiketi Number

İnput etiketi number özelliği ile sayısal veri girişi yapmak için kullanılmaktadır. Bu veri girişi max ve min ile sınırlandırılabilmektedir.

İnput Number Kullanımı
<form>

<input type="number" name="sayi">

</form>

Kodu Çalıştır

İnput Etiketi Range

İnput etiketi range özelliği ile belirli bir aralıktaki değerlerden kaydırma çubuğu ile seçmek için kullanılmaktadır. Bu veri girişi max, min ve step ile sınırlandırılabilmektedir.

İnput Range Kullanımı
<form>

<input type="range" name="aralik">

</form>

Kodu Çalıştır

İnput Etiketi Search

İnput etiketi search özelliği ile arama textbox'ı ekleyebilirsiniz. İnput Text özelliğinden farkı yoktur.

İnput Search Kullanımı
<form>

<input type="search" name="arama">

</form>

Kodu Çalıştır

İnput Etiketi Tel

İnput etiketi tel özelliği ile telefon numarası girdirmek için kullanılmaktadır. Pattern özelliği ile birlikte telefon numarası formatı belirlenebilmektedir.

İnput Tel Kullanımı
<form>

<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" name="numara">

</form>

Kodu Çalıştır

İnput Etiketi Time

İnput etiketi time özelliği ile saat seçme işlemi için kullanılmaktadır.

İnput Time Kullanımı
<form>

<input type="time" name="saat">

</form>

Kodu Çalıştır

İnput Etiketi URL

İnput etiketi url özelliği ile bağlantı adresi girileceği zaman kullanılması gerekmektedir. Bağlantı adresinin başında http:// veya https:// olması gerekmektedir.

İnput Url Kullanımı
<form>

<input type="url" name="adres">

</form>

Kodu Çalıştır

İnput Etiketi Week

İnput etiketi week özelliği ile hafta ve yıl seçmek için kullanılmaktadır. 

İnput Week Kullanımı
<form>

<input type="week" name="hafta">

</form>

Kodu Çalıştır

Select Etiketi

Select kelimesinin ingilizce anlamı seç demektir. Yani formlara ekleyeceğimiz elemanlarda seçim işlemi olacaktır. Select etiketi ile açılır listeler yapacağız. Bu açılır listeler <select> etiketi ile kullanılmaktadır.

Select etiketi ile listbox ( liste kutusu) veya drop-down list (aşağı açılır liste) şeklinde kullanılabilmektedir.

Select etiketinde elemanları listelemek için option etiketi kullanılmaktadır.

Select etiketinde listbox'ta kaç tanesinin görüntülenmesini size parametresi ile belirlenmektedir.

Select etiketi kullanımında seçeneklerden birinin seçili olarak listelenmesi için option etiketi içinde selected parametresi ile kullanılmaktadır.

Birden fazla seçim yapılabilmesi için select etiketi ile multiple parametresi kullanılması gerekmektedir.

Açılır Liste Kullanımı
<form>
<select>

<option> Html </option>
<option> Css </option>
<option> JavaScript </option>

</select>
</form>

Kodu Çalıştır

Açılır Liste Size Parametresi Kullanımı
<form>
<select size="2">

<option> Html </option>
<option> Css </option>
<option> JavaScript </option>
<option> SQL </option>
<option> Php </option>
<option> Pyhton </option>

</select>
</form>

Kodu Çalıştır

Açılır Liste Selected Parametresi Kullanımı

Selected parametresi kullanarak listede bulunan elemanlardan birini seçili halde listeledik.

<form>
<select>

<option> Seçiniz </option>
<option> Html </option>
<option selected> Css </option>
<option> JavaScript </option>

</select>
</form>

Kodu Çalıştır

Liste Kutusu Çoklu Seçim Multiple Parametresi Kullanımı

Çoklu seçim yapmak için Ctrl tuşuna basılı halde seçmemiz gerekmektedir.

<form>
<select multiple>

<option> Html Dersleri </option>
<option> Css Dersleri</option>
<option> JavaScript Dersleri</option>
<option> Php Dersleri</option>

</select>
</form>

Kodu Çalıştır

Textarea Etiketi

Birden fazla satırlı veri girişi yapmak için kullanılmaktadır. input text özelliğinin birden fazla satır girilebilen halidir.

Textarea etiketi ile rows(satır) ve cols (sütun) parametreleri kullanılmaktadır. Bu parametreler kaç satır ve kaç sütun olacağını belirlemek için kullanılmaktadır. Yani genişlik ve yüksekliğini belirler.

Textarea Etiketi Kullanımı
<form>

<textarea>  </textarea>

</form>

Kodu Çalıştır

Textarea Etiketi Rows ve Cols Parametreleri
<form>

<textarea rows="15" cols="25">  </textarea>

</form>

Kodu Çalıştır

Önceki Ders: Html Stiller  Sonraki Ders: Html Çerçeveler