Formlar ile Çalışmak <form></form>

Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır. Form etiketi ile birlikte en çok kullanılan iki kodu aşağıda belirttim. Bunların dışında bir iki kod daha olsa da pek kullanılmamaktadır. Tablo 1.6. Form etiketi yardımcı elemanları

Girilecek Kod	Görevi
action = "dosya ismi"	Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu.
method = "yöntem"	Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi

Formlar hazırlanırken çok değişik elemanlar kullanılır. Şimdi formumuza dahil edilebilecek elemanları kısaca tanıyalım. Tanımladığım elemanların etkin kullanımı için form etiketinin yorum aralığı içinde kullanılması gereklidir!. Bu elemanlar form etiketinin dışında da kullanılabilirlerse de istenen fayda sağlanamayacaktır. (Belgedeki etiket örnekleri böyledir, yani etkisizdir.) Düğmeler 3 tür düğme vardır.Gönderme düğmeleri Tıklandığında formu gönderir. Bir form üzerinde birden fazla gönderme düğmesi bulunabilir. Sıfırlama düğmeleri Tıklandığında formun içeriği başlangıç değerlerine döndürür. Genel amaçlı düğmeler Öntanımlı bir davranışa sahip olmayan düğmelerdir. Tıklandığında event parametresinde belirtilen betiği çalıştırarak bazı ek işlevlerin gerçekleştirilmesinde kullanılırlar. Düğmeler ya doğrudan etiketi kullanılarak ya da etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan etiketi kullanımı tercih edilir. Belirtildikleri etiketin type parametresinde bu 3 tür düğme sırasıyla submit, reset, button değerleri verilerek kullanılır. Onay kutuları Kare, içine tik bırakılan kutucukları oluşturmak için kullanılır. etiketinde bir parametre olarak belirtilerek kullanılır. Radyo düğmeleri Sayfamıza yuvarlak işaret kutucuğu bırakmak için kullanılır. Kullanılan kutucuğun onay kutusundan farkı, sadece bir seçenek işaretlenebilmesidir. etiketinde bir parametre olarak type="radio" belirtilerek ve ek olarak value ve name parametreleriyle birlikte kullanılır. Menüler Ziyaretçi bu menüden mevcut seçenekler arasından herhangi birini seçerek bilgi girişinde bulunur. Sayfamıza bu elemanı eklemek için etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır. </span><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">Dosya seçim elemanları</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana"><input> etiketinde bir parametre olarak </span><span style="color: maroon; font-family: Courier"><font size="3">type="file"</font></span><span style="font-size: 10pt; color: black; font-family: Verdana"> kullanılarak oluşturulan elemanlardır. </span><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">Gizli elemanlar</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana"><input> etiketinde bir parametre olarak </span><span style="color: maroon; font-family: Courier"><font size="3">type="hidden"</font></span><span style="font-size: 10pt; color: black; font-family: Verdana"> kullanılarak oluşturulan elemanlardır. </span><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">Nesneler</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana"><object> etiketi kullanılarak oluşturulan elemanlardır. </span><span style="font-size: 10pt; color: black; font-family: Verdana">Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım. </span><a name="id1"></a><b><span style="font-size: 15pt; color: maroon; font-family: Tahoma"><input></span></b><span style="font-size: 10pt; color: black; font-family: Verdana">Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü </span><span style="color: maroon; font-family: Courier"><font size="3">type</font></span><span style="font-size: 10pt; color: black; font-family: Verdana"> öğesinde belirtilerek farklı girdilerin alınmasını sağlar. </span><b><span style="font-size: 10pt; color: black; font-family: Verdana">Tablo 1.7. Input etiketi yardımcı kodları</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"></span> <table border="0" cellspacing="1" cellpadding="0" class="MsoNormalTable" style="background: #999999; margin: auto auto auto 36pt"><tbody><tr><td valign="top" style="background: #eeeedd; border: #e0dfe3; padding: 2.25pt"><p style="margin: 0cm 0cm 0pt" class="MsoNormal"><span style="font-size: 10pt; color: black; font-family: Verdana">Girilecek Kod</span></p></td><td valign="top" style="background: #eeeedd; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Görevi</span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">type = "eleman türü"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">name = "isim"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">value = "değer"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">"radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">size = "değer"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">"text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">maxlength = "değer"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">"text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">checked = "değer"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yoksayılır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">src = "dosya ismi"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">"image" elemanında resim dosyasını belirtmek için kullanılır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">alt = "metin"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">align = "left|center|right"</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">readonly</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Veri girme amacıyla kullanılmayacak elemanlar içindir. </span></td></tr><tr><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">disabled</span></td><td valign="top" style="background: #ffffee; border: #e0dfe3; padding: 2.25pt"><span style="font-size: 10pt; color: black; font-family: Verdana">Veri girişi engellenecek elemanlar içindir. </span></td></tr></tbody></table><span style="color: maroon; font-family: Courier"><font size="3">type</font></span><span style="font-size: 10pt; color: black; font-family: Verdana"> parametresi ile belirtilebilecek eleman türleri: </span><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">text</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3">Adı: <input type="text" name="firstname"><br></font></span><span style="color: black; font-family: Courier"><font size="3">Soyadı: <input type="text" name="lastname"></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana">Adı: <br />Soyadı: </span> <div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">password</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3">Kullanıcı: <input type="text" name="username"><br></font></span><span style="color: black; font-family: Courier"><font size="3">Parola: <input type="password" name="password"></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana">Kullanıcı: <br />Parola: </span> <div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">checkbox</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuza onay kutuları eklemek için kullanılır. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><input type="checkbox" name="kutu1" checked="on"> HTML<br></font></span><span style="color: black; font-family: Courier"><font size="3"><input type="checkbox" name="kutu2"> PHP<br></font></span><span style="color: black; font-family: Courier"><font size="3"><input type="checkbox" name="kutu3"> MySQL</font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana">HTML<br />PHP<br />MySQL </span><div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">radio</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuza radyo düğmeleri eklemek için kullanılır. </span><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">submit, reset, button, image</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir amaçla kullanmak içindir. Diğer ikisi gibi öntanımlı bir davranışı olmayan, gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir. Image ile oluşturulan düğme </span><span style="color: maroon; font-family: Courier"><font size="3">src</font></span><span style="font-size: 10pt; color: black; font-family: Verdana"> parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><span> </span><form action="http://herhangibirsite.dom/prog/adduser" method="post"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><p></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Adınız: <input type="text" name="firstname"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Soyadınız: <input type="text" name="lastname"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Eposta adresiniz: <input type="text" name="email"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><input type="radio" name="cinsiyet" value="disi"> Dişi<br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><input type="submit" value="Send"> <input type="reset" value="Sıfırla"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></P></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></form></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana">Adınız: <br />Soyadınız: <br />Eposta adresiniz: <br />Erkek<br />Dişi<br /></span> <div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><b><span style="font-size: 10pt; color: maroon; font-family: Verdana">file</span></b><span style="font-size: 10pt; color: black; font-family: Verdana"> </span><span style="font-size: 10pt; color: black; font-family: Verdana">Formumuza dosya ismi giriş alanı eklemek için kullanılır. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><input type="file"></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><a name="id2"></a><b><span style="font-size: 15pt; color: maroon; font-family: Tahoma"><button> </button></span></b><span style="font-size: 10pt; color: black; font-family: Verdana">Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yeralabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Yukarıdaki örneği button etiketi ile yazarsak farkları görebilirsiniz. </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><span> </span><form action="http://herhangibirsite.dom/prog/adduser" method="post"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><p></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Adınız: <input type="text" name="firstname"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Soyadınız: <input type="text" name="lastname"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>Eposta adresiniz: <input type="text" name="email"><br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><input type="radio" name="cinsiyet" value="disi"> Dişi<br></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><button name="submit" type="submit" value="submit"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><img width="20" height="21" src="../images/belgeler-logo.gif" />Gönder</font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></button></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><button name="reset" type="reset" value="reset"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><img width="20" height="21" src="../images/belgeler-logo.gif" />Sıfırla</font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></button></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></P></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></form></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana">Adınız: <br />Soyadınız: <br />Eposta adresiniz: <br />Erkek<br />Dişi<br />Gönder Sıfırla </span><div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><span style="font-size: 10pt; color: black; font-family: Verdana">(Bu örneği hakkıyla, Mozilla görüntülemektedir.) </span><a name="id3"></a><b><span style="font-size: 15pt; color: maroon; font-family: Tahoma"><select> </select>, <optgroup> </optgroup>, <option> </option></span></b><span style="font-size: 10pt; color: black; font-family: Verdana"><select> etiketi seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <optgroup> etiketi ise bu liste elemanlarını konularına göre gruplamakta kullanılır. Bir select etiketi en azından bir option etiketi içermeli ve optgroup etiketleri iç içe olmamalıdır. </span><span style="font-size: 10pt; color: black; font-family: Verdana">Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir. </span><span style="font-size: 10pt; color: black; font-family: Verdana">Tek seçimli aşağıya açılan liste örneği: </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><select name="os_type"></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="win">Windows 9x</option></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="winnt">Windows NT</option></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="linux">Linux</option></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="unix">UNIX</option></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="os2">OS/2</option></font></span><span style="color: black; font-family: Courier"><font size="3"><option value="macos">MacOS</option></font></span><span style="color: black; font-family: Courier"><font size="3"></select></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana"></span> <div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><span style="font-size: 10pt; color: black; font-family: Verdana">Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği: </span><div style="background: #ffffee; margin-left: 46pt; margin-right: 0cm; border: #999999 1pt dotted; padding: 4pt"><span style="color: black; font-family: Courier"><font size="3"><select name="menu" multiple></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option selected="" value="none">Hiçbiri</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><optgroup label="Çorbalar"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="c1">Tarhana</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="c2">Ezogelin</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="c3">İşkembe</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></optgroup></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><optgroup label="Yemekler"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="y1">İmambayıldı</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="y2">Sultanbeğendi</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="y3">Kadınbudu</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></optgroup></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><optgroup label="Tatlılar"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="t1">Kazandibi</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="t2">Tavukgöğsü</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span><option value="t3">Keşkül</option></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span></optgroup></font></span><span style="color: black; font-family: Courier"><font size="3"></select></font></span></div><table border="0" cellspacing="1" cellpadding="0" width="95%" class="MsoNormalTable" style="background: #e0e0e0; margin: auto auto auto 36pt; width: 95%"><tbody><tr><td style="background-color: transparent; border: #e0dfe3; padding: 2.25pt"><div style="border-right: medium none; padding-right: 0cm; border-top: medium none; padding-left: 0cm; padding-bottom: 1pt; border-left: medium none; padding-top: 0cm; border-bottom: windowtext 1pt solid"><p style="margin: 0cm 0cm 0pt; text-align: center; border: medium none; padding: 0cm" class="MsoNormal" align="center"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Üstü</span></p></div><span style="font-size: 10pt; color: black; font-family: Verdana"></span> <div style="border-right: medium none; padding-right: 0cm; border-top: windowtext 1pt solid; padding-left: 0cm; padding-bottom: 0cm; border-left: medium none; padding-top: 1pt; border-bottom: medium none"><span style="display: none; font-size: 8pt; font-family: Arial">Formun Altı</span></div></td></tr></tbody></table><a name="id4"></a><b><span style="font-size: 15pt; color: maroon; font-family: Tahoma"><textarea> İngilizce “metin alanı” anlamına gelen bu kelime formumuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. Örnek aşağıdaki bölümde verilmiştir. , Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun alaşılırlığını arttırması ve kullanımını kolaylaştırması bakımından çok faydalıdır. etiketi gruplanmış elemanlara bir başlık oluşturur. Aşağıda bir hasta kartı örnek olarak verilmiştir.

   Kişisel Bilgiler
Adı:       Soyadı:

Adresi:

    Tıbbî Geçmişi
         type="checkbox"         value="bogmaca" tabindex="20"/> Boğmaca               type="checkbox"         value="kabakulak" tabindex="21"/> Kabakulak               type="checkbox"         value="kizamik" tabindex="22"/> Kızamık              type="checkbox"         value="sucicegi" tabindex="23"/> Suçiçeği

       İlaç Tedavisi
Halen kullanmakta olduğunuz ilaçlar var mı?
         type="radio"         value="Evet" tabindex="35"/> Evet               type="radio"         value="Hayir" tabindex="35"/>Hayır

   Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:
  </font></span><span style="color: black; font-family: Courier"><font size="3"><span>            </span>rows="10" cols="60"</font></span><span style="color: black; font-family: Courier"><font size="3"><span>            </span>tabindex="40"></font></span><span style="color: black; font-family: Courier"><font size="3"><span> </span>

Formun Üstü

Kişisel Bilgiler
Adı:      Soyadı:

Adresi:

Tıbbî Geçmişi
Boğmaca     Kabakulak     Kızamık     Suçiçeği

İlaç Tedavisi
Halen kullanmakta olduğunuz ilaçlar var mı?
Evet     Hayır

Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:

(Bu örneği hakkıyla, Mozilla görüntülemektedir.)

Formlar ile Çalışmak

Haber anlatımı

240 Kere okundu

Bu makaleyi beyendinizmi ?

Mehmet YILMAZ

Sitede ara Gelişmiş Arama seçenekleri »

Ana sayfa \| Ana sayfanız yapın \| Sık kullanılanlara ekle \| Rss/Rdf \| JavaScript