HTML5 form elemanları, web sayfalarında kullanıcılara veri girişi konusunda kolaylık sağlayan önemli araçlardır Bu elemanlar, metin girişi, seçenek belirleme, buton oluşturma gibi çeşitli işlemleri gerçekleştirmek için kullanılır Text input öğesi, kullanıcılara tek satırlık metin girişi sağlarken, checkbox ve radio button öğeleri birden fazla seçenek arasından seçim yapma imkanı sunar Placeholder özelliği, kullanıcılara veri girişi yaparken ne tür bir veri girmeleri gerektiği hakkında bir ipucu verirken, maxlength özelliği belirli bir maksimum karakter sayısı belirleyerek istenmeyen veri girişi yapılmasını engeller HTML5 form elemanları, web sitelerinde doğru ve hızlı bir veri girişi sağlayarak, kullanıcı deneyimini iyileştirir

HTML5 form elemanları, web sayfalarında kullanıcıların bilgi girişini kolaylaştıran araçlardır. Bu elemanlar, metin girişi, seçenek belirleme, buton oluşturma gibi çeşitli işlemleri gerçekleştirmek için kullanılır. Bu makalede, HTML5 form elemanlarının çeşitleri ve özellikleri hakkında genel bir bilgilendirme yapacağız.

Web geliştiricileri, HTML5 form elemanlarını kullanarak web sayfaları tasarlayabilir ve kullanıcılara daha iyi bir deneyim sunabilir. Bu form elemanları, farklı türleri ve birçok özelliği ile sundukları çözümlerle çoğu web sitesinde kullanılmaktadır. Bu elemanların kullanımı sayesinde bilgi giriş işlemi daha hızlı ve hatasız bir şekilde gerçekleştirilir. HTML5 form elemanları ile ayrıca birçok farklı işlem yapılabilmektedir.

Bir sonraki başlıkta, HTML5 form elemanlarından biri olan Input elementlerinin farklı türleri ve kullanım örneklerini açıklayacağız.

1. Input Elementleri

HTML5 form elemanlarından en temel olan input elementleri, farklı türleri ile birlikte birçok kullanım örneğine sahiptir. Bunlar arasında en sık kullanılanları ise text input, checkbox ve radio button öğeleridir.

Text input öğesi, kullanıcıların tek satırlık metinleri girmelerini sağlar. Örneğin, bir arama çubuğu ya da kullanıcı adı ve şifre girme alanları için sıklıkla kullanılır. Bu öğenin iki önemli özelliği placeholders ve maxlength özellikleridir. Placeholder özelliği, kullanıcılara ne tür bir veri girecekleri hakkında bir ipucu verir. Maxlength özelliği ise, kullanıcının girebileceği maksimum karakter sayısını belirler.

Checkbox öğesi, kullanıcılara belirli bir liste içerisindeki birden fazla seçenek arasından birden fazlasını seçme imkanı verir. Örneğin, bir liste içerisindeki sevdiği renklerden birden fazlasını seçebilir. Bu öğenin checked ve disabled özellikleri, seçeneklerin önceden belirlenmesi ve kullanıcı tarafından seçilmeme durumunda engellenmesi için kullanılır.

• Checked özelliği, öğeyi önceden belirlenmiş seçenek olarak işaretlemek için kullanılır.
• Disabled özelliği, öğenin kullanılamaz hale getirilmesini sağlar.

Radio button öğesi, kullanıcının belirli bir liste içerisindeki sadece bir seçeneği işaretlemesine olanak sağlar. Örneğin, bir sınavda sadece bir cevap seçeneği işaretleyebilir. Bu öğenin de checked ve disabled özellikleri, seçeneklerin önceden belirlenmesi ve kullanıcı tarafından seçilmeme durumunda engellenmesi için kullanılır.

• Checked özelliği, öğeyi önceden belirlenmiş seçenek olarak işaretlemek için kullanılır.
• Disabled özelliği, öğenin kullanılamaz hale getirilmesini sağlar.

1.1. Text Input

HTML5 form elemanları, web sitelerinde kullanıcıların veri girişi yapabilmesi için oldukça önemlidir. Bunlar arasında en sık kullanılanlardan biri de tek satırlık metin girişi için kullanılan text input öğesidir. Bu öğenin kullanımı oldukça basittir ve kullanıcılar tarafından rahat bir şekilde kullanılabilir.

Text input öğesinin bazı özellikleri bulunmaktadır. Bunlardan ilki placeholder özelliğidir. Placeholder, metin kutusunun içinde yer alan örnek yazıdır. Kullanıcıların ne yazması gerektiği hakkında fikir verir ve daha etkili bir veri girişi sağlar. Ayrıca, maxlength özelliği de kullanılabilir. Maxlength, metin kutusuna girilecek karakter sayısını sınırlandırmak için kullanılır. Bu sayede istenmeyen veri girişleri önlenebilir.

Text input öğesi, kullanıcıların sayı, isim veya e-posta gibi birçok farklı veri girişi yapmasına olanak tanır. Bu sayede web sitelerinde daha doğru ve hızlı bir veri girişi sağlanır.

1.1.1. Placeholder Özelliği

HTML5 form elemanlarından birisi olan input öğesi, farklı tiplerde kullanılabilmektedir. Tek satırlık metin girişini sağlayan text input öğesi de bu öğeler arasında yer almaktadır. Placeholder özelliği, input alanına girilmesi gereken verinin ne olduğunu açıklayan bir ipucu olarak kullanılabilmektedir. Bu özellik sayesinde kullanıcılar, hangi türde bir veri girmeleri gerektiğini daha net anlayarak, doğru bir şekilde veri girişi yapabilmektedirler.

Ek olarak, placeholder özelliği, ekranda daha düzenli ve anlaşılır bir görünüm sağlayarak, web sayfasının kullanımını kolaylaştırmaktadır. Placeholder özelliği, input öğesinde belirtilen veri girişi alanının boyutunu da düşünerek, uygun bir uzunlukta metin girilmesini sağlamaktadır. Bu sayede, gereksiz karakterlerin veya uzun metinlerin girilmesi gibi hataların önüne geçilebilmektedir.

Placeholder özelliği, kullanıcıların veri girişi konusunda daha rahat ve emin hareket etmelerine olanak sağladığı için, web tasarımcıları tarafından da sıklıkla tercih edilmektedir. Bu sayede, web sayfasının kullanılabilirliği arttırılarak, kullanıcı deneyimi iyileştirilmektedir. Placeholder özelliği, HTML5 form elemanları arasında önemli bir yere sahip olup, web sayfalarının etkili bir şekilde tasarlanmasına yardımcı olmaktadır.

1.1.2. Maxlength Özelliği

HTML5 form elemanları arasında yer alan input öğesi kullanıcıların belirli alanlara girdiği verileri almak için tasarlanmıştır. Tek satırlık metin girişi için kullanılan text input öğesi ise maxlength özelliği sayesinde belirlenen maksimum karakter sayısını aşan veri girişlerini önlemektedir. Maxlength özelliği, form elemanları arasında en yaygın kullanılan özelliklerden biridir.

Maxlength özelliği özellikle iletişim formlarında ya da kullanıcıların şifre oluşturma alanlarındaki karakter sınırı belirleme gibi durumlarda oldukça faydalıdır. Böylece kullanıcılar belirtilen karakter sınırı ile ilgili uyarı almaları sayesinde girdilerini istenilen şekilde yapabilmekte ve formu başarılı bir şekilde gönderebilmektedirler.

<input type="text" name="username" maxlength="15">        

Yukarıdaki örnek kodda da görülebileceği gibi, maxlenght özelliği için belirlenen sayıya göre karakter sınırlaması sağlanmaktadır. Eğer kullanıcı 15 karakteri geçen bir girdi yapmaya çalışırsa, girdi kabul edilmez ve hata mesajı verilir.

Maxlength özelliği sayesinde form elemanları arasında veri girişi alanlarında belirli sınırlamalar getirilebilir ve bu sayede girdilerin geçerliliği garanti altına alınabilir. Ayrıca, form alanlarının okunabilirliğinde de önemli bir etki bırakan maxlength özelliği, HTML5 form elemanları arasında kaçınılmaz bir özelliktir.

1.2. Checkbox

HTML5 form elemanları arasında en sık kullanılanlardan biri olan checkbox, seçeneklerin belirtilmesi için tercih edilen bir öğedir. Checkbox öğesi, kullanıcının birden fazla seçeneği işaretleyebileceği bir yapıya sahiptir.

Checkbox öğeleri, input etiketi kullanılarak oluşturulur ve type özelliği "checkbox" olarak belirtilir. Bu özellik sayesinde checkbox olarak tanımlanan öğeler, benzersiz bir isimle birbirinden ayrılır ve seçenekler arasında geçiş yapmak mümkün hale gelir.

Checkbox öğeleriyle birlikte, multiple checkbox kullanımı da mümkündür. Birden fazla checkbox öğesi kullanarak seçenekleri gruplama imkanı sağlanır.

• Örneğin, bir kullanıcının birden fazla dil bilmekte olması durumunda; checkbox öğeleri kullanılarak her bir dil için bir seçenek tanımlanabilir. Bu sayede kullanıcı, istediği kadar seçim yaparak ilgili dilleri işaretleyebilir.

Checkbox öğeleri, web sayfalarında çok sayıda kullanım alanına sahip olan önemli bir form elemanıdır. Bu nedenle, checkboxların doğru bir şekilde kullanılması ve özelliklerinin bilinmesi, HTML5 form elemanlarının etkin bir şekilde kullanılması bakımından önemlidir.

1.2.1. Checked ve Disabled Özellikleri

Checkbox öğesi kullanılırken bazı durumlarda önceden seçili olması veya seçilemeyecek durumda olması gerekebilir. Bu durumlarda checked ve disabled özellikleri kullanılabilir.

Checked özelliği, checkbox öğesinin önceden seçili olmasını sağlar. Örneğin, kullanıcının bir abonelik sözleşmesini onaylaması gerekiyorsa, checkbox öğesi ile bunu gerçekleştirebilir ve checked özelliği sayesinde önceden seçilmiş olarak sunabilirsiniz.

Disabled özelliği, checkbox öğesinin seçilmemesini sağlar ve kullanıcının bu öğeyi kullanmasını engeller. Örneğin, bir ödeme işleminde seçilen ödeme yönteminin değiştirilmemesi gerektiğinde disabled özelliği kullanılabilir. Bu sayede kullanıcı, sadece belirtilen ödeme yöntemini kullanabilir.

Bu özellikler sayesinde, checkbox öğesi farklı senaryolarda kullanılabilir ve kullanıcılara daha iyi bir deneyim sunulabilir.

1.2.2. Multiple Checkbox Kullanımı

Bir formda birden fazla seçenek belirtmek istiyorsanız multi-select özelliği dışında multiple checkbox öğeleri kullanabilirsiniz. Bu öğeleri gruplamak da oldukça kolaydır. Örneğin, bir yemek siparişi formunda "malzeme seçimi" kategorisinde birden fazla seçenek belirtmek isteyebilirsiniz.

Aşağıdaki tabloda, "malzeme seçimi" kategorisindeki seçenekleri birden fazla checkbox kullanarak gruplandırarak nasıl gösterildiğini görebilirsiniz:

Yukarıdaki örnekte, "malzeme seçimi" kategorisindeki seçenekler checkbox öğeleriyle gruplandırıldı. Kullanıcılar, seçtikleri malzemelerin yanındaki kutucukları işaretleyerek seçtikleri malzemeleri belirtirler. Bu şekilde, kullanıcılar, birden fazla seçeneği kolayca işaretleyebilirler.

1.3. Radio Button

HTML form elemanlarından biri olan radio button, sadece tek bir seçeneğin belirtilmesi için kullanılan bir öğedir. Bir grup seçenek arasında yalnızca bir seçimin yapılmasını sağlar. Bu nedenle, tek seçenekli seçenekler için ideal bir seçimdir.

Radio button öğeleri, aynı isimdeki farklı value değerleri ile tanımlanır. Bununla birlikte, birden fazla group oluşturarak seçenekleri gruplandırmak da mümkündür. Grouping ile aynı isimdeki farklı id değerleri kullanılarak bir group oluşturulabilir.

Radio button'ların kullanımında checked ve disabled özellikleri oldukça önemlidir. Checked özelliği, radio button'ın varsayılan olarak seçili olması için kullanılırken, disabled özelliği, öğenin devre dışı bırakılmasını sağlar.

Radio button'lar, seçeneklerin gruplandırılması ile daha verimli bir kullanım sağlayabilir. Örneğin, bir anket formunda "Cinsiyet" sorusu için "Erkek" ve "Kadın" seçenekleri bir group içinde tanımlanabilir.

1.3.1. Grouping Radio Button

Radio butonları kullanırken birden fazla seçenek arasından sadece bir tanesinin seçilmesi amaçlanır. Ancak bir formda birden fazla radio button kullanılıyorsa, bu butonları belirli gruplar halinde kullanmak daha mantıklıdır. Radio butonları gruplandırmak, kodun daha okunaklı olmasını sağlayacaktır. Ayrıca, kullanıcının hangi seçeneği seçmesi gerektiği daha net bir şekilde anlaşılacaktır.

Bir radio button grubu, name özelliği ile belirlenir. Tüm radio butonları aynı grup ismine sahip olacak şekilde adlandırılır. Aşağıdaki kodda, "ulusalite" isimli bir radio button grubu kullanılmıştır:

Radyo butonlarının yanındaki label etiketleri, kullanıcıların seçenekleri daha rahat anlamasını sağlar. Örneğin, yukarıdaki kodda "Türkiye" radyo butonunun yanında label etiketi "Türkiye" şeklindedir. Böylece, kullanıcıların hangi ülkeyi seçmeleri gerektiği daha net bir şekilde anlaşılabilir.

1.3.2. Checked ve Disabled Özellikleri

Radio button öğesinin bir diğer özelliği de checked ve disabled özellikleridir. Checked özelliği ile varsayılan olarak bir seçeneğin seçili olması sağlanabilir. Özellikle tek bir seçenek belirtilmişse kullanıcıya bu seçeneği işaretlemesi gerekmiyor ve işlem daha hızlı bir şekilde gerçekleştirilebilir.

Disabled özelliği ise seçeneklerin kullanıma kapalı olmasını sağlar. Bu özellik sayesinde kullanıcıların seçim yapamayacakları seçenekler belirlenebilir. Örneğin, yaş sınırı olan bir etkinliği planlarken, belirli bir yaşın altındaki kişilerin seçenekleri kullanmasını engellemek için disabled özelliği kullanılabilir. Ayrıca, kullanıcıların geçmiş seçeneklerine erişmek için de bu özellik kullanılabilir.

2. Select Elementi

HTML5 form elemanları arasında en yaygın kullanılanlardan biri de select elemanıdır. Select, kullanıcının seçebileceği seçenekleri bir listede belirtmek için kullanılır. Örneğin, bir web formunda, kullanıcının yaşını seçebileceği bir alan gerekiyorsa, select öğesi kullanılabilir. Bu sayede, kullanıcının yaşını gösteren bir liste oluşturulabilir.

Select elemanı, option öğeleri içeren bir listeden oluşur. Bu öğelerin her biri, kullanıcının seçebileceği bir seçenektir. Bunun yanı sıra, select öğesi, multiple attribute değerine sahip olduğunda, birden fazla seçenek seçilmesine de olanak sağlar.

Select öğesi, name ve id attribute değerlerine sahip olmalıdır. Name attribute değeri, form verileri server'a gönderilirken kullanılırken, id attribute değeri, diğer HTML öğelerine referans vermek için kullanılır.

• Örnek:

• <select name="sehirler" id="sehirler">    <option value="ankara">Ankara</option>    <option value="istanbul">İstanbul</option>    <option value="izmir">İzmir</option></select>        

Bu örnekte, select öğesi üç option öğesi içerir. Her bir option öğesi, kullanıcının seçebileceği bir şehir adını ve bir value attribute değerini içerir. Value attribute değeri, form verilerinin server'a gönderilirken kullanılan değerdir.

2.1. Option Elementi

Kullanıcıların seçebileceği seçeneklerin belirtilmesinde kullanılan option öğesi, select öğesi içinde kullanılır. Option öğesi, value ve text attribute'larına sahiptir. Value attribute'u, seçeneklerin değeri belirlerken, text attribute'u ise kullanıcılara gösterilen metni belirler.

Option öğeleri, select öğesinden farklı olarak, single-line bir yapıya sahiptir. Örneğin, bir sayfada kullanıcıların yaş aralığı belirlemesi gereken bir formda, options olarak "18-25", "25-40", "40+" seçenekleri belirtilebilir.

Ayrıca, option öğeleri içinde birden fazla attribute kullanılabilir. Disabled attribute'u, seçeneklerin kullanılamaz hale getirilmesinde kullanılırken, selected attribute'u, başlangıçta seçilmiş bir seçeneği belirlemek için kullanılabilir.

Option öğeleri ile belirtilen seçeneklerin düzenli bir şekilde görünmesi için,

veya
listeleri de kullanılabilir. Örneğin, bir restoranın menüsü belirtilirken, option öğeleri içinde yemeklerin isimleri ve fiyatları verilirken,
veya
listeleri kullanılarak, listelenen yemeklerin düzenli görünmesi sağlanabilir.



2.2. Multiple Select Kullanımı

HTML5 form elemanları arasında en kullanışlı olanlardan biri de "multiple select" öğesidir. Bu öğe, kullanıcının birden fazla seçenek seçmesine olanak sağlar. Özellikle, bir liste içerisindeki birden fazla seçeneği seçmek isteyen kullanıcılar için oldukça pratiktir.

Multiple select öğesinin kullanımı oldukça basittir. Kullanıcılar, listedeki seçeneklerin yanındaki kutucukları işaretleyerek birden fazla seçenek belirleyebilirler. Seçeneklerin sayısı ya da seçim metoduna göre liste boyutları da değiştirilebilir.

Multiple select öğesinde, seçilen seçeneklere erişmek oldukça kolaydır ve bu özellik sayesinde veriler kolaylıkla gruplanabilirler. Kullanıcılar seçenekleri seçerken, liste boyutuna dikkat etmelidirler. Eğer liste çok uzunsa, bunaltıcı bir hale gelebilir ve kullanıcıların seçenekleri bulması zorlaşabilir. Bu nedenle, listenin en iyi şekilde tasarlanması önemlidir.

Birden fazla seçenek seçmesine olanak sağlayan multiple select öğesi, HTML5 form elemanları arasında oldukça faydalı ve pratik bir özelliktir. Kullanıcılar aradıkları seçenekleri kolaylıkla bulabilirken, veriler de gruplanarak daha düzenli hale getirilebilir. Ancak, liste boyutu önemlidir ve kullanıcının sıkılmadan seçenekleri gözden geçirmesi için en iyi tasarımın kullanılması gerekmektedir.




3. Button Elementi

HTML5 form elemanları içinde en önemli öğelerden birisi de buton öğesidir. Sayfalarınızda farklı amaçlarla kullanabileceğiniz farklı tip ve özelliklere sahip butonlar oluşturabilirsiniz. Buton öğesi <button> etiketiyle oluşturulur ve sayfanın görünümüne ve işlevselliğine farklı katkılar sağlayabilir.

3.1. Button Types

Buton öğesi, kullanım amacına göre farklı tiplere ayrılabilir. <button> etiketi içerisinde yer alan type özelliği ile belirlenen tipler şunlardır:

• submit: Bu tip buton, kullanıcının formu göndermesine olanak sağlar. Form bilgileri sunucuya gönderilir ve sayfa yenilenebilir. Özellikle form işlemi gerçekleştiren sayfalarda kullanılır.
• reset: Bu tip buton, form üzerindeki girilen bilgileri sıfırlar. Sonradan değiştirilmiş seçimler veya yazılar kullanığımızda bu buton ile tüm değerleri sıfırlayabiliriz.
• button: Bu tip buton, herhangi bir form işlemi gerçekleştirmez. Sadece belirli bir işlemi gerçekleştirmek için tıklanabilir. Genellikle JavaScript fonksiyonları ile kullanılır.

Buton öğelerini stilize etmek için CSS kodları kullanabilirsiniz. Butonların rengi, boyutu, kenar boşluğu gibi özellikleri CSS ile belirlenebilir. Buton öğelerinde bulunan text, öznitelikleri kullanılarak belirlenebilir. Ayrıca buton öğesinin içeriği farklı öğeler içerebilir. Örneğin buton içerisinde resim bulunabilir. Bu sayede butonlar sadece metin içermeyen, görsel açıdan da zengin butonlar olarak oluşturuluyorlar.




3.1. Button Types

Button öğesi, bir formun kullanıcının bilgilerini göndermek için uygun olmasını sağlayan ve tasarımı kolaylaştıran önemli bir HTML5 öğesidir. Button elemanı, kullanım amaçlarına göre farklı tiplerde sunulur:

Tür	Açıklama
Submit	Form verilerinin sunucuya gönderilmesi için kullanılır.
Reset	Formdaki tüm alanların varsayılan değerlerine geri döndürülmesi için kullanılır.
Button	Kullanıcının tıklamasıyla formda belirlenen işlevleri gerçekleştirmek için kullanılır. Bu tür, JavaScript düzenlemelerinde kullanılabilir.

Submit düğmesi, formun genellikle sunucuya gönderilmesi için kullanılır. Reset düğmesi, kullanıcının tüm form alanlarının sayfa yenilendikten sonra sıfırlanmasını sağlar. Button düğmesi ise kullanıcı tarafından tıklanabilir ve programcı tarafından özel davranışlar atanabilir. Ayrıca, şekilleri ve yazı pointleri değiştirilebilir.

Submit butonlarının kullanılması durumunda, action özelliği belirtilen form, "method" ile belirtilen HTTP yöntemi (genellikle "get" veya "post") ile işlenir. Reset butonunun davranışı ön tanımlıdır ve yeniden başlatmaya eşittir. Button butonları için herhangi bir varsayılan işlev yoktur. Programcı tarafından atanacak özel bir davranışa sahiptir.




4. Form Özellikleri

Form, web sitesi tasarımında kullanılan en önemli öğelerden biridir. Form, ziyaretçi ve site sahibi arasında etkileşim sağlayarak, ziyaretçilerin sitenin sunduğu hizmetlerden yararlanmasına olanak tanır. Bu nedenle, form özellikleri de oldukça önemlidir.

Form öğesinin sahip olduğu bazı özellikler vardır. Action ve method özellikleri bunlardan bazılarıdır. Action özelliği, form verilerinin işleneceği URL adresini belirtir. Method özelliği ise form verilerinin gönderim şeklini belirler. GET methodu, form verilerini URL parametreleri olarak gönderirken, POST methodu verileri gövde kısmında gönderir.

Autocomplete özelliği ise form elemanlarının otomatik tamamlanmasını sağlar. Bu özellik, özellikle form elemanlarındaki bilgileri tekrar tekrar girmekten sıkılan ziyaretçiler için oldukça faydalıdır. Autocomplete özelliği ile form elemanlarına girilen veriler, tarayıcı tarafından hafızada tutulur ve tekrar aynı form elemanına gelindiğinde, sistem otomatik olarak verileri doldurur.

Form öğesinin diğer özellikleri arasında, required ve novalidate özellikleri yer alır. Required özelliği, form elemanının mutlaka doldurulması gerektiğini belirtirken, novalidate özelliği, formun geçerlilik denetimlerinin yapılmamasını sağlar.

Form öğesi, ayrıca, label özelliği ile de desteklenir. Label özelliği, form elemanının ismini belirleyerek, ziyaretçinin hangi bilgiyi girmesi gerektiği konusunda daha net bir fikir verir. Ayrıca, for özelliği ile label öğesi ile eşleştirilebilir, böylece ziyaretçi form elemanını tıklandığında, otomatik olarak label öğesindeki isim seçilir.

Genel olarak, form öğesinin sahip olduğu özellikler ve kullanımları oldukça önemlidir. Bu özelliklerin doğru ve etkili kullanımı, ziyaretçilerin sitenizde daha iyi bir deneyim yaşamalarına olanak tanır.




4.1. Action ve Method Özellikleri

HTML5 ile birlikte form elemanlarına eklenen 'action' ve 'method' özellikleri formun işlevselliğini artırmak için tasarlanmıştır.

'Action' özelliği, forma girilen verilerin nereye gönderileceğini belirler. Örneğin, form verileri bir sunucuya gönderilecekse formun action özelliği sunucunun URL'sine ayarlanır.

'Method' özelliği ise form verilerinin gönderim yöntemini belirler. İki yaygın kullanılan yöntem 'GET' ve 'POST'tur. GET yöntemi, form verilerinin URL'de görünür şekilde gönderilmesini sağlar. POST yöntemi ise form verilerinin URL'de görünmediği ve gizliliği sağladığı için daha güvenli bir iletişim sağlar.

Bir diğer önemli nokta ise formun kapsayacağı veri tipleridir. Form verileri metin, sayı, tarih vb. olabilir. Bu verilerin uygun olmayan formatta girilmesini önlemek için HTML5 ile birlikte 'pattern' özelliği de eklenmiştir. Pattern özelliği, form elemanlarının kabul edilebilir karakter kümesini belirlemekte kullanılır. Kullanıcı yanlış formatta veri girerse, formun gönderilmesi engellenecektir.

HTML5 form elemanları ve özellikleri sayesinde kullanıcı dostu, güvenli ve etkili formlar oluşturmak mümkündür. Form özelliklerini dikkatli bir şekilde kullanarak, formu sunucuya göndermeden önce kullanıcı verilerinin doğru biçimde gönderilmesini sağlayabilirsiniz.




4.2. Autocomplete Özelliği

Autocomplete özelliği HTML5 form elemanları içerisinde yer alan ve kullanıcıların daha kolay ve hızlı bir şekilde giriş yapmalarını sağlayan bir özelliktir. Bu özellik sayesinde ziyaretçiler web sitesinde yer alan formlarda daha önce girilen verilerin kaydedilmesiyle birlikte mevcut verileri de görebilir.

Bu sayede kullanıcılar formlara girilen verileri tekrar tekrar yazmak yerine autocomplete özelliği ile verileri seçerek hızlı bir şekilde giriş yapmalarını sağlarlar. Bu sayede kullanıcı dostu bir deneyim sunar. Autocomplete özelliği genellikle e-posta adresi, ad, soyad, telefon numarası, adres gibi sık kullanılan bilgilerin girişi yaparken kullanılır.

Autocomplete özelliğini kullanmak isteyen bir web sitesi sahibi, form elemanlarında “autocomplete” özelliğini aktif hale getirmeli ve kullanıcıların hangi verileri hatırlamalarını istediğini belirtmelidir. Örneğin, bir e-posta girişi yaparken kullanıcıların daha önce girdiği e-posta adreslerinin hatırlanması istenebilir.

Aynı zamanda, autocomplete özelliği sayesinde ziyaretçilerin web sitenizin hafızasında tutulan bilgilerinin güvenliği de sağlanır. Bu sayede ziyaretçilerin daha önce girdikleri bilgiler kolaylıkla tekrar kullanılır ve bununla birlikte veri kaybı da önlenir. Ancak, bazı kullanıcılar bu özelliği kullanmak istemedikleri için kullanıcı dostu bir deneyim sunmak adına autocomplete özelliği seçenekleri gibi seçeneklere de yer vermek önemlidir.