Biz temel olarak HTML form oluşturma elemanlarını gördükten sonrasında ise artık yapacağımız şey ise formumuza biraz daha farklı şeyler katmak olacaktır. HTML ile oluşturulan internet sitelerinde kullanıcılardan doldurmasını istediğimiz alanları doğru ve yerinde seçmek bizlere her zaman kullanıcı memnuniyeti ve gerektiğini gerektiği yerde kullanma becerisi katacaktır.
HTML Form öğeleri sayesinde de istediğimiz bilgi türünü istediğimiz elamanı, öğeleri sayesinde alabilmemize olanak sağlayacaktır. Bu sayede farklı form elemanları öğrenerek hepsini gerektiği şekilde ve doğrultuda kullanabilme yeteneğin kapsayacağız.
HTML5 Form Elemanları
Bu içeriğimiz de ise diğer HTML5 Form Oluşturma yazısından farklı olarak öğrenmediğimiz diğer farklı form elemanlarından bahsedeceğiz. Bir sonra ki yazımızda ise input olarak oluşturduğumuz giriş birimlerinden daha detaylı bir şekilde üzerinde konuşacağız.
Bugün ki konumuz ise bizim aşağı doğru açılan bir menü, bunun birde daha gelişmiş versiyonu ve tabi ki birde öğenmemiz ve formumuzun amacına göre genelde koymuş olduğumuz bize yazmak istedikleri bir mesaj kutusu koymak olacaktır. Bunlar için ise :
[accordion] [accordion_content title=”HTML Form Select Kullanımı” icon=”” active=”active”]Bu sefer ise bizler artık insanlara seçtirmiş olacağımız şeyi bir açılır listeden seçtirmek istiyor isek kullanacağımız eleman select elemanı olacaktır. Select öğesini kullanmak için ise :
<form> <select name="araba"> <option value="volvo">Volvo</option> <option value="Fiat">Fiat</option> <option value="bmw">Bmw</option> <option value="opel">Opel</option> </select> </form>
Yukarıda yer alan kısımda ise bizler artık bu HTML form açılır liste yapmayı başardık. Kullanmış olduğumuz “<option>” etiketi sayesinde de bu açılır listeye değerler girmeyi sağlıyoruz. İstediğiniz kadar değer girecek iseniz yukarıda görmüş olduğunuz şekilde alt alta yazıp ardından da açmış olduğumuz <select> etiketi sayesinde kapatarak açılır listeyi tamamlayabilirsiniz. Eğer bizim bir değeri seçili olarak gelmesini istiyor isek önceki dersimizden de hatırlayacağınız şekilde “selected” özelliğini ekleyebilirsiniz. Fakat biz eğer bu açılır listenin satır sayısının ekranda daha fazla kullanılmasını istiyor yada birden fazla seçeneğin seçilebilmesini istiyor isek yapmamız gerekenler ise :
<form> <select name="araba" size="3" multiple> <option value="volvo">Volvo</option> <option value="Fiat">Fiat</option> <option value="bmw">Bmw</option> <option value="opel">Opel</option> </select> </form>
Yukarıda yer alan kısımda ise select etiketinin içine size etiketini eklerken bir değer belirttik ve bu belirttiğimiz değerler ise bizlere kaç satır gözükeceğini göstermektedir. Multiple etiketi sayesinde de bu seçeneklerden birden fazlasını seçmemize olanak sağlayacaktır.[/accordion_content][accordion_content title=”HTML Form Datalist Kullanımı” icon=”” active=”active”]HTML5 ile gelen ve kullanıcının veri girdikçe açılan bir liste haline gelen ve aşağısında girmiş olduğunuz karakterlere göre içerisinde içeren sonuçların çıktığını ve seçebileceğiniz bir açılır listedir. Kafanızda canlandırabilmek için ise en güzel sonuç aslında bunu sizin kendinizin denemesidir fakat yinede diyelim ki oluşturduğunuz formda insanlara şehirlerini seçtireceksiniz. İnsanlar tek tek aşağı inmek yerine o kısma “İs” yazdığını varsayalım ve şehir olarak içinde “is” geçiren “İstanbul” gibi şehrin gelmesini sağlayıp tıklayıp kolayca seçmesini sağlayabiliriz.
<form> <input list="tarayıcılar"> <datalist id="tarayıcılar"> <option value="Internet Explorer">Internet Explorer</option> <option value="Firefox">Firefox</option> <option value="Chrome">Chrome</option> <option value="Opera">Opera</option> <option value="Safari">Safari</option> </datalist> </form>
Yukarıda görmüş olduğunuz şekilde datalist etikenin önünde de bir input ile liste olduğuna dair bir tanımlama yapmış bulunuyoruz. Yukarıda yer alan kodları alıp kendi bilgisayarınızda denediğiniz zaman ne kadar kolay bir kullanıcı kolaylık deneyimi yaşayacaklarını sizde fark edeceksiniz.[/accordion_content][accordion_content title=”HTML Form Textarea Kullanımı” icon=”” active=”active”]HTML formda kullanıcıdan bir mesaj almak istiyor isek bu sefer ise kullanmamız gereken eleman bir metin kısmı olacaktır. Bazen bazı iletişim formlarında ne olduğuna dair bizim o kişiye göndermemiz gereken ve yazarak yollamamız gereken konumuzu söyleyeceğimiz kısımlar burada ki textarea elemanı sayesinde oluşturulmaktadır.
<form> <textarea name="mesaj" rows="10" cols="30"></textarea> </form>
Yukarıda yer alan kısımda ise artık bir mesaj kısmı oluşturmuş bulunuyoruz. Daha öncesinde öğrendiğiniz placeholder gibi etiketler sayesinde de kullanıcıdan buraya girmek istedikleri metinleri yazmanızı sağlayacak bir yazı yazabilirsiniz. Temel olarak işimize yarayacak ve bilmemiz gereken bir form ögesidir. Yukarıda artık rows ve cols özelliğinden de satır ve sütün olarak boyutunu ayarlamış olduğumuzun bir HTML kurdu olarak farkına varmışsınızdır diye düşünüyorum.[/accordion_content] [/accordion]
Yukarıda yer alan kısımda ise bilmemiz ve işimizi kolaylaştıracak elemanları bir göz atmış bulunmaktadır. Unutmamız gereken tek şey ise sizlerin yukarıda yer alan kod parçalarını alıp, kendiniz üzerinde değişiklikler yapmalı ve kendi kullanacağınız doğrultuda bir şekle soktuğunuzda aslında tam olarak o zaman öğrenmiş olursunuz.
Bu içeriğimiz de de işinize yarayacak ve gerekli olan HTML5 Form elemanlarından bahsetmiş bulunuyoruz. Evet forma dair bir önce ki içeriğimiz ve bu içerikte bir çok şeyi öğrenmiş bulunuyoruz fakat ne yazık ki hala daha eksiklerimiz var. Bu eksikliklerimiz ise input ‘un neler olduğunu ve neler kapsayacağıdır. Bir sonra ki içerikten sonrasında artık tamamen bir form oluşturarak istediğinizi oluşturabilecek bir düzeye ulaşabilirsiniz. Hadi kolay gelsin ✋.