HTML5 ile beraber form alanlarına birçok yeni özellik eklenmiştir Bu özellikler sayesinde form alanları daha işlevsel, kullanıcı dostu ve açık hale gelmiştir Form alanlarına eklenen özellikler arasında düzenli ifadelerle eşleşme kontrolü pattern, alanların zorunlu kılınması required, tarih, zaman ve renk gibi özellikler için optimizasyon date, time, color, range gibi özellikler sayılabilir
HTML5'in getirdiği yeniliklerle birlikte input etiketinde de birçok yeni özellik yer almaktadır Bu özellikler arasında placeholder, required, type ve autocomplete özellikleri yer almaktadır Placeholder özelliği, input alanına tıklanmadığında görüntülenen metni belirlerken, required özelliği input alanının boş bırakılamamasını sağlar Type özelliği ise input alanının tipini belirleyerek kullanıcının daha hızlı ve doğru şekilde doldurmasını sağlar Autocomplete özelliği de kullanıcının daha önce doldurduğu verileri hatırlayarak form dold

Form alanları web sitelerinin vazgeçilmezi olan unsurlardandır. Bu alanlarda kullanılan HTML5 özellikleri sayesinde form alanlarının işlevselliği artmış ve kullanıcı deneyimi iyileştirilmiştir. HTML5 ile beraber birçok yeni özellik gelmiştir ve tüm bu özellikler form alanlarına da uygulanabilir.

Bunun yanı sıra HTML5 form özellikleri ile birlikte kullanıcılardan alınan verilerin kontrolü de daha kolay hale gelmiştir. Gerekli alanların doldurulup doldurulmadığı, ilgili alanların doğru formatta doldurulup doldurulmadığı, minimum ve maksimum değerlerin karşılanıp karşılanmadığı gibi birçok kontrol anlık olarak yapılabilmektedir.

• Form alanında düzenli ifadeler ile eşleşme kontrolü (pattern)
• Form alanı zorunlu kılma (required)
• Tarih, zaman, renk gibi öözellikler için optimizasyon (date, time, color, range)

Tüm bu özellikler bir arada kullanılarak, web sitelerinde form alanlarına birer "Üzümü ye, bağını sor" olmadan tıklanabilir, kullanıcı dostu, açık ve anlaşılır formlar oluşturulabilir. HTML5'in getirdiği yeni özelliklerle beraber, form alanları daha kullanışlı hale gelmiş ve kullanıcılar için daha iyi bir web deneyimi sunulmuştur.

input Etiketinin Yeni Özellikleri

Form alanlarının en temel öğesi olan input etiketi, HTML5 ile birlikte birçok yeni özellik kazandı. Bu özellikler, kullanıcıların form alanlarını daha hızlı ve doğru şekilde doldurabilmesini sağlıyor. İşte, input etiketinin yeni özellikleri hakkında detaylı açıklamalar:

Özellik Adı	Açıklama
Placeholder	Bu özellik, input alanına tıklanmadığında görüntülenen metni belirler. Örneğin, bir kullanıcı adı alanı için "Kullanıcı adınızı giriniz" yazabilirsiniz.
Required	Bu özellik, input alanının boş bırakılamamasını sağlar. Kullanıcı, alanı doldurmadan formu gönderemez.
Type	Bu özellik, input alanının tipini belirler. Örneğin, email veya password türünde bir alan için "type=email" veya "type=password" yazabilirsiniz.
Autocomplete	Bu özellik, kullanıcının daha önce doldurduğu verileri hatırlayarak, form doldurma sürecini hızlandırır. "autocomplete=on" olarak ayarlanması yeterlidir.

Yukarıda bahsedilen özellikler, form doldurma sürecini hızlandırırken, aynı zamanda kullanıcının doldurduğu verilerin doğruluğunu da kontrol etmeye yardımcı olur. Bu nedenle, form alanlarının olmazsa olmaz özelliklerinden biridir.

Form Doğrulama Özellikleri

Formların doğrulanması, kullanıcının hatalı veya eksik veri girişi yapmasını engelleyerek daha verimli çalışmayı sağlar. HTML5 form doğrulama özellikleri, veri doğrulama işlemini otomatikleştirir ve kullanıcılara doğru veri girişi yapmaları konusunda uyarılarda bulunur.

required Attributu: Bu özellik, kullanıcının formda belirtilen alanları doldurmasını zorunlu kılar. Kullanıcı ilgili alana hiçbir veri girişi yapmadan göndermeyi denediğinde uyarı mesajı gösterir. Örneğin, <input type="text" name="firstname" required> şeklinde kullanılır.

pattern Attributu: Bu özellik, form alanına girilecek olan verinin belirli bir kalıba uygun olup olmadığını denetleyerek yalnızca uygun verilerin yazılmasını mümkün kılar. Kullanıcı hatalı bir veri girerse, uyarı mesajı görüntülenir. Örneğin, <input type="text" name="phonenumber" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> şeklinde kullanılır. Bu örnekte, kullanıcının telefon numarasını belirli bir formatta girerek doğruluğunu kontrol ediyoruz.

min Attributu: Bu özellik, form alanına girilebilecek en küçük değeri belirlemek için kullanılır. Örneğin, <input type="number" name="quantity" min="1" max="10"> şeklinde kullanılır.

max Attributu: Bu özellik, form alanına girilebilecek en büyük değeri belirlemek için kullanılır. Örneğin, <input type="number" name="quantity" min="1" max="10"> şeklinde kullanılır.

step Attributu: Bu özellik, form alanına girilecek olan değerlerin artış hızını belirler. Örneğin, <input type="number" name="age" min="18" max="120" step="1"> şeklinde kullanılır.

Bu doğrulama özellikleri, form alanlarının doğru bir şekilde doldurulmasını sağlar ve kullanıcı deneyimini artırır. Kullanıcılar, doğru veri girişi yapmadan önce uyarı mesajlarını görerek hatalı veri girişlerinden kaçınır. Bu da, form işlemlerini hızlandırarak hem kullanıcıların hem de site sahiplerinin zamanını tasarruf etmelerini sağlar.

required Attributu

HTML5, web geliştiricilerine çeşitli seçenekler sunar ve birçok özelliğe ev sahipliği yapar. Bunlardan biri de form alanlarındaki doğrulama işlevselliğidir. Bu işlevselliğin en önemli parçalarından biri, kullanıcıların belirli alanları doldurmasını sağlamak için gereklidir. İşte bunun için HTML5'de yerleşik bir özellik vardır - required özelliği.

required özelliği, bir formun sunucuya gönderilmesi için belirli bir alanın doldurulmasını gerektirir. HTML5 belirli bir özellik, örneğin e-posta, telefon veya adres gibi alanların doldurulmasını zorunlu kılabilir. Form oluştururken, required özelliği eklemek son derece kolaydır. Özellikle, form etiketinin içinde herhangi bir input etiketi kullanırsanız, sadece required özelliğini eklemek için gerekli olan bir yol vardır.

Bu özellik sayesinde, kullanıcıların belirli alanları boş bırakmaları engellenir. Dolayısıyla, formu gönderen kişilerin forma doğru bilgi girmeleri sağlanmış olur. Bu nedenle, gereklilik özelliği bir form oluştururken kesinlikle göz önünde bulundurulması gereken önemli bir özelliktir.

pattern Attributu

HTML5 özellikleri arasında yer alan pattern özelliği, formlarda girilen verilerin doğruluğunu kontrol etmek için kullanılır. Bu özellik sayesinde, kullanıcıların belirli bir formatı takip etmeleri gereken girdileri doğru girip girmediği kontrol edilebilir.

Mesela, bir telefon numarası girişi yaparken kullanıcının veri girişini doğru yapması gerekiyor. Bu yüzden, pattern özelliği kullanarak telefon numaralarının sadece belirli bir formatta girilmesi sağlanabilir. Örneğin, "(555) 555-5555" formatında bir telefon numarası girilmesi gerekiyorsa, bu formata uymayan numaralar kullanıcıya uyarı mesajı olarak gösterilebilir.

Pattern özelliği kullanırken, belirli bir regex paterni tanımlamak önemlidir. Bu regex paterni, girdilerin hangi formatta girilmesi gerektiğini tanımlar. Örneğin, telefon numarasında, karakter sınırları, çizgiler, boşluklar ve rakamlar için regex değişkenleri kullanılabilir.

Regex Değişkeni	Anlamı
\d	Rakamları eşleştirir
\D	Rakam harici karakterleri eşleştirir
\s	Boşluk karakterlerini eşleştirir
\S	Boşluk harici karakterleri eşleştirir
\-	Tire işaretini eşleştirir
\(	Açılıp Kapanan Parantez karakterlerini eşleştirir

Yapılabilecek örnek bir regex numara deseni şu şekildedir:

<input type="text" name="telefon" placeholder="Telefon Numaranız" pattern="\(\d{3}\)\s\d{3}\-\d{4}">

Bu regex deseni, karakter sınırlarının yanı sıra telefon numarası formatını girmesi için açılış-kapanış parantezleri gerektirir. Örnekteki numara - (555) 555-5555 - benzeri girildiğinde doğrulanır.

Date ve Time Özellikleri

HTML5, web formlarının yaratılmasını ve ziyaret edenlerin formu doldurmasını kolaylaştıran yeni özelliklerin tanıtımını yapmıştır. Bu yeni özellikler arasında, date, time ve datetime özellikleri de kullanıcılara işlerini daha kolaylaştıran özellikler sunmaktadır.

date özelliği, tarih seçimi için yaratılmıştır. Bu özellik, seçmek istediğiniz tarihin doğru formatta getirilmesini mümkün kılar. HTML5'in bu özelliği, tarayıcı desteği hakkında sorun yaşamanızı engeller.

time özelliği, zaman seçimi için yaratılmıştır. Bu özellik sayesinde, ziyaretçilerinizin kolayca bir zaman seçimi yapması mümkün hale getirilir. Tarayıcı desteği konusunda endişe etmenize gerek yok, çünkü HTML5'in bu özelliği, çoğu tarayıcıda sorunsuz bir şekilde çalışır.

datetime özelliği, hem tarih hem de saat seçimi için yaratılmıştır. Bu özellik, hem tarih hem de saat için alanları ayarlamak için kullanılabilir. Özelliğin kullanımı oldukça basit ve tarayıcı desteği konusunda da güvenilirdir.

date Özelliği

HTML5, gelişmiş form alanları oluşturmak için birçok özellik sunar. Bu özellikler arasında, web uygulamaları için kullanışlı olan date, time ve datetime özellikleri yer alır. Date özelliği, tarayıcının yerel dil ayarlarına ve kullanıcının tercih ettiği formata göre otomatik olarak tarih seçimini gerçekleştirir.

Örneğin, bir rezervasyon formu için date özelliği kullanabiliriz. Bu sayede kullanıcılar, tarih seçimini kolayca yapabilirler. Date özelliği ayrıca, min ve max özellikleri ile tarayıcının tarih aralığını sınırlamamıza imkan tanır.

Diğer yandan, tarayıcıların date özelliği için tam desteği sağlamadığından, kullanıcılar bu özelliği tam olarak kullanamayabilirler. Bu durumda, JavaScript gibi diğer araçlara başvurabilir ve kullanıcı dostu bir arayüz sağlayabiliriz.

time Özelliği

time özelliği, form alanlarında kullanılmak üzere tasarlanmıştır ve kullanıcının belirli bir tarih ve saat seçmesini sağlar. Bu özellik, datetime özelliğine benzer ancak sadece saat bilgisi için kullanılır.

time özelliği, format özelliği kullanılarak belirli bir saat dilimi için formatlanabilir. Örneğin, <input type="time" id="meeting-time" name="meeting-time" min="09:00" max="18:00"> kodu, "meeting-time" input alanına 09:00 ile 18:00 arasında bir saat seçeneği sunar. Bu özellikle, kullanıcıların belirli bir iş günü içinde sadece belirli saatlerde randevu ayarlamasını sağlayabilirsiniz.

Bu özelliğin, modern tarayıcılarda tamamen desteklendiğinden emin olmak için CanIUse gibi bir kaynak kullanabilirsiniz. Tarayıcı desteğinin olmadığı durumlarda, toplulukta benzer bir işlevsellik sağlamak için bir üçüncü taraf eklentisi veya JavaScript kullanabilirsiniz.

datetime Özelliği

HTML5 ile birlikte gelen datetime özelliği, tarih ve saatin birleşmesi ile oluşan bilgiyi almak için kullanılır. Bu özelliğin doğru kullanımı, kullanıcıların doğru bir şekilde tarih ve saat bilgisi girmelerini sağlar. Özellikle etkinlik veya toplantı davetiyeleri gibi belirli bir zaman dilimi ile ilgili formlarda kullanışlıdır.

Datetime özelliği, input etiketine type="datetime-local" şeklinde eklenir. Örneğin, "2019-12-12T21:30" gibi bir tarih ve saat bilgisi doğru format ile girilebilir. Bu sayede kullanıcıların girdiği bilginin doğru formatta olduğu kontrol edilebilir.

Tarayıcı desteği konusunda, datetime özelliği bazı tarayıcılarda desteklenmeyebilir. Bu nedenle, web sitesi tasarımında bu durum göz önünde bulundurulmalıdır. Ayrıca, bu özellik için Safari tarayıcısının ek özelliklere ihtiyacı olabilir.

Color ve Range Özellikleri

HTML form alanlarındaki özellikler hoş ve işlevsel form sayfalarının oluşturulmasında kullanılabilen birçok faydalı araç sunar. Color özelliği, renk seçimleri için kullanılan bir özelliktir ve range özelliği, bir numaralı kaydırıcı oluşturmak için kullanılır.

Color özelliği, kullanıcıların seçebilecekleri renkleri görüntüler. Kırmızı, yeşil ve mavi (RGB) kodlarının bir kombinasyonu, herhangi bir renk için bir kod sağlar. Color özelliğini kullanarak kullanıcılar arka plan rengi veya form alanındaki diğer bileşenlerin renklerini seçebilirler. HTML kodunda, color özelliği bir renk kodunu "value" olarak kullanır ve kullanıcının renk seçimini saklamak için "name" atribüdünü kullanır.

Range özelliği, sayfa ziyaretçilerine bir numaralı kaydırıcı sunar. Bir aralığı, örneğin 1 ila 100, veya bir çizgi boyunca sayıları tercih etmek için kullanılabilir. Bu özellik, kullanıcılar tarafından kullanılması kolay olduğu kadar görsel olarak hoş bir arayüz sağlar. Kullanıcıyı yoracak sayfalar yerine, HTML sayfalarında bu özellik kullanılarak daha etkileşimli bir arayüz oluşturulabilir. Range özelliği, minimum, maksimum ve adım özelliklerini kullanarak sınırlandırılabilir ve sayfanın geri kalanını orantılı bir şekilde düzenlemesi için CSS ile kombinasyon halinde de kullanılabilir.

HTML form alanları, sadece web sayfaları için basit bir metin kutusu değil, birçok özellikle donatılmış etkileşimli alanlardır. Color ve range özellikleri, yeni ve yaratıcı yollarla sayfa ziyaretçilerimizi şaşırtacak birçok uygulama sunarlar ve kullanımı basit, arayüzü ve görsel cazibesi güçlüdür. HTML5, form alanlarının uygulamalarını zenginleştirerek, sayfa ziyaretçilerinin bobinlerinden daha fazlasını elde etmelerini sağlamaktadır.

color Özelliği

HTML5, form alanlarında kullanılabilecek renk seçme özelliği olan "color" özelliğine de sahiptir. Bu özellik sayesinde, kullanıcılara belirli bir renk seçeneği sunarak daha kolay seçim yapmaları sağlanabilir.

Color özelliği, input etiketi altında type="color" şeklinde kullanılır. Kullanıcı arabirimi sayesinde, kullanıcılar renk seçebilir ve renk kodu otomatik olarak oluşturulur. Color özelliği ile ilgili olarak, birkaç örnek kullanım aşağıdaki gibidir:

• backgroundColor:
• borderColor:
• color:

Color özelliği, tüm tarayıcılar tarafından desteklenir.

range Özelliği

HTML5'de yer alan range özelliği, bir değer aralığının seçilmesi için kullanılır. Bu özellik, kullanıcının sayfa içinde yer alan bir çubuk üzerinde kaydırma yaparak aralık içinde bir değer seçmesine imkan sağlar. Bu özelliğin bir diğer avantajı ise, kullanıcının sayısal bir değer girmesi gerektiği durumlarda hata yapmamasına yardımcı olmasıdır.

Özellikle fiyat aralıklarının seçildiği formlarda tercih edilen range özelliği, internet tarayıcılarında desteklenen bir özelliktir. Ancak bu özelliği kullanırken bazı tarayıcılarda görsel olarak uyumsuzluklar olabilir. Bu nedenle, özelliği kullanırken tarayıcı uyumluluğunu kontrol etmek önemlidir.

Aşağıdaki örnek kod bloğunda, range özelliğinin kullanımına dair bir örnek yer almaktadır:

```Miktar:```

Yukarıdaki kod bloğunda, "Miktar" için bir label oluşturulmuştur. Ardından, input etiketi kullanılarak range özelliği aktifleştirilmiştir. Bu örnekte, minimum değer 1, maksimum değer 100 ve adım değeri de 1 olarak belirlenmiştir. Böylece kullanıcı, sayfa üzerinde kaydırma yaparak 1 ile 100 arasındaki bir değeri seçebilir.

Sonuç olarak, range özelliği sayesinde belirli bir aralık içinde sayısal bir değerin seçilmesi kolaylaşmaktadır. Özelliğin kullanımı oldukça basit olsa da, tarayıcı uyumluluğu konusunda dikkatli olunması gerekmektedir.