HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html5 form option list
html5 form option select
html5 input options
html5 form options
html5 color code
html5 colors
html5 color input
html5 renk kodları
html5 color options
html5 date input
html5 date options
html5 tarih ekleme
html5 email input
html5 email
html5 month input type
html5 month input
html5 number input
html5 number element
html5 range input
html5 range list
html5 search box
html5 arama kutusu
html5 arama kutusu ekleme
html5 time input
html5 time example
html5 address tag
html5 url input
html5 url tag
html5 week input
html5 week tag

HTML Form Giriş(Input) Özellikleri

HTML Form Giriş(Input) Özellikleri
Html
Sayfalarının Başlık rengi: <input type="color" name="site_basliklari_rengi">

Html temelleri ders dizimizde form giriş tiplerinden bahsetmiştik fakat onlar temel özellikleriydi. Şimdi ise form elemanlarını nasıl daha işe yarar kullanırız onu göreceğiz.Bu yeni özellikler sayesinde hem daha kullanışlı hemde daha verimli sonuç alacağız.Başlayalım..

1-Renk Özelliği(Giriş Tipi: Color)

Bu özellik ile beraber artık renk seçmek daha da kolaylaştı. Yani şöyle değişik bir örnek verelim. Mesela bir site yapıyorsunuz ve sitenin sayfalarında değişik renkler kullanacaksınız.Tam rengin tonunu tutturmak için bu renk paletli giriş özelliğini kullanabilirsiniz. Bunu şöylede düşünebilirsiniz; Evimizin boyasını değiştireceğimiz zaman, renk kartelasına baktığımızda "Kilim Beyazı","Peri Bacası" gibi renklere isim verilmiş olduğunu görürüz. Bu renkler giriş özelliği renk olan elemanda renk kodları ile belirtilmiş.Seçilen renk kodu form gönderildiğinde istenilen yere kaydedilir. Daha sonra kaydettiğiniz yerden bulduğumuzda bu renk kodunu gerekli yerde kullanabiliriz. Tabi normal herkesin anlayabileceği şekilde anlatmaya çalıştım. İşin teknik kısmını yavaş yavaş öğreneceksiniz. Unutmayın ilk önce bir kodu yazmadan bu kodun nereye gideceğini ne yapacağını hayal edin. Hayal etmek zor geliyorsa not alın gerekirse çizin. Zaman zaman konu dışına çıkıp öğütler veriyorum arkadaşlar. Bu sitenin sözlük gibi bir site olmasını istemiyorum.Doğal ve açık, samimi olmalı..

Kullanımı:

Sayfalarının Başlık rengi: <input type="color" name="site_basliklari_rengi">

2-Tarih Özelliği(Giriş Tipi: Date)

Bu özellik ile formu dolduran bir kişinin daha rahat bir şekilde tarih seçmesini sağlayabilirsiniz. Bu özelliğin işimizi nasıl kolaylaştırdığını basit bir örnekle açıklayalım; Şimdi kendinizi formu dolduracak olan bir ziyaretçi yerine koyun. Bunu kod yazarken hep yapın çünkü ziyaretçi sizin zannettiğinizden çok farklı şekilde davranabilir. Bu özelliğin kullanılmadığını yani "type" değerinin "text" olduğunu düşünün ve sizden doğum tarihiniz girmeniz istensin. Nasıl bir şekilde girerdiniz ? Bu şekilde mi "30.10.1966" güzel. Peki bende böyle girmek istiyorum. "30-10-1966" yada bir başka örnek "30/10/1966".

Bunda ne var ki yani hepsi aynı şey sonuçta, hem böyle daha kolay klavyeden girerler ?

Tabi ki bu şekilde daha kolay sevgili ziyaretçilerim fakat biz kod yazan taraf için değil, formu dolduracak ziyaretçilerin için bu böyle. Çünkü ziyaretçiler takır takır hemen yazacak ama kafalarına göre ayraç kullanacaklar. Her formu dolduran farklı bir ayraç kullandığı içinde bu veritabanına farklı farklı kaydedilecek berki de hiç kaydedilmeyecek yani böyle bir formatı kabul etmeyecek ! Çözüm basit, tüm ziyaretçilerin tek bir formatı kullanmalarını sağlamalısınız bunun içinde en güzel çözüm "type" parametresine atayacağınız "date" değeri, bu sıkıntıdan sizi en rahat bu şekilde üstesinden gelirsiniz. Umarım anlatabilmişimdir. Eğer şimdi anlamadıysanız bile işin kod kısmına baya girdiğinizde ne demek istediğimi anlayacaksınız.Aslında bütün "type" girişlerinin amacı bu düzeni sağlamak.

Doğum Tarihi: <input type="date" name="bday">

3-E-Mail Özelliği(Giriş Tipi: E-Mail)

Bu özellik ne işe yarar diye düşündüğünüzde aklınıza "Mail adresini düzgün bir şekilde girilmesini sağlıyor girilmez ise uyarı veriyor" gibi  tanımlar gelebilir. Doğru bildiniz. Mail adresini dört dörtlük kontrol edemese de bu özellik tarayıcılar için çok işe yarıyor. Tarayıcılar sayfanızdaki formu tararken bu girişe e-mail girilmesi gerektiğini anlıyor ve kendisi "@"  ve ".com" gibi tamamlamalarını sağlıyor. Tamamlamasa bile uyarısını veriyor düzgün doldurulmadan da form gönderilmiyor.Bu bence Html 5 ile gelen en güzel özelliklerden biri çünkü eskiden bunun kontrolünü Javasript ile sağlıyorduk, iş uzuyor ve sıkıcı oluyordu. Artık formlardaki kontrolleri html diline taşıyorlar. Extradan bir kontrole gerek olmuyor.

Kullanımı:

<form>


Email:<br>


<input type="email" name="iletisim_email"><br><br>


<input type="submit" value="Gönder">


</form>

4-Ay Özelliği(Giriş Tipi: Month)

Ziyaretçilerinizden sadece ay ve yıl öğrenmek istediğiniz zaman bunu kullanabilirsiniz. Mesela ziyaretçilerinizden mezun olduğu üniversite ile ilgili bilgi topluyorsunuz. Sizin tam olarak günü bilmeniz bir işe yaramaz ve zaten ziyaretçilerin çoğu da tam günü hatırlayamaz. Bu yüzden sadece ay ve yıl bilgilerini rahatlıkla aynı formatta isteyebileceğiniz ay özelliği ile bunu yapabilirsiniz.

Mezun Olduğunuz Tarih:<input type="month" name="mezun_tarihi">

5- Sayı Özelliği(Giriş Tipi: Number)

Bu özellik belirli iki sayı arasında değer girmesini sağlıyor. Bir örnekle açıklarsak mesela ziyaretçilerin sitenizde bir makaleye 1-5 arasında yıldız vermesini istiyoruz. Ziyaretçinin bu sınırlar dışında sayı girmesini engelliyoruz.

<form>


Yıldız değeri girin (1 ve 5 arasında): <input type="number" name="yildiz" min="1" max="5">


<input type="submit" value="Yıldız Ver">


</form>

6-Dizi Özelliği(Giriş Tipi: Range)

Sayı özelliği ile aynı mantığa sahiptir. Maksimum ve minimum değer aralığındaki değerlerden birinin seçilmesi sağlanır. Örneğin sitenizde müzik çalıyor, sesini ziyaretçi sayfanız üzerinden ayarını yapabilmesi sağlanabilir.

<u>Ses Düzeyi:</u><br>


<input type="range" name="ses_duzeyi" min="0" max="10">

7-Arama Özelliği(Giriş Tipi: Search)

Sitenizde ziyaretçilerin aradıkları sonucu çabuk bulabilmeleri için bir giriş koyabilirsiniz. Mesela isimlerin anlamlarını yazan bir siteniz var. Ziyaretçi kendi ismini arama kutusuna yazar ve arar. Böylelikle ziyaretçilerinizi sayfalarda dolaştırmadan direk sonuca yöneltmiş olursunuz.

Not: Arama özelliğinin asıl faydası; Veritabanında sorgu yaptığınızda ziyaretçinin girdiği veriyi komple yazıya çevirdiği için bir sıkıntı yaşamamanız.

<form>


  İsminizin Anlamını Hemen Öğrenin :) <br>


  <input type="search" name="aranacak_isim" placeholder="İsminiz">


  <input type="submit" value="Ara">


</form>

8- Zaman Özelliği(Giriş Tipi: Time)

Ziyaretçiden saat ve dakika verilerini almanızı sağlar. Mesela bir lokantaya web sitesi hazırlayacaksınız. Bu web sitesinde ziyaretçilerin isterlerse rezervasyon almalarını sağlıyorsunuz. Bunun için elbette bir form oluşturacaksınız ve rezervasyon için saat ve dakika bilgisi alacaksınız. Bu bilgiyi ziyaretçinin doğru formatta girmesini sağlaması için bu giriş tipini kullanabilirsiniz.

Kullanımı:

Rezervasyon zamanı:<input type="time" name="rezervasyon_zamani">

9-Adres Özelliği(Giriş Tipi: URL)

Ziyaretçiden url adresi bilgisi almak istediğinizde kullanılır. Bu özellik sayesinde url adreslerini düzgün bir şekilde alabilirsiniz. Hatalı girişlerde uyarı mesajı verecektir. Mesela ziyaretçinizin kendi kişisel blog sitesi vardır. Onu paylaşmasını isteyebilirsiniz.

<form>


    Kişisel web siteniz:<input type="url" name="kisisel_website">


    <input type="submit" value="Gönder">


<form>

10- Hafta Özelliği(Giriş Tipi: Week)

Benim en çok dikkatimi çeken özellik, hafta özelliği sayesinde ziyaretçinizden hangi yılın kaçıncı haftasını kastettiği bilgisini alabilirsiniz. Bir firmanın web sitesini yaptınız ve tabi birde bunun yönetim panelini yaptınız. Bu panelde firmanın her ay bir hafta mal kabul işi olduğunu varsayalım. Siz her ay, bu ay ,ayın hangi haftası mal kabul işinin olacağını kayıt altına alabilirsiniz.

Mal Kabulü: <input type="week" name="malkabul_haftası">


Paylaş:

Enes KILIÇ
Webmaster