HTML5 Form Yapısı ve Form Elemanları

Transkript

1 HTML5 Form Yapısı ve Form Elemanları HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.formlar.etiketleri arasına yazılırlar.bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım <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öntem 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. HTML5 Form Yapısı ve Form Elemanları 1

2 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 <button> etiketi kullanılarak ya da <input> etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan <button> 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. <input> 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. <input> 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 <select> etiketini kullanırız. Metin girişleri Metin girdilerini almak için iki tür eleman kullanılır. <input> etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve <textarea> etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır. Dosya seçim elemanları <input> etiketinde bir parametre olarak type="file" kullanılarak oluşturulan elemanlardır. Gizli elemanlar <input> etiketinde bir parametre olarak type="hidden" kullanılarak oluşturulan elemanlardır. Nesneler <object> etiketi kullanılarak oluşturulan elemanlardır. Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım. <input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. <Input> Tagı Parametreleri class="table table-responsible table-striped table-bordered table-hover" Girilecek Kod Görevi type = "eleman türü" 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. name = "isim" Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. value = "değer" "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. size = "değer" "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. maxlength = "değer" "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. checked = "değer" Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yoksayılır. src = "dosya ismi" "image" elemanında resim dosyasını belirtmek için kullanılır. alt = "metin" Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır. align = "left center right" Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. readonly Veri girme amacıyla kullanılmayacak elemanlar içindir. disabled Veri girişi engellenecek elemanlar içindir. type parametresi ile belirtilebilecek eleman türleri: <input type="text" Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır. Adı: <input type="text" name="firstname"><br> Soyadı: <input type="text" name="lastname"> Adı: Soyadı: HTML5 Form Yapısı ve Form Elemanları 2

3 <input type="password" Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir. Kullanıcı: <input type="text" name="username"><br> Parola: <input type="password" name="password"> Kullanıcı: Parola: <input type="checkbox" Formumuza onay kutuları eklemek için kullanılır. <input type="checkbox" name="kutu1" checked="on"> HTML<br> <input type="checkbox" name="kutu2"> PHP<br> <input type="checkbox" name="kutu3"> MySQL HTML PHP MySQL <input type="radio" Formumuza radyo düğmeleri eklemek için kullanılır. submit, reset, button, image 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 src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur. <form action=" method="post"> <p> Adınız: <input type="text" name="firstname"><br> Soyadınız: <input type="text" name="lastname"><br> Eposta adresiniz: <input type="text" name=" "><br> <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br> <input type="radio" name="cinsiyet" value="disi"> Dişi<br> <input type="submit" value="send"> <input type="reset" value="sıfırla"> </p> </form> Adınız: Soyadınız: Eposta adresiniz: Erkek Dişi OK Sıfırla <input type="file" Formumuza dosya ismi giriş alanı eklemek için kullanılır. <input type="file"> <input type=" " HTML5 ile gelen bu input tipi ile girişlerini kontrol etmek daha kolaylaştı. <input name=" -test" type=" "> HTML5 Form Yapısı ve Form Elemanları 3

4 <input type="tel" HTML5 ile gelen bu input tipi ile telefon girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="tel-test" type="tel"> <input type="url" HTML5 ile gelen bu input tipi ile URL adres girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="url-test" type="url"> <input type="date" HTML5 ile gelen bu input tipi ile tarih girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="datetime-test" type="date"> <input type="datetime" HTML5 ile gelen bu input tipi ile tarih ve saat girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="datetime-test" type="datetime"> <input type="datetime-local" HTML5 ile gelen bu input tipi ile tarih ve saat girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="datetime-local-test" type="datetime-local"> <input type="month" HTML5 ile gelen bu input tipi ile Ay girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="month-test" type="month"> <input type="week" HTML5 ile gelen bu input tipi ile Hafta girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="week-test" type="week"> HTML5 Form Yapısı ve Form Elemanları 4

5 <input type="time" HTML5 ile gelen bu input tipi ile saat ve dakika girişlerini kontrol etmek ve biçimlendirmek daha kolaylaştı. <input name="time-test" type="time"> <input type="color" HTML5 ile gelen bu input tipi ile renk seçimi yapmak daha kolaylaştı. <input name="color-test" type="color"> <input type="number" HTML5 ile gelen bu input tipi ile numara girişi yapmak daha kolaylaştı. <input name="number-test" min="0" max="100" step="5" type="number"> <input type="range" HTML5 ile gelen bu input tipi ile sürgülü ile seçim yapmak daha kolaylaştı. <input name="range-test" min="0" max="150" step="5" type="range"> <input type="search" HTML5 ile gelen bu input tipi ile arama kutucukları ayrı bir isme sahip oldu. <input name="search-test" results="5" autosave="some_unique_value" type="search"> HTML5 Form Yapısı ve Form Elemanları 5

6 <meter> <meter min= max=20 value=12 optimum=10>12cm</meter> <progress> <progress value=50 max=100>0%</progress> <output> <output onforminput="value = number_1.valueasnumber + number_2.valueasnumber"></output> <button> </button> 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. <form action=" method="post"> <p> Adınız: <input type="text" name="firstname"><br> Soyadınız: <input type="text" name="lastname"><br> Eposta adresiniz: <input type="text" name=" "><br> <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br> <input type="radio" name="cinsiyet" value="disi"> Dişi<br> <button name="submit" type="submit" value="submit"> <img width="20" height="21" src="../images/belgeler-logo.gif"/>gönder </button> <button name="reset" type="reset" value="reset"> <img width="20" height="21" src="../images/belgeler-logo.gif"/>sıfırla </button> </P> </form> Adınız: Soyadınız: Eposta adresiniz: Erkek Dişi Gönder Sıfırla <select> </select>, <optgroup> </optgroup>, <option> </option> <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. Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir. Tek seçimli aşağıya açılan liste örneği: <select name="os_type"> <option value="win">windows 9x</option> <option value="winnt">windows NT</option> <option value="linux">linux</option> <option value="unix">unix</option> <option value="os2">os/2</option> <option value="macos">macos</option> </select> HTML5 Form Yapısı ve Form Elemanları 6

7 Linux Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği: <select name="menu" multiple> <option selected="" value="none">hiçbiri</option> <optgroup label="çorbalar"> <option value="c1">tarhana</option> <option value="c2">ezogelin</option> <option value="c3">işkembe</option> </optgroup> <optgroup label="yemekler"> <option value="y1">imambayıldı</option> <option value="y2">sultanbeğendi</option> <option value="y3">kadınbudu</option> </optgroup> <optgroup label="tatlılar"> <option value="t1">kazandibi</option> <option value="t2">tavukgöğsü</option> <option value="t3">keşkül</option> </optgroup> </select> Hiçbiri <textarea> </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. <fieldset> </fieldset>, <legend> </legend> 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. <legend> etiketi gruplanmış elemanlara bir başlık oluşturur. Aşağıda bir hasta kartı örnek olarak verilmiştir. <fieldset> <legend>kişisel Bilgiler</legend><br/> Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/> Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/> Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/> <!--...diğer kişisel bilgiler... --> </fieldset> <fieldset> <legend>tıbbî Geçmişi</legend><br/> <input name="gecirilen_hastalik" type="checkbox" value="bogmaca" tabindex="20"/> Boğmaca <input name="gecirilen_hastalik" type="checkbox" value="kabakulak" tabindex="21"/> Kabakulak <input name="gecirilen_hastalik" type="checkbox" value="kizamik" tabindex="22"/> Kızamık <input name="gecirilen_hastalik" type="checkbox" value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/> <!--...tıbbi geçmişi ile ilgili diğer... --> </fieldset> <fieldset> <legend>ilaç Tedavisi</legend><br/> Halen kullanmakta olduğunuz ilaçlar var mı?<br/> <input name="medication_now" type="radio" value="evet" tabindex="35"/> Evet <input name="medication_now" type="radio" value="hayir" tabindex="35"/>hayır<br/><br/> Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:<br/> <textarea name="kullandigi_ilaclar" rows="10" cols="60" tabindex="40"> </textarea> </fieldset> HTML5 Form Yapısı ve Form Elemanları 7

8 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: HTML5 Form Yapısı ve Form Elemanları 8