Yazar: merhaba değerli arkadaşlar.
html yazılarımı okumuşsanız orada formlar konusunu sizlere anlatmıştım.
şimdi ise bu yazımda sizlere html 5 teknolojisindeki gelişmiş form özelliklerinden bahsedeceğim.
peki, kısaca form nedir hatırlayalım.
form: web site tasarımcısı ve ya web site sahibi ile kullanıcı arasındaki bağlantıyı kuran, veri girişleri yapılmasına olanak sağlayan web alanlarıdır.
bir form içerisinde yazı alanları, düğmeler, işaretli alanlar, combo box lar ve ya buna benzer öğeler yer almaktadır.
bir web siteyi ziyaret ettiniz ve burada kayıt olma, giriş yapma alanları görmeniz muhtemeldir.
işte bu alanlara biz tümüyle form ismini vermekteyiz.
html ile form yapmak oldukça kolaydır.
html 5 ile form yapmak daha da kolay ve karmaşık kod yapısından uzak bir anlayışla yapılmıştır.
şimdi form etiketlerini sırasıyla inceleyelim.
form oluştururken kullanılan iki temel etiket bulunmaktadır.
bu etiketler; <form>, <input> etiketleridir.
<form> etiketi formun başlangıcında kullanılan ve formu oluşturan ana elementtir.
<input> etiketi ise girdi anlamına gelen bir etikettir.
bir diğer html etiketine gözatacak olursak; <label> dilimizde etiket olarak kullanılmaktadır.
şimdi bu etiketleri kullanarak bir örnek oluşturalım.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> basit form örneği </title>
</head>
<body>
<h1> html basit form tasarımı </h1>
<form>
<label>Adınız: </label> <input type=”text”/> <br/><br/>
<label>Soyadınız: </label> <input type=”text”/> <br/><br/>
<input type=”submit” value=”Gönder”/>
</form>
</body>
</html>
Burada bilinmesi gereken önemli nokta type yani tür atfının iyi kullanılmasıdır. Örneğin; type=”text” kullanıcıdan elde edilecek metinsel verileri sunucuya göndermek için kullanılır. Yazılımda buna textbox denir. type=”submit” ise verinin onaylanıp sunucuya gönderileceği bir düğmedir. value atfı ile bu düğmenin görünen adını yazabilirsiniz.
<fieldset> etiketi form elemanlarını bir araya toplayarak bir kutu çizer. Bu etiketin başlık kısmını ise <legend> etiketi oluşturur.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8>
<title> ikinci html5 form örneği </title>
</head>
<body>
<h1> html 5 form tasarımı iki </h1>
<form>
<fieldset>
<legend>Üye Bilgileri</legend>
<label>Adınız – Soyadınız: </label> <input type=”text”/> <br/><br/>
<label>e-Posta Adresiniz: </label> <input type=”text”/> <br/><br/>
<label>şifreniz: </label> <input type=”pass”/> <br/><br/>
<label>Doğum Tarihiniz: </label> <input type=”text”/> <br/><br/>
<input type=”button” value=”Onayla”/>
</fieldset>
</form>
</body>
</html>
textarea
Bazen adres bilgileri gibi birden fazla satırı ihtiva etmesi gereken metin girdilerine ihtiyacımız olabilir. Bunun için <textarea> etiketini kullanabiliriz.
bir örnek yapalım ve daha net ifade etmiş oluruz.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html 5 form örneği üç </title>
</head>
<body>
<h1> html 5 form tasarımı </h1>
<form>
<fieldset>
<legend>Mesaj Gönder</legend>
<label>Rumuzunuz: </label> <input type=”text”/> <br/><br/>
<label>e-Posta Adresiniz: </label> <input type=”text”/> <br/><br/>
<label>Doğum Tarihiniz: </label> <input type=”text”/> <br/><br/>
<label>Mesajınız: </label> <textarea rows=”2″ cols=”18″></textarea> <br/><br/>
<input type=”submit” value=”Onayla”/><br/><br/>
<input type=”reset” value=”Formu Temizle”/>
</fieldset>
</form>
</body>
</html>
<textarea> etiketi kullanılırken bilinmesi gereken önemli nokta rows ve cols, yani satırlar ve sütunlar atıfları ile metin alanımızın büyüklüğünü belirlemekteyiz.
Bu örneğe ek olarak belirtmem gerekir ki <input type=”submit” /> buton ile formu onaylayıp sunucuya gönderebilir; <input type=”reset” /> buton ile ise formun verilerini temizleyebiliriz.
select ve option etiketleri
select dilimizde seçim anlamına gelmektedir. option ise seçenek anlamındadır. <select> ve <option> etiketlerinin birlikte kullanımı “açılır menü” oluşturmamıza yarar.
hadi bir örnek yapalım ve yakından görelim.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html 5 form örneği dört </title>
</head>
<body>
<h1> html 5 form tasarımı </h1>
<form>
<select>
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
<option>Seçenek 4</option>
<option>Seçenek 5</option>
</select>
</form>>
</body>
</html>
optgroup
Bazen seçim menüsünde seçimleri sınıflandırmak isteyebiliriz. Bunun için <optgroup> etiketini kullanmamız yeterlidir.
diğer etiketlerde olduğu gibi bu etiketin kullanımı ile ilgili bir örnek yapalım.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html 5 form örneği beş </title>
</head>
<body>
<h1> html 5 form tasarımı </h1>
<form>
<select>
<option>Seçiniz</option>
<option>Sayılar</option>
<optgroup>
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
<option>Seçenek 4</option>
</optgroup>
<option>Harfler</option>
<optgroup>
<option>Seçenek a</option>
<option>Seçenek b</option>
<option>Seçenek c</option>
<option>Seçenek d</option>
</optgroup>
</select>
</form>
</body>
</html>
evet arkadaşlar genel olarak bir formda kullanılan etiketler bunlardır. ileriki yazılarımda daha geniş form etiketlerini sizler için tekrar ele alacağım.
html 5 ile bir form tasarlamak işte bu kadar kolay ve basittir. şimdi buna ek olarak css ve jquery kullanıp dahada güzel tasarımlar elde etmeniz için hiçbir sebep yok.
sizler yazılarımı okudukça birbirinden güzel yazılar göreceksiniz.
başka bir html 5 yazısında görüşmek üzre hoşçakalın.
iyi bloglamalar herkese.
Bir önceki yazımız olan html 5 tablolar ve kullanımı başlıklı makalemizde html 5 dersleri sadık özdoğan, html 5 table etiketi ve html 5 tablo kullanımı hakkında bilgiler verilmektedir.