Merhaba,

Web Sitesi Kodlamaya Başlayalım serisinin HTML başlangıç bölümünde göreceğimiz son konumuz HTML Formlar.

Web sitelerinde gezinirken genellikle linklere tıklar ve web sayfaları veya web siteleri arasında geziniriz. Ancak bazı durumlarda sadece linklere tıklamak webde var olma amacımız için yeterli olmaz. Kimi zaman bizim bazı bilgi girişleri yapmamız gerekir. Bu bilgi girişleri de form öğeleri aracılığıyla gerçekleşir.

Bir web sitesine kayıt olurken, giriş yaparken, kişisel bilgilerimizi yazarken, bazen bir seçim yaparken, test çözerken, Google’da arama yaparken, bir web sitesine dosya yüklemesi yaparken, Twitter’da Twit atarken, Instagram’da fotoğraf yüklerken, Facebook’ta bir bağlantı paylaşırken, YouTube’a bir video yüklerken her zaman aslında bir form dolduruyoruz. Kimisinin form olduğunun farkında olarak, kimisinin olmayarak. Siz karşınızda bilgi girişi yaptığınız bir form görmeseniz bile kullandığınız özellik çoğu zaman bir form barındırıyor.

HTML Formları tek bir etiket gibi düşünmek yanlış olur. Bir form başlatmak için <form> etiketi ve bitirmek için </form> etiketi kullanıyoruz. Ancak bu etiketler arasına yazacağımız form öğelerinin hepsini ayrıca incelemek gerekir. Çünkü her etiketi her zaman kullanmıyoruz. Yalnızca ihtiyaç duyduğumuz form etiketlerini kullanıyoruz. Bu etiketler bir metin kutusu, seçim düğmesi, çoktan seçmeliler, yükleme düğmeleri ve onay düğmeleri gibi etiketlerdir.

<form> Etiketi

Bu etiketimizi formumuzu başlatırken kullanıyoruz. Kullanacağımız tüm form öğeleri bu etiketin altında yer alması gerekir. Ve bu form etiketimizde mutlaka belirtmemiz gereken 2 özelliğimiz mevcuttur.

action – Formda girilen bilgilerin nereye gönderileceğini belirtiriz.

method – GET ve POST olmak üzere daha sonra detaylı göreceğimiz 2 form yönteminden hangisini kullanacağımızı belirtiriz.

Genellikle formda doldurulan veriler sunucuya iletilir ve sunucuda işlenmesi beklenir. Bu yazıda formu işlemeyi değil, yalnızca form öğelerini kullanmayı göreceğiz.

<form action="/giris" method="POST">

Bunun bir kullanıcı girişi formu olduğunu düşünecek olursak, action alanında, form bilgilerini giriş sayfasına göndermesini söylüyoruz ve bunu method alanında POST yöntemiyle göndermesini söylüyoruz. Bu kod satırından sonra form öğelerimizi yazmamız gerekiyor ve tüm form öğelerimiz bittikten sonra da </form> kapanış etiketiyle formumuzu tamamlıyoruz.

 Metin Girişi Etiketleri

Metin girişi etiketleri kullanım amaçlarına göre çeşitlendirilmiştir.

Metin Kutusu – <input type="text"> – En genel metin etiketidir, her türlü karakteri kabul eder.

E-Posta Kutusu – <input type="email"> – Yalnızca e-posta formatında girişleri kabul eder.

Şifre Kutusu – <input type="password"> – Girilen değerin güvenlik için ekranda görülmesini engeller.

Numara Kutusu – <input type="number"> – Sayısal değerler girişi için kullanılır. Yukarı/Aşağı düğmeler ile artırılabilir veya azaltılabilir.

Telefon Kutusu – <input type="tel"> – Telefon numarası girişi yapıldığını belirtmek için kullanılır.

Metin Alanı – <textarea></textarea> – Çok satırlı bir metin girişi yapılacaksa bu etiket kullanılır.

Burada kullandığımız form ögeleri birbirine benziyor olsa da hepsinin kullanım amacı farklıdır. Örnek olarak, e-posta kutusuna e-posta harici bir giriş yapılırsa form gönderilirken uyarı verir ve form gönderilemez. Veya şifre alanına yazdığınız bir şey yazı olarak görünmez noktalar halinde görünür. Numara kutusunda sayıyı artırmak veya azaltmak için aşağı ve yukarı oklar bulunur.

Label

Label özelliği form ögelerini isimlendirmemize yardımcı olur ve kullanım kolaylığı sağlar. 

<label>E-posta</label>
<input type="email">

Yukarıdaki önizlemede her kutunun yanına isimlendirmeyi kendimiz yaptık çünkü metin kutusuna ne girişi yapmalarını istediğimizi belirtmemiz gerekir. <label> etiketimizde bize bu konuda yardımcı olur. Bununla birlikte eğer bu etiketi ilgili form öğesine id tanımlamasıyla ilişkilendirirsek bize bir kullanım kolaylığı sağlar.

<label for="eposta_alani">E-posta</label>
<input id="eposta_alani" type="email">

Bu şekilde bir tanımlama yapmadığımız zaman formu doldurmak için ilgili kutuya tıklanması gerekir. Bu tanımlamayı yaptığımız zaman form kutusunun başındaki E-posta yazısına tıklandığı zaman da imleç otomatik olarak ilgili form alanını doldurmaya olanak sağlar. 

Checkbox

Gördüğümüz form alanları hep klavye ile giriş yapılan tarzda alanlardı. Checkbox ile birlikte mouse yardımıyla doldurulacak seçimli form alanlarını göreceğiz.

Checkbox seçim kutuları bize çoktan seçmeli bir form alanı yaratmamıza olanak tanır. Her bir kutunun 2 durumu vardır; seçili veya seçili değil. 

<p>Bildiğiniz web dilleri</p>
<label>
<input type="checkbox"> HTML
</label>
<label>
<input type="checkbox"> CSS
</label>
<label>
<input type="checkbox"> JavaScript
</label>
<label>
<input type="checkbox"> PHP
</label>

Görünümü:

Burada seçeneklerimizi <label> etiketi içerisine yazma sebebimiz, yazıların üzerine tıklandığında da seçimin yapılabilmesi için. Bunu eklemeden de kullanabilirdik. Aynı zamanda burada çoktan seçmeli bir alan yarattık. Fakat sadece tek bir seçme alanı da yaratabilirdik. Örnek olarak web sitelerine girişte Beni Hatırla diye bir kutu bulunur. Buna tıklarsanız giriş bilgileriniz daha sonraki girişlerinizde hatırlanır. Yani burada tek bir seçenekte soru yöneltmiş oluyor: Hatırlansın mı? Hatırlanmasın mı?

Radio Düğmeleri

Bir başka seçim alanımız olan radio düğmelerinde checkbox özelliğinden farklı olarak çok seçenekli bir listeden tek bir seçim belirtilmesi gerektiğinde kullanılır.

<label>Medeni Haliniz</label> 
<label> <input type="radio" name="status"> Bekar </label> 
<label> <input type="radio" name="status"> Evli </label> 
<label> <input type="radio" name="status"> Boşanmış </label>

Görüntüsü:

Açılır Menüler (Dropdown)

Dropdown menüler seçim yaptırmak istediğimiz zaman özellikle büyük bir yer tasarrufu sağlar. Örnek vermek gerekirse bir doğum yılı seçimi yaptırmak istediğimizde 40-50 yıl değerini ayrı ayrı seçim listelerinde koymak bütün sayfayı kaplardı. Bunun yerine bir açılır menü kullandığımızda, ziyaretçimiz seçimi yapmak için listeyi açar, seçimini yapar ve kapatır.

<select> 
<option>Ocak</option> 
<option>Şubat</option> 
<option>Mart</option> 
<option>Nisan</option> 
<option>Mayıs</option> 
<option>Haziran</option> 
<option>Temmuz</option> 
<option>Ağustos</option> 
<option>Eylül</option> 
<option>Ekim</option> 
<option>Kasım</option> 
<option>Aralık</option> 
</select>

Görünümü:

Açılır menü mantığında çoktan seçmeli alan da yapmamız mümkün. Sadece <select> etiketimize multiple özelliği eklememiz gerekiyor. Bunu da örnekleyecek olursak:

<label>Hangi tarayıcıları kullanıyorsunz?</label>
<select multiple>
  <option>Google Chrome</option>
  <option>Internet Explorer</option>
  <option>Mozilla Firefox</option>
  <option>Opera</option>
  <option>Safari</option>
</select>

Şimdi aşağıda örnek bir kayıt formu için HTML kodları yazıyorum. Bunu not defterinize kopyalayıp, HTML olarak kaydederek deneme yapabilirsiniz.

<form action="" method="POST">
  <p>
    <label>Adınız</label>
    <input type="text" placeholder="Adınızı yazın">
  </p>
  <p>
    <label>Soyadınız</label>
    <input type="text" placeholder="Soyadınızı yazın">
  </p>
  <p>
    <label>E-Posta</label>
    <input type="email" placeholder="E-posta adresinizi yazın">
  </p>
  <p>
    <label>Telefon Numaranız</label>
    <input type="tel" placeholder="Telefon numaranızı yazın">
  </p>
  <p>
    <label>Şifre</label>
    <input type="password" placeholder="Güvenli bir şifre yazın">
  </p>
  <p>
    <label>Şifrenizi tekrar yazın</label>
    <input type="password" placeholder="Şifrenizi tekrar yazın">
  </p>
  <p>
    <label>Ülke</label>
    <select>
      <option>Türkiye</option>
      <option>Amerika</option>
      <option>Kanada</option>
      <option>Fransa</option>
      <option>İngiltere</option>
      <option>İtalya</option>
      <option>Japonya</option>
      <option>Rusya</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      Web sitesinin <a href="#">kural ve şartlarını</a> kabul ediyorum.
    </label>
  </p>
  <p>
    <button>
      Kayıt
    </button>
  </p>
</form>

Formunuz tabi ki bir işleme dosyasına yönlendirilmediği için herhangi bir sonuç vermeyecektir. Gerekli işlemleri daha sonra farklı konularda inceleyeceğiz.

Bu yazı ile birlikte Web Sitesi Kodlamaya Başlayalım serimizin ilk bölümü olan HTML başlangıç bölümünü bitirdik. HTML ile ilgili gerekli konularda tekrar yazılarımız olacaktır. Ancak serimize CSS ile devam ediyor olacağız. 

Şimdiye kadar yazıların tamamını takip ettiyseniz ve yapamadığınız, sormak istediğiniz konular olduysa, bana Instagram hesabım üzerinden ulaşabilirsiniz. @oktetikk