Form ve Girdi Elemanları

<form>

<form> elemanıyla kullanıcı tarafından girdi verilmesi için bir form tanımlanır. <form> elemanının içine yerleştirilen başka elemanlarla girdinin alınması sağlanır. Girdiler sunucuya gönderilir ve sunucular bu girdilere tepki verir. Sunucudan yanıt alma işi ASP ya da PHP gibi sunucu taraflı kodlama dilleri ile yapılabilir. Fakat bu aşamada bunlar gösterilmeyecektir.

Girdilerin gönderileceği dosyanın adresi action niteliği karşısına girilir. Form gönderilirken kullanılacak karakter kodlaması accept-charset niteliği ile belirtilmelidir. Eğer bu yapılmazsa varsayılan değer olarak <form> elemanını barındıran dokümanın karakter kodlaması kullanılır.

name niteliği ile forma isim verilebilir ve bu isim girdiyi alan sunucu tarafından kullanılabilir. target niteliği ile de gönderilen forma karşılık alınacak yanıtın nerede gösterileceği belirtilir. Bu niteliğin alabileceği değerler ve bu değerlerin işlevleri Linkler konusunda ayrıntılı olarak açıklanmıştır.

autocomplete niteliği ile bir formun önceden girilmiş olan değerleri hatırlayıp girilen bir girdiyi tamamlayıp tamamlaması kararlaştırılabilir. Bu özelliğin açık olması için on kapalı olması için off değeri kullanılabilir. Bu özelliğin açık olması varsayılan durumdur ve bu nitelik yazının yazıldığı an itibari ile Opera tarafından desteklenmemektedir.

Formun içine yerleştirilen girdiler hakkında bazı zorunluluklar belirtilebilir. Örneğin bir girdinin beşin katları olması ya da doldurulması zorunlu tutulabilir. Form gönderilmeden önce bu zorunlulukların yerine getirilip getirilmediği doğrulanır. Doğrulama yapılmaması istenirse novalidate niteliği kullanılır. Bu niteliğin karşısına değer girilmez ve bu nitelik yazının yazıldığı an itibari ile Safari tarafından desteklenmemektedir.

enctype niteliği ile form yollanırken kullanılacak karakter kodlaması belirtilir. Bu niteliğin alabileceği üç değer vardır. application/x-www-form-urlencoded değeri varsayılan değerdir ve bu durumda formdaki boşluklar +'ya özel karakterler ASCII HEX değerine dönüştürülür. multipart/form-data değeri hiçbir karakterin kodlanmamasını sağlar. text/plain değeri kullanıldığında ise boşluklar +'ya dönüştürülür, özel karakterler için ise bir kodlama kullanılmaz.

method niteliği ile de girdilerin nasıl gönderileceği belirtilir. Girilebilecek değerler get ve post olmak üzere iki tanedir. get değeri ile form gönderilirse girilen değerler linkte görülür ve alınan yanıt sık kullanılanlara eklenebilir. Gizlilik gerektirmeyen form gönderimleri get yöntemi ile yapılabilir. post değeri ile form gönderildiğinde ise veri HTTP'nin bir parçası olarak gönderilir ve linkte bu değerler görülmez, alınan yanıt sık kullanılanlara eklenemez. Gizlilik gerektiren girdi gönderimleri için bu değer kullanılmalıdır.


<input>

<input> elemanı kapanmayan, niteliklerle kullanılan bir elemandır ve <form> elemanının içine yerleştirilir. Her bir <input> elemanı kullanıcı tarafından doldurulacak bir girdiyi belirtir. Bu elemanla kullanılan en önemli iki nitelik name ve type nitelikleridir. name niteliği ile girdi elemanına isim verilirken type niteliği ile girdinin türü belirtilir.

type niteliğine girilebilecek değerlerin sayısı bir hayli fazladır. Bunlar altta sıralanmıştır:

text: Varsayılan değerdir ve 20 karakter genişliğinde tek satırlık bir metin kutusu tanımlar.
button: Tıklanabilecek bir buton tanımlar.
checkbox: İşaretlenebilecek bir kutucuk tanımlar.
hidden: Gizli bir girdi elemanı tanımlar. Bu eleman kullanıcıya gösterilmez.
file: Dosya seçmeye yarayan bir buton tanımlar.
password: Şifre girilecek bir alan tanımlar. Girilen değerler maskelenecektir.
radio: İşaretlenebilecek bir radyo butonu tanımlar. Tanımlanan aynı isimli radyo butonlarından sadece bir tanesi seçilebilir.
color: HTML5 ile birlikte eklenmiştir. Renk seçici tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Safari tarafından desteklenmemektedir.
date: HTML5 ile birlikte eklenmiştir. Tarih girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir.
datetime: HTML5 ile birlikte eklenmiştir. Tarih ve UTC zaman dilimine göre zaman girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile sadece Opera ve Safari tarafından desteklenmektedir.
datetime-local: HTML5 ile birlikte eklenmiştir. Tarih ve yerel zaman dilimine göre zaman girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir.
month:  HTML5 ile birlikte eklenmiştir. Ay ve yıl girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir.
week:  HTML5 ile birlikte eklenmiştir. Hafta ve yıl girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir.
time:  HTML5 ile birlikte eklenmiştir. Zaman girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Internet Explorer ve Mozilla Firefox tarafından desteklenmemektedir.
email: HTML5 ile birlikte eklenmiştir. e-mail adresi girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.
url: HTML5 ile birlikte eklenmiştir. Link girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.
tel: HTML5 ile birlikte eklenmiştir. Telefon numarası girilecek bir girdi alanı tanımlar. Bu değer yazının yazıldığı an itibarı ile sık kullanılan tarayıcılar tarafından desteklenmemektedir.
number: HTML5 ile birlikte eklenmiştir. Sayı girilecek bir girdi alanı tanımlar.
range: HTML5 ile birlikte eklenmiştir. Sayı girilecek bir çubuk tanımlar.
search: HTML5 ile birlikte eklenmiştir. Arama kutusu tanımlar. Bu değer yazının yazıldığı an itibarıile sadece Google Chrome ve Safari tarafından desteklenmektedir.
reset: Forma girilen değerleri sıfırlamaya yarayan bir buton tanımlar.
submit: Forma girilen değerleri göndermeye yarayan bir buton tanımlar.
image: Forma girilen değerleri göndermeye yarayan bir görsel tanımlar.

Form ve girdilerin nasıl oluşturulduğuna dair kabaca bir fikir vermesi açısından aşağıdaki kod incelenebilir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    İsim:<input name="isim" type="text"><br>
    <br>
    Cinsiyet: <br>
        <input name="cinsiyet" type="radio" value="erkek">Erkek<br>
        <input name="cinsiyet" type="radio" value="kadin">Kadın<br>
    <br>
    Hobiler: <br>
        <input name="hobi" type="checkbox" value="resim">Resim<br>
        <input name="hobi" type="checkbox" value="muzik">Müzik<br>
        <input name="hobi" type="checkbox" value="sinema">Sinema<br>
    <br>
    <input type="submit">
</form>
</body>
</html>

checked niteliği ile bir radyo butonunun ya da kutucuğun sayfa yüklendiğinde işaretli olması sağlanabilir. disabled niteliği ile de bir girdi alanına veri girilmesi engellenebilir. Bu iki nitelik de bir değere eşitlenmeden kullanılır. Bir değere eşitlenmeden kullanılan bir diğer nitelik de required niteliğidir. Bu nitelik de belirtilen girdinin doldurulmasının zorunlu olduğunu belirtir.

value niteliği ile yazı girilecek girdi elemanlarına bir ilk değer verilebilir. Oluşturulan butonların üzerinde yazılanlar da yine bu nitelikle belirlenebilir. Radyo butonları ve işaret kutucukları tanımlayan <input> elemanlarında ise value niteliğinin kullanılması zorunludur. Form gönderildiği zaman seçili kutucuklar hakkında gönderilen veri de bu değer olacaktır. Verilen ilk değerin değiştirilmemesi istenirse readonly niteliği herhangi bir değere eşitlenmeden kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    İsim:<input name="isim" type="text" required><br>
    Soyisim:<input name="soyisim" type="text" disabled><br>
    Ülke:<input name="ulke" type="text" value="Türkiye" readonly><br>
    <br>
    Cinsiyet: <br>
        <input name="cinsiyet" type="radio" value="erkek" checked>Erkek<br>
        <input name="cinsiyet" type="radio" value="kadin">Kadın<br>
    <br>
    Hobiler: <br>
        <input name="hobi" type="checkbox" value="resim">Resim<br>
        <input name="hobi" type="checkbox" value="muzik">Müzik<br>
        <input name="hobi" type="checkbox" value="sinema">Sinema<br>
    <br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

Yukarıdaki kod incelenir ve çalıştırılırsa bahsedilen niteliklerden bazılarının çalışma şekilleri görülebilir. İsim girilmesi zorunlu olarak tanımlanmıştır. Gönder butonuna bu kısım doldurulmadan basılırsa tarayıcı kulanıcıyı uyaracaktır. Eğer <form> elemanı novalidate niteliği ile nitelenirse bu zorunluluk aranmayacaktır.

autofocus ve autocomplete nitelikleri HTML5 ile eklenmiştir. autofocus niteliği bir değere eşitlenmeden kullanılırken autocomplete niteliğinin karşısına on ya da off değeri girilir. autofocus niteliği sayfa yüklendiğinde kullanıldığı <input> elemanına odaklanılmasını sağlar. autocomplete niteliği ise kullanıldığı <input> elemanına daha önceden girilmiş olan değerlerin hatırlanıp hatırlanmayacağını belirler.

min ve max nitelikleri ile sayı ya da tarih girilebilecek alanlara girilebilecek sırasıyla minimum ve maksimum değerler belirtilir. Bu niteliklerin karşısına tarih girileceğinde format YYYY-AA-GG şeklinde olmalıdır. Bu nitelikler sadece number ve date tipleri için kullanılabilir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    Doğum yılı: <input name="yil" type="date" max="2000-12-31" min="1980-12-31"><br>
    <br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

Yukarıdaki örnek kodda verilen tarih aralığı dışında bir tarih girildiğinde tarayıcı bunun düzeltilmesi konusunda kullanıcıyı uyaracaktır.

step niteliği ile ise girilen değerin belli bir sayının katları olması gerektiği belirtilir. Eğer aynı zamanda min niteliği de kullanılırsa girilebilecek en küçük sayı ve bu sayının girilen step değerinin tam katları kadar fazlaları geçerli değerler olur. Örnek olarak aşağıdaki kod parçasına bakılabilir, ilk girdi kutusuna girilebilecek değerler ..., 3, 6, 9, ... iken ikinci girdi kutusuna girilmesine izin verilecek değerler 1, 4, 7, ... olarak devam eder.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <input name="kutu1" type="number" step="3"><br>
    <input name="kutu2" type="number" min="1" step="3"><br>
    <br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

size ve maxlength nitelikleri ile girdi kutularının genişlikleri belirlenebilir. İki niteliğin karşısına da sayı girilir ve iki nitelikte de girilen değer karakter sayısını ifade eder. Fakat aralarındaki fark birisinin görsel diğerinin işlevsel etkisi olmasıdır. size niteliği kutunun ne kadar geniş görüneceğini belirler. maxlength niteliği ise alana girilebilecek maksimum karakter sayısını belirtir. Bu nitelikler text, search, tel, url, email ve password tipleri ile birlikte kullanılabilirler.

placeholder niteliği ile de text, search, tel, url, email ve password tiplerindeki girdi alanlarına kullanıcı doldurmadan önce yazılı olacak, kullanıcıya gireceği değer hakkında bilgi verecek bir veri girilebilir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <input name="ulke" type="text" placeholder="Örn: Türkiye"><br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

multiple niteliği karşısına değer girilmeden email ve file tipleriyle kullanılır. Bu niteliğin kullanılması girdi olarak birden fazla değer girilebileceğini gösterir. Böyle bir girdi alanına birden fazla dosya eklenirken CTRL tuşu basılı tutulmalıdır. Bir girdi alanına birden fazla e-mail adresi girileceğinde ise aralarına virgül konmalıdır.

pattern niteliği de text, search, tel, url, email ve password tiplerindeki girdi alanlarında kullanılabilir. Bu niteliğin karşısına JavaScript'te tanımlanan kurallı ifadelerden birisi girilmelidir. Bu kurallı ifadeler ileride JavaScript konusunda anlatılacaktır. Şimdilik örnek olması bakımından aşağıdaki kod incelenebilir. Unutulmaması gereken bir başka nokta da bu niteliğin yazının yazıldığı an itibarı ile Safari tarafından desteklenmediğidir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <input name="kod1" type="text" pattern="[A-Z]{2}[0-9]{1}[a-zA-Z]{1}"><br>
    <input name="kod2" type="text" pattern="[ABC]{1}[0-9]{2}[a-z]{1}"><br>
    <input name="kod3" type="text" pattern="[AF]{2}[0-9]{1}"><br>
    <br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

Yukarıdaki koddaki ilk girdi alanına girilecek değerler "iki büyük harf - bir rakam - bir (büyük ya da küçük) harf" şeklinde olmalıdır. İkinci girdi alanına girilecek değerler "A, B ve C büyük harflerinden biri - iki rakam - bir küçük harf" şeklinde olmalıdır. Son kutucuğa girilecek değerler ise ilk iki hanesi A veya F harfi, son hanesi de rakam olacak şekilde olmalıdır. 

accept niteliği de file tipi ile birlikte kullanılır ve hangi tür dosyaların yüklenmesine izin verileceği belirtilir. IANA medya tiplerinden biri ya da noktayla başlayacak şekilde dosya uzantısı belirtilerek izin verilecek dosya tipi belirtilebilir. Bu niteliğe girilebilecek diğer değerler ise audio/*, video/* ve image/* değerleridir. Bu değerler sırasıyla ses dosyalarının, video dosyalarının, resim dosyalarının yüklenebileceğini belirtir.

list niteliği ile de <input> elemanına bir <datalist> elemanında tanımlanmış seçenekler yerleştirilebilir. Bunu yapmak için ilişkilendirilecek <datalist> elemanı id global niteliği ile adlandırılmalı ve <input> elemanındaki list niteliğinin karşısına bu isim girilmelidir. <datalist> elemanı ileride anlatılacaktır. list niteliği yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.

src, alt, width ve height nitelikleri form gönderme işinin görsel ile yapılması, yani type niteliğinin karşısına image seçeneğinin girilmesi durumunda kullanılır. src niteliğinin karşısına kullanılacak görselin adresi, alt niteliğinin karşısına görselin gösterilememesi durumunda gösterilecek alternatif metin girilir. width ve height nitelikleri ile de görselin genişlik ve yüksekliği belirtilir. Bu niteliklerin karşısına sadece sayı girilir ve girilen sayılar piksel olarak değerlendirilir.

<form> elemanının dışına <input> elemanı yerleştirilip <form> elemanına bağlanabilir. Bunun için öncelikle <form> elemanı id global niteliği ile isimlendirilmelidir. Dışarıda oluşturulan <input> elemanı form niteliği ile nitelendirilir ve bu niteliğin karşısına değer olarak forma verilen isim girilirse <input> elemanı <form> elemanına bağlanmış olur. form niteliği yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="" id="ilk_form">
    İsim: <input name="isim" type="text"><br>
    <br>
    <input type="submit" value="GÖNDER"><br><br>
</form>
    Soyisim: <input name="soyisim" type="text" form="ilk_form"><br>
</body>
</html>

formaction, formenctype, formmethod, formtarget ve formnovalidate nitelikleri submit ve image tipleri ile kullanılır ve kullanım şekli ile işlevleri sırasıyla <form> elemanındaki action, enctype, method, target ve novalidate nitelikleri ile aynıdır. Burada belirtilenler <form> elemanında belirtenlerin yok sayılıp buradakilerin kullanılmasına sebep olurlar. formnovalidate niteliği yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.


<label>

<label> elemanı ile bir girdi elemanı etiketlenebilir. Bu etiket sayfada yerleştirilen yerde gösterilir ve bu etikete tıklandığında girdi alanı aktifleşir.

Bir etiketi bir <input> elemanına bağlamanın bir yolu <input> elemanını <label> etiketlerinin arasına yerleştirmektir. Bir başka yol her iki elemanı da aynı <form> elemanı içine yerleştirmek, <input> elemanına id global niteliği ile isim vermek ve <label> elemanına for niteliği ekleyip değer olarak bağlanacak <input> elemanının ismini girmektir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form>
    <input name="cinsiyet" type="radio" value="kadin" id="kadin">
    <label for="kadin">Kadın</label><br>
    <label><input name="cinsiyet" type="radio" value="erkek"> Erkek</label><br>
    <br>
    <input type="submit" value="GÖNDER">
</form>
</body>
</html>

Eğer etiket form dışına yerleştirilecekse form niteliği ile etiketin hangi forma ait olduğu belirtilmelidir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form id="cinsiyet">
    <input name="cinsiyet" type="radio" value="kadin" id="kadin">
    <label for="kadin">Kadın</label><br>
    <label><input name="cinsiyet" type="radio" value="erkek"> Erkek</label><br>
    <input name="cinsiyet" type="radio" value="yok" id="yok"><br><br>
    <input type="submit" value="GÖNDER"><br><br>
</form>
    <label form="cinsiyet" for="yok">Belirtmek İstemiyorum</label><br>
</body>
</html>

<fieldset> ve <legend>

<fieldset> elemanı ile bir formdaki elemanlar gruplanabilir. Gruplanan kısım çerçeve içine alınır. <legend> elemanı ile de gruplanan elemanlara bir başlık eklenir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <fieldset>
    <legend>Kişisel Bilgiler</legend>
    İsim:<input name="isim" type="text"><br>
    Soyisim:<input name="soyisim" type="text"><br>
    <br>
    Cinsiyet: <br>
        <input name="cinsiyet" type="radio" value="erkek">Erkek<br>
        <input name="cinsiyet" type="radio" value="kadin">Kadın<br>
    </fieldset>
    <fieldset>
    <legend>İlgi Alanları</legend>
    <br>
    Hobiler: <br>
        <input name="hobi" type="checkbox" value="resim">Resim<br>
        <input name="hobi" type="checkbox" value="muzik">Müzik<br>
        <input name="hobi" type="checkbox" value="sinema">Sinema<br>
    <br>
    </fieldset><br>
    <input type="submit">
</form>
</body>
</html>

Karşısına değer girilmeden kullanılan disabled niteliğinin <fieldset> elemanı ile birlikte kullanılmasıyla belirtilen grup içerisine veri girilmesinin engellenmesi sağlanır. Bu nitelik yazının yazıldığı an itibarı ile Internet Explorer ve Safari tarafından desteklenmemektedir.

form niteliği ile form dışındaki bir girdi grubunun bir forma bağlanması sağlanır. Bu niteliğe girilecek değer id global niteliği ile bağlanacak forma verilen isim olmalıdır. Bu nitelik de yazının yazıldığı an itibarı ile sadece Opera tarafından desteklenmektedir.

name niteliği ile de gruba isim verilebilir. Bu isim JavaScript tarafından kullanılabilir. Bu nitelik ise yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.

<legend> elemanı ise kendisine özel bir niteliğe sahip değildir.