HTML Form Oluşturma | HTML Dersleri 9

1
1217
görüntülenme
HTML Öğreniyorum
HTML Öğreniyorum Görseli

Yapacağımız sitelerde ziyaretçilerden çeşitli bilgileri toplamak için formlar oluşturulur. Bu formlarda istediğimiz bilgiler için çeşitli form elemanları kullanılır. Bu dersimizde HTML form oluşturma ve formlarda kullanılabilecek elemanları öğreneceğiz.

HTML de form oluşturmak için <form> etiketi kullanılır. Bu kodun birde kapanış kodu var ve </form> şeklinde kapanır. Aşağıda kod kümesinde 6. satırdaki gibidir.

<html>
 <head>
  <tittle>Form Sayfası</tittle>
 </head>
 <body>
  <form>....</form>
 </body>
<html>

Formlar elbetteki içeriğinde alınacak bilgileri bir yere gönderecektir. Bu işlemi action niteliği ile tanımlarız. Bunu ilerleyen dönemde başlayacağım PHP ile daha iyi anlayacağız ancak bu derste herhangi bir html sayfasına yönlendirme verecek şekilde action özelliğini kullanacağım.

<html>
 <head>
  <tittle>Form Sayfası</tittle>
 </head>
 <body>
  <form action="https://www.lokmandogan.com">....</form>
 </body>
<html>
Genelde formlar web sitesindeki bir başka sayfaya gönderilir ve gönderilen o sayfada kullanıcının formda girdiği bilgiler işlenir.

Buradaki “https://www.lokmandogan.com” kısmına çalışma yaptığınız html dosyasının olduğu dizin/klasör içerinde oluşturacağınız bir html sayfasını yazabilirsiniz. Örneğin: “formyonlendirme.html” gibi yada adına ne verirseniz…

method ve name Nitelikleri

method niteliği formlar gönderilirken kullanılacak HTTP (HyperTextTransferProtokol) yöntemini belirtir (GET veya POST yöntemi).

<form action="url" method="GET">...</form>
<form action="url" method="POST">...</form>
GET metodunu kullandığınızda formdaki veriler tarayıcınızın adres çubuğundaki sayfa adresinde görünecektir. Eğer kullanıcıdan öenmli ve kişisel bilgiler girmesini istiyorsanız bu yöntemi kullanmamanızı öneririm.
Eğer kullanıcıdan şifre veya hassas bilgiler içeren veriler alacaksanız POST yöntemini kullanınız. Post yöntemi verilerin gönderilmesini güvenli ve gizli bir şekilde gerçekleştirir.

Yukarıdaki kod örneklerinde form etiketinin içini … şeklinde dolduruyordum. Şimdi <form> etiketinin içerisinde kullanılacak öğelere geçelim:

Form Elemanları

Kullanıcılardan form aracılığıyla elde edeceğimiz bilgileri girmeleri için metin giriş elemanları gibi çeşitli form öğelerine ihtiyacımız olacak. Bu kutuları <input> etiketiyle oluşturacağız. Bu <input> etiketinin bir çok varyasyonu/çeşidi vardır. Bu çeşitleri type özniteliğiyle tanımlarız. ve bu <input> öğelerine bir isim belirtmek gerekmektedir. Bu ismi name özniteliğiyle tanımlarız. Bu tanımlama kullanılmadan da veri giriş kutularını oluşturabilirsiniz ancak veriyi örneğin bir veri tabanına işlemek için ve verileri kendimiz sınıflandırabilmek için bu name özniteliğini kullanmamız gerekir. Aşağıda input etiketinin özniteliklerle birlikte kullanımını gösterelim:

<form>
 <input type="text" name="kullaniciadi" />
 <br/>
 <input type="password" name="sifre" />
</form>

yukarıdaki girdi kutusunun birinin türünü password (type=”password”) olarak belirttik. Bu, o kutucuğa yazılacak verinin nokta olarak görünmesini sağlayacaktır. Bu kod yumağı aşağıdaki gibi bir görüntü verecektir:


Onay Kutusu ve Radio Butonu

Eğer ziyaretçilerimize formlarda birden çok seçenekten sadece birini seçebilecekleri bir radio butonu eklemek istiyorsak type özniteliğini radio olarak belirtmeliyiz;

<input type="radio" name="cinsiyet" value="erkek" /> Erkek
<br/>
<input type="radio" name="cinsiyet" value="kadin" /> Kadın

Şeklinde oluşturulur ve aşağıdaki gibi görünür:

Erkek
Kadın
Önemli bir noktayı belirtmek isterim. Yukarıda name özniteliğinden bahsetmiştim. Radio butonlarında bu name özniteliğini kullanmak çok önemlidir. Örnekte ben name=”cinsiyet” olarak tanımladım. Bunu her iki radio içinde aynı tanımladım. Eğer bunu yapmamış olsaydık ziyaretçi hem erkek hemde kadın seçeneklerini birlikte seçebilirdi. name özniteliği tanımlamamız bu radio grubunun seçeneklerinden sadece birinin seçilmesini sağlayacaktır. Ayrıca name bu grup için aynı olmalıdır.

Eğer kullanıcıya seçebilecekleri birden fazla seçenek sunacaksak bunu onay kutucuklarıyla sağlayabiliriz. Örneğin ziyaretçiye hobilerini sorabiliriz ve ziyaretçimin birden fazla seçeneği seçmek isteyebilir:

<input type="checkbox" name="hobiler" value="1" /> Kitap okumak
<br/>
<input type="checkbox" name="hobiler" value="2" /> Kamp yapmak
<br/>
<input type="checkbox" name="hobiler" value="3" /> Müzik dinlemek
<br/>
<input type="checkbox" name="hobiler" value="4" /> Bisiklet sürmek

Yukarıdaki kodların görüntüsü ise şöyle olacaktır;

Kitap okumak
Kamp yapmak
Müzik dinlemek
Bisiklet sürmek

Radio ve onay kutularında kullandığımız value özniteliği dikkatinizi çekmiştir. Bu özniteliğin kullanılması da yine verinin kayıdı için gereklidir. Yukarıda radio da kullandığım value değerleri “erkek” ve “kadın” dır ancak onay kutularında (checkbox) “1”, “2”, “3” ve “4” olarak kullandım. Ziyaretçi formu gönderdiğinde bu formdaki radio ve onay kutuları, örneğin bir veritabanına kaydedilirken tanımladığımız value değerlerini kaydedecektir. Yani input etiketini kapattıktan sonra yazdığımız metin veritabanına kaydedilmeyecektir. Value değer demektir ve veri tabanına kullanıcı name’i hobiler olan onay kutularından 2 ve 3 ü seçti şeklinde kaydedecektir. Radio için de name’i erkek olarak seçti şeklinde olacaktır. Sonuna yazdığımız “Erkek” veya “Kamp yapmak” şeklinde kaydetmeyecektir. Bu sebeple radio ve onay kutularına value özniteliğini kullanmamız gerekmektedir.

input etiketinin kapanış etiketi yoktur!

Açılır Kutu ve Çoklu Seçimi

Bir diğer form öğesi de aşağı açılan seçim kutusu. Bu kutuyu ise <select> etiketiyle oluştururuz:

<select name="medeniHal">
 <option>Bekar</option>
 <option>Evli</option>
 <option>Boşanmış</option>
</select>

Bu açılır kutu şu şekilde görünür:

Eğer bu şekilde bir seçim kutusunda ziyaretçilerin çoklu seçim yapabilecekleri bir seçenek vereceksek select etiketine multiple eklememiz gerekecektir:

<select name="medeniHal" multiple>
 <option>1. seçenek</option>
 <option>2. seçenek</option>
 <option>3. seçenek</option>
 <option>4. seçenek</option>
</select>

Ziyaretçi yukarıdaki kodu aşağıdaki gibi görecek ve Ctrl tuşuna basılı tutarak birden fazla seçim yapabilecektir:

Butonlar

Kullanıcıya formu doldurduktan sonra göndermesi için bir gönder butonu eklememiz gerekmektedir. Ayrıca girdiği verileri göndermeden önce bir tuşla silebilmesi için bir de Sıfırlama butanu yerleştirelim:

<form>
 <input type="text" name="kullaniciadi" />
 <br/>
 <input type="password" name="sifre" />
 <br/>
 <input type="submit" value="Gönder" />
 <input type="reset" value="Sıfırla" />
</form>


value=”Gönder” özniteliğinde Gönder yerine ne yazarsak buton üzerinde de o yazacaktır!

Doldurulması Zorunlu Alanlar

Eğer boş bırakılmamasını istediğiniz alanlar varsa etiketin içerisine required yazılması gerekmektedir.

<input type="email" required />

Formlarda Kullanılan Elemanlar

Aşağıda formlarda kullanılabilecek bütün input türlerini bir tabloda vereceğim. Bu verdiğim türleri kendiniz deneyebilirsiniz.

<input type=”button”>

Formunuza bir buton/düğme ekler.


<input type=”checkbox” >

Formunuza bir onay kutusu ekler.


<input type=”color”>

Formunuza bir renk seçici ekler.


<input type=”date”>

Formunuza tarih girilebilecek bir kutu ekler. Örneğin:


<input type=”datetime-local”>

Formunuza bir tarih ve saat seçici ekler.

  • Firefox ve Safari tarayıcıları desteklemez!
  • İnternet Explorer 12 ve altı sürümler desteklemez!

<input type=”email”>

Email adresi girilen bir kutu ekler.
Geçerli bir mail adresi eklenmesini sağlar. Girilen metinde @ ve . karakterlerini denetler.


<input type=”file”>

Ziyaretçinin bilgisayarından dosya eklemesini sağlar.
Dosya eklemek için bir Göz At butonu ekler.


<input type=”hidden”>


<input type=”image”>


<input type=”month”>

Sadece ay ve yıl seçilebilen bir kutu ekler.


<input type=”number”>

Sadece sayı yazılabilen bir kutu ekler. Bu kutuya harf yazıldığında uyarı verir.


<input type=”password”>

Şifre kutusu ekler.
Yazılan her bir karakter nokta şeklinde görünür.


<input type=”radio”>

Radio butonu ekler.


<input type=”range”>


<input type=”reset”>

Sıfırlama butonu ekler.
Formdaki bütün verileri sıfırlar.


<input type=”search”>


<input type=”submit”>

Formunuza bir gönder veya tamamla butonu ekler.


<input type=”tel”>

Telefon numarası girilebilen bir kutu oluşturur.


<input type=”text”>

Bir metin kutusu oluşturur.


<input type=”time”>

Bir saat seçicisi ekler.


<input type=”url”>

Link / url yazılabilen bir kutu ekler.


Temel anlamda öğrenmeye çalıştığımız bu seride HTML üzerine temel unsurlar ve bunların kullanımı hakkında son yazım olacak olan HTML Renk Kodları yazımdan sonra HTML5 ve beraberinde gelen yenilikler ve bunların kullanımı konularına geçeceğiz. Bir sonraki yazımda görüşmek üzere…

1 YORUM

  1. This is really interesting, You’re a very skilled blogger.
    I’ve joined your feed and look forward to seeking more of your great post.
    Also, I’ve shared your website in my social networks!

CEVAP VER

Lütfen yorumunuzu yazınız.
Lütfen isminizi buraya yazınız