Bu makalede HTML5'in yeni etiketleri ve form özellikleri hakkında bilgi verildi Form oluşturma işlemi oldukça basit ve form elemanları eklemek için input, select veya textarea gibi elementleri kullanabilirsiniz HTML5 ile birlikte, yeni input tipleri, attributler ve placeholder özelliği gibi özellikler de eklenmiştir Bunun yanı sıra, HTML5 ile datalist ve output elementleri kullanarak öneriler sunma ve sonuçları gösterme işlemleri de mümkün hale gelmiştir Ayrıca, HTML5 ile birlikte gelen date input tipi kullanarak tarih seçimi yapabilirsiniz HTML5'in sunduğu bu yeni özellikler sayesinde, form oluşturma ve kontrol etme işlemleri daha da kolaylaşmıştır

HTML5, formlar oluşturmak için birçok yeni özellik sunmaktadır. Bu makalede, HTML5'in yeni etiketleri ve formlar için kullanabileceğiniz özellikler hakkında bilgi edineceksiniz. Yeni input tipleri, attributler ve daha pek çok özellik sayesinde formlarınızı daha fazla kontrol edebileceksiniz.

Form oluşturma işlemi HTML5 ile oldukça kolaydır ve yeni özellikler ile daha da kolaylaşmıştır. Ayrıca, form tasarımınızı da kolayca geliştirebileceğiniz yöntemler mevcuttur. Form elemanlarınızı girdilerin doğruluğunu kontrol etmekten, verileri göstermeye kadar birçok özellikten yararlanabilirsiniz.

Form Oluşturma

HTML5 ile formlar oluşturmak oldukça kolaydır ve birkaç basit etiket kullanarak formu oluşturabilirsiniz. İlk olarak, form elementini oluşturmanız ve form elemanı başladığı zaman formun hangi sayfaya gönderileceğini belirtmeniz gerekir. Bu

HTML5'in yeni özellikleri arasında, kullanabileceğiniz özelleştirilmiş input tipleri de yer alıyor. Bunlardan biri de "range" input tipi. Bu input tipi, web sayfanızda müşterilerinizin belirli aralıklarla değer girmesine olanak sağlar.

Range inputu, bir çizgi üzerinde hareket ettirilebilen bir kaydırıcıya benzer. Bu kaydırıcı, minimum ve maksimum bir değer arasında (örneğin 0 ve 100 arasında) hareket ettirilebilir. Bu input tipi, özellikle bir fiyat aralığı veya kullanıcınızın tercih ettiği bir değeri belirtmesi gereken diğer alanlar için uygun olabilir.

Örneğin, bir müşteriniz bir ürün arayışında olabilir ve aradığı özellikleri belirlemek için bir aralık seçmek isteyebilir. Bu durumda, range inputu kullanarak müşterinizin tercih ettiği fiyat aralığını belirlemesine izin verebilirsiniz.

HTML5'in yeni özellikleri ile birlikte form oluşturma işlemi daha da gelişti. Bu yeni özelliklerle birlikte, form elemanlarını kontrol etmek, doğrulamak ve tasarlamak daha kolay hale geldi.

Bu yeni özellikler arasında, color, date, email, range ve url gibi yeni input tipleri bulunuyor. Ayrıca, placeholder, required gibi yeni attributler de kullanılabiliyor. Bu özellikler sayesinde, formdaki verilerin doğru şekilde girilmesi sağlanarak, veri doğruluğu sağlanabilir.

HTML5 ile gelen pattern ve min/max attributleri ile input değerlerinin kontrol edilmesi de mümkün hale geldi. Ayrıca, Datalist ile öneriler sunma ve Output ile sonuçları gösterme özellikleri de ciddi kolaylıklar sağlıyor.

Seçme kutusu, metin alanı ve radyo düğmeleri için de yeni özellikler bulunuyor. Bu özellikleri kullanarak, form elemanları daha fonksiyonel hale getirilebilir.

URL, bir web sayfasının adresini tanımlar. HTML5 ile birlikte, URL'leri girerken daha kolay ve doğru bir biçimde girebileceğimiz url input tipi çok daha yaygın hale geldi.

Bu input tipi, sadece doğru biçimde girilmiş URL'leri kabul eder, böylece sayfanızın ziyaretçileri yanlış bir URL girmekten kaçınabilirler. Ayrıca, placeholder özelliği sayesinde, ziyaretçilerinizin hangi tür URL'leri girmeleri gerektiği hakkında daha fazla bilgi verebilirsiniz.

Örneğin, bir resim galerisi sayfasında, ziyaretçilerinizin her bir resim için ayrı bir URL girerek zorlanmalarını istemezsiniz. Bunun yerine, datalist özelliği kullanarak, ziyaretçilerinizin seçebilecekleri bir dizi URL sağlayabilirsiniz.

Bu özellikler sayesinde, web sitenizin formlarını daha işlevsel ve daha kullanıcı dostu hale getirebilirsiniz. HTML5'in gelişmiş özelliklerini kullanarak, web sitenizi diğerlerinden ayrıştırabilir ve ziyaretçilerinizin hayatını kolaylaştırabilirsiniz.

Yeni Input ve Attributler

HTML5 ile birlikte gelen yeni özellikler arasında birçok yeni input tipi ve attribut yer almaktadır. Bu özellikler sayesinde daha doğru ve kullanıcı dostu formlar oluşturabilirsiniz. Özellikle kullanıcıların formda girdikleri değerleri kontrol etmek, formatlamak ve belirli değer aralıklarına sınırlandırmak için yeni attributler oldukça kullanışlıdır.

Yeni input tiplerinden bazıları şunlardır:

Bunların yanı sıra, yeni attributler de oldukça kullanışlıdır.. Örneğin, placeholder attributu sayesinde kullanıcılara form elemanı hakkında ipucu verilebilir. Required attributu sayesinde ise kullanıcılardan belli bir elemanın doldurulması zorunlu hale getirilebilir.

placeholder

HTML5 ile gelen yeni bir özellik olan placeholder, form elemanlarında kullanılan metinleri temsil eden özgün bir özelliktir. Bu özellik sayesinde, form elemanlarına girilebilecek metinleri göstererek kullanıcılara yardımcı olur. Örneğin, bir arama kutusu formunda 'ara...' gibi bir placeholder, kullanıcılara arama yapabilecekleri bir alan olduğunu ve bu alana ne yazabilecekleri konusunda bir örnek verir.

Placeholder, çok basit bir şekilde kullanılabilir. İlgili input elementine placeholder="metin" şeklinde eklenmesi yeterlidir. Bu özellik, boş bir input alanının kullanıcılara ne tip bir veri girmeleri gerektiğini hatırlatmak için oldukça kullanışlıdır. Placeholder, email ve password gibi input tiplerinde de kullanılabilir. Email input tipinde, placeholder özelliği bir örnek email adresi gösterebilir. Password input tipinde ise, placeholder özelliği şifre yaratmayla ilgili bir öneri sunabilir.

Placeholder özelliği, CSS ile de geliştirilebilir. Placeholder metninin boyutunu, rengini ve fontunu değiştirebilirsiniz. Ayrıca, placeholder'ın aktif veya pasif durumuna göre farklı bir stile sahip olmasını sağlayabilirsiniz.

Aşağıdaki tabloda placeholder özelliğinin bazı örnekleri verilmiştir:

Bu özelliği kullanarak, form elemanlarınızı daha kullanıcı dostu hale getirebilir ve kullanıcıların deneyimini geliştirebilirsiniz. Hatırlanması gereken en önemli şey, placeholder metni ile kullanıcıyı yönlendirirken, form elemanından beklenen belirli bir formatta veri girmesi için ayrıca gerekli yönlendirmeleri de yapmanız gerekmektedir.

Select, Textarea ve Radio Buttons

HTML5 ile birlikte form elemanlarına yeni özellikler eklenmiştir. Bu özellikler arasında seçme kutusu, metin alanı ve radyo düğmeleri de vardır. Select etiketi, kullanıcının seçim yapabileceği ve birden fazla seçenek arasından sadece birini seçebileceği bir liste oluşturur. Bu özellik, kullanıcının seçenekler arasından kolayca seçim yapabilmesine olanak tanır.

Textarea etiketi, çoklu satırlı bir metin alanı oluşturmanızı sağlar. Bu özellik, kullanıcıların uzun bir metin yazmasına olanak tanır. Ayrıca, daha önce belirlenen bir metnin önemli bir parçasını vurgulayan bir özellik olan placeholder kullanarak metin alanınıza ön tanımlı bir değer de ekleyebilirsiniz.

Radyo düğmeleri ise, kullanıcının sadece bir seçenek arasından seçim yapmasını sağlar. Bu özellik, belirli bir veri seti içinden bir seçim yapılması gerektiğinde oldukça yararlıdır. Radyo düğmeleri, grup halinde kullanılır ve bu grup için bir isim belirlenir. Bu sayede, birden fazla radyo düğmesi ile seçenekler arasındaki ilişki daha rahat anlaşılır ve kullanıcının doğru seçimi yapması sağlanır.

HTML5 ile birlikte eklenen bu özellikler sayesinde form oluşturmak ve form tasarımını geliştirmek oldukça kolay hale geldi. Bu özellikleri kullanarak, daha önceki özelliklere göre daha işlevsel ve daha iyi kullanıcı deneyimi sağlayan formlar oluşturabilirsiniz.

required attributu, bir form elemanının boş geçilemeyeceği bilgisini belirtmek için kullanılır. Yani, kullanıcının formu göndermeden önce bu elemana bir değer girmesi gerektiği anlamına gelir. Bu şekilde, formun doğru ve eksiksiz doldurulması sağlanır.

Bu özellik özellikle telefon numarası, e-posta adresi gibi doğru formatta bilgi girilmesi gereken alanlarda kullanışlıdır. Girdiğiniz verinin doğru formatta olup olmadığını kontrol etmek için pattern attributu ile birlikte de kullanılabilir.

required attributu, input, select ve textarea elementlerinde kullanılabilir. Örneğin:

<input type="text" name="email" required>

<select name="city" required>  <option value="" selected disabled hidden>Choose an option</option>  <option value="istanbul">İstanbul</option>  <option value="ankara">Ankara</option>  <option value="izmir">İzmir</option></select>

<textarea name="message" required></textarea>

Bu özelliği kullanırken, input elementi boş bırakıldığında kullanıcının göreceği mesajı title attributu ile belirleyebilirsiniz. Örneğin:

<input type="text" name="name" required title="Lütfen isminizi girin">

Bu şekilde, kullanıcının input elementini boş bıraktığında, input elementinin yanında "Lütfen isminizi girin" şeklinde bir uyarı mesajı görüntülenecektir.

HTML5 ile birlikte, input etiketi için işlevselliği artıran yeni attributler eklenmiştir. Bazı önemli örnekler şunlardır:

• Placeholder: Kullanıcıların istenilen değeri kolayca anlamaları için bir giriş alanına yerleştirilen gri metin.
• Required: Bu attributle birlikte, kullanıcılardan bir formu göndermeden önce belirli bir giriş alanını doldurmaları veya belirli bir seçeneği seçmeleri gerekiyor.
• Autofocus: Sayfa yüklendiğinde belirli bir giriş alanına odaklanmak için kullanılır.
• Disabled: Kullanıcının giriş alanlarını veya butonları etkilemesini önlemek için kullanılır.
• Readonly: Kullanıcıların içerikleri okuyup kopyalasına izin verilirken, içeriğin değiştirilmesini önlemek amacıyla kullanılır.

Pattern ve Min/Max

HTML5'in Pattern ve Min/Max attributleri, form elemanlarının değerlerinin kontrol edilmesi için kullanılabilir. Pattern, bir input alanındaki verilerin istediğiniz formatta girilmesini sağlar. Örneğin, bir telefon numarası için pattern="(ddd)ddd-dddd" şeklinde bir kod yazabilirsiniz. Bu, kullanıcının telefon numarasını bu formatta girmesi gerektiğini belirtir. Ayrıca, sadece belirli bir aralıkta sayılar kabul eden input alanları da oluşturabilirsiniz. Bunun için min ve max özelliklerini kullanabilirsiniz. Örneğin, range tipinde bir input alanı oluşturduğunuzda, min ve max değerlerini belirterek kullanıcının belirli bir aralıkta bir sayı girmesi gerektiğini belirleyebilirsiniz. Pattern ve Min/Max attributleri, form elemanlarından girilen bilgilerin kontrol edilmesini kolaylaştırır ve istenilen formatta bilgi almanızı sağlar. Bu özelliklerin kullanımı, HTML5'in diğer form özellikleri gibi çok basit ve kullanışlıdır.

Pattern attributü, input değerlerinin bir desene göre kontrol edilmesine olanak sağlar. Örneğin, bir telefon numarası girilirken, desenini (\d{3}-\d{3}-\d{4}) belirleyebilirsiniz.

HTML5 ile ileri düzey form oluşturma imkanı sizleri bekliyor. Yeni özellikler ve kullanabileceğiniz etiketler sayesinde formlarınız daha kullanıcı dostu ve işlevsel hale gelecek. Özellikle yeni input tipleri ve attributler ile kullanıcıların kolayca form doldurmasını sağlayabilirsiniz.

Bunun yanı sıra formunuzun tasarımını geliştirmek için de teknikler mevcut. İnline ve block elementleri kullanarak form elemanlarınızı sıralayabilir, fieldset ve legend elementleriyle formu gruplara ayırabilir ve formun üstündeki ve altındaki elemanlara uygulayabileceğiniz özelliklerle tasarımınızda çeşitlilik sağlayabilirsiniz.

Formunuzun doğrulama ve gönderme işlemlerinde de HTML5 sizlere kolaylık sağlar. Yenilenen required ve pattern attributleri sayesinde kontrolü sağlamak mümkün hale gelirken, submit ve reset butonlarının tasarımını ve özelliklerini değiştirerek formunuzda benzersiz bir hava yaratabilirsiniz.

HTML5'de yeni özelliklerle birlikte, input tiplerinde de değişiklikler yapılmıştır. Min/max attributleri bu değişikliklerden biridir. Bu attributler, input değerlerinin aralığını sınırlandırmak için kullanılır. Örneğin, bir yaş seçme kutusu oluşturduysanız, min attributü ile minimum yaş sınırını belirleyebilirsiniz. Benzer şekilde, max attributü ile de maksimum yaş limiti belirlenebilir. Bu özellikler, kullanıcı deneyimini iyileştirmek için oldukça yararlıdır ve istenmeyen verilerin gönderilmesini önlemek için de uygulanabilir. İnput tiplerindeki bu özellikler sayesinde, form kontrolü daha da kolay hale gelir ve istenilen sonuçlar alınabilir. Bu da, HTML5'in form oluşturma işlemlerini kolaylaştırdığından dolayı oldukça önemlidir.

HTML5'in yeni özellikleri ile input alanlarının girilen değerlerini kontrol etmek mümkündür. Pattern ve min/max attributleri ile girilen değerlerin belirli bir formatta veya sınırlandırılmış bir değerde olmasını sağlayabilirsiniz. Örneğin, kullanıcının sadece belirtilen formatta bir telefon numarası girilmesi gerekiyorsa pattern attributu kullanılabilir. Min/max attributleri ise girilebilecek değerlerin alt ve üst sınırını belirler. Bu sayede yanlış veya istenmeyen verilerin girişi önlenir.

pattern attributu aynı zamanda form alanındaki girilen verinin belirli bir modele uygunluğunu kontrol edebilir. Örneğin, email adresi için pattern attributu kullanılırsa, input alanına girilen verinin email formatına uygunluğu kontrol edilebilir. Min ve max attributleri ise tarih, sayı ve saat alanları gibi veri tiplerinin sınırlandırılmasında kullanılabilir. Bu sayede yanlış kullanım ve değerlerin girilmesi önlenir.

• Pattern attributu sadece text inputları ile birlikte kullanılabilir.
• Min ve max attributleri birçok input tipi ile birlikte kullanılabilir.
• Girilen değer attributların belirlediği koşulları karşılamıyorsa, kullanıcıya uygun bir hata mesajı gösterilebilir.

Datalist ve Output

HTML5 ile birlikte çok kullanışlı ve ileri düzey özellikler de eklendi. Bunlardan biri de datalist özelliği. Datalist ile bir input alanının altında farklı öneriler sunabilirsiniz. Örneğin, bir web sitesinde üyelik formu bulunuyorsa ve bir kullanıcının doğum yeri soruluyorsa, dropdown menüde tüm şehirleri listeleyebilirsiniz. Ancak, bu formda binlerce şehir olabileceğinden, input alanında "İstanbul" yazdığınızda, sadece İstanbul gibi öneriler sunabilirsiniz. Bu özellik hem kullanıcılar hem de web siteleri için oldukça faydalıdır.

Bir diğer HTML5 özelliği de Output özelliğidir. Bu özellik, kullanıcıların formda yaptıkları işlemler sonrasında sonuçları görmelerini sağlar. Örneğin, bir hesap makinesi hazırladığınızda, kullanıcıların yaptığı işlem sonrasında sonucun anlık olarak görüntülendiği bir alan ekleyebilirsiniz. Bu özellik, kullanıcıların yaptıkları işlemleri kontrol etmelerine, yanlışlık halinde hızlı bir şekilde düzeltmelerine ve kaydetmelerine olanak tanır.

Her ne kadar Datalist ve Output özellikleri HTML5 ile birlikte eklenmiş olsa da, her tarayıcı bu özellikleri desteklemeyebilir. Bu nedenle, web geliştiricilerinin bu özellikleri kullanmadan önce tarayıcı uyumluluklarını kontrol etmeleri gerekmektedir. Bu şekilde, bu özellikler sayesinde web siteleri daha kullanıcı dostu ve etkileşimli hale gelebilir.

Select, Textarea ve Radio Buttons

HTML5 ile birlikte gelen yeni özelliklerden biri de select, textarea ve radio buttons gibi form elemanlarının özelleştirilebilmesi. Select, kullanıcının bir seçim yapmasına olanak tanır ve opsiyonel bir select listesi ile oluşturulabilir. Textarea, bir metin girişi için kullanılır ve satır sayısı ve sütun sayısı gibi özellikleri yapılandırılabilir. Radio buttons, kullanıcının sadece bir seçenek seçmesine izin verir ve opsiyonel olarak gruplandırılabilir.

Özellikle radio buttons için kullanılabilecek yeni özellikler arasında checked ve disabled yer alır. Checked özelliği, sayfa yüklendiğinde bir seçeneğin otomatik olarak seçilmesini sağlar. Disabled özelliği, seçeneklerin kullanıma kapalı olmasını sağlar.

Select ve textarea elemanları için placeholder ve required özelliği de kullanılabilir. Placeholder, kullanıcının hangi bilgiyi girmesi gerektiğini gösteren bir ipucu sağlar. Required ise, bir bilginin mutlaka girilmesi gerektiğini belirtir.

Ayrıca select elemanı için multiple ve size özelliği de kullanılabilir. Multiple, kullanıcının birden fazla seçim yapmasına olanak tanırken, size ise kaç seçenek görüntüleneceğini belirler. Bu özellikler sayesinde form elemanları daha kullanışlı hale getirilebilir.

Form Tasarımı

Form tasarımı, formunuzun etkili bir şekilde görüntülenmesi için dikkat etmeniz gereken önemli bir adımdır. Yeni HTML5 özellikleri ile formlarınızın tasarımını geliştirmeniz oldukça kolaylaştı. İşte kullanabileceğiniz teknikler:

İlk olarak, form elemanlarınızı iki farklı şekilde sıralayabilirsiniz. İnline elementleri kullanarak, elemanları yatay olarak sıralayabilirsiniz. Örneğin, kullanıcının adı ve soyadını isteyen iki text input elemanı, yan yana yazılabilir. Block elementlerini kullanarak, elemanları dikey olarak sıralayabilirsiniz. Örneğin, kullanıcının mesajını yazabileceği bir metin kutusu, diğer elemanlardan ayrı blok halinde sıralanabilir.

Form elemanlarını gruplayarak da tasarımınızı geliştirebilirsiniz. Fieldset ve legend elementlerini kullanarak, formunuzdaki elemanları belirli gruplara ayırabilirsiniz. Örneğin, bir ürünün detaylarını ve özelliklerini isteyen bir formda, ürünün genel bilgileri bir fieldset içinde gruplandırılabilir.

Ayrıca, formunuzun üstündeki ve altındaki elemanlara CSS uygulayarak, formunuzun görünümünü daha da geliştirebilirsiniz. Örneğin, formun arka plan rengini, fontunu veya butonlarının renklerini değiştirebilirsiniz.

Son olarak, butonları özelleştirerek de formunuzun tasarımını geliştirebilirsiniz. Submit ve reset butonlarına CSS uygulayarak, butonların boyutunu, rengini ve görünümünü değiştirebilirsiniz. Ayrıca, butonlara ikonlar ekleyerek de formunuzun daha modern ve şık görünmesini sağlayabilirsiniz.

Tüm bu teknikler kullanarak, formunuzun hem işlevsel hem de estetik açıdan tamamlanmış bir görünüme kavuşmasını sağlayabilirsiniz.

İnline ve Block Elementleri

Formlarda elementlerin nasıl sıralanacağı ve ne şekilde gösterileceği önemlidir. Elementleri sıralamak için iki farklı yöntem vardır: inline ve block.

Inline elementleri yan yana sıralama ve birbirine karıştırma özelliği vardır. Örnek olarak, bir metin kutusu, düğme veya seçim kutusu birbiri ardına sıralanabilir. Inline elementlerle bir form oluşturmak, bir sayfadaki boşlukları azaltır ve kullanıcıların daha kolay doldurmasına olanak tanır. Ancak, elementlerin yan yana sıralanması nedeniyle, her satırın sınırlı sayıda karaktere sahip olması nedeniyle, her elementin daha küçük boyutta olması gerekebilir.

Block elementleri dikey bir sıralama ve ayrı bir satıra koyma özelliği vardır. Örneğin, bir başlık, metin alanı veya seçim kutusu blok elementleri olarak işlev görebilir. Blok elementleriyle oluşturulan form, kullanıcının doldurması daha kolay olsa da, sayfadaki boşlukları arttırabilir ve daha az bilgi alanı sağlayabilir.

İnline veya block elementlerinin kullanımı, formun tasarımına bağlıdır. Elementleri sıralamak ve tasarımını yapmak için CSS kullanılabilir. CSS, formun daha dikkat çekici ve kullanıcı dostu olmasını sağlayarak formun performansını artırabilir.

Fieldset ve Legend

Formlarınızı daha düzenli hale getirmek için Fieldset ve Legend etiketlerini kullanabilirsiniz. Bu elementler, bir grup form elemanını bir araya toplamanıza ve açıklama eklemenize yardımcı olur.

Fieldset etiketi, bir grup form elemanını belirtmek için kullanılır. Bu etiket, form elemanlarını bir arada tutmak için bir kutu oluşturur. Legend etiketi ise, Fieldset etiketinin başlığı olarak kullanılır ve formun hangi bölümünü kapsadığını açıklar.

Örneğin, bir kayıt formunuz varsa, kişisel bilgi, iletisim bilgisi ve ödeme bilgisi bölümleri olabilir. Bu bölümleri Fieldset etiketi ile bir arada tutabilir ve her Fieldset'in başına bir Legend ekleyebilirsiniz. Bu, formu okuyan kişilerin hangi bölümle ilgili bilgi girdiklerini daha iyi anlamalarına yardımcı olacaktır.

Ayrıca, Fieldset ve Legend etiketlerini kullanarak formunuzu daha görsel hale getirebilirsiniz. Örneğin, Fieldset'in çerçevesini CSS kullanarak değiştirebilir veya metin rengini değiştirebilirsiniz.

Özetle, Fieldset ve Legend etiketleri ile form elemanlarınızı gruplara ayırabilir, daha düzenli bir sunum oluşturabilir ve formunuzu daha görsel hale getirebilirsiniz.

Form Özellikleri Uygulama

Form oluşturma işlemi sırasında, formun tasarımı oldukça önemlidir çünkü kullanıcıların formu doldurma konusunda motivasyonunu doğrudan etkiler. Bu nedenle, HTML5 ile birlikte formun tasarımını geliştirmek için birçok farklı özellik ve element eklendi. Bu özellikler arasında, form üstündeki ve altındaki elemanlara uygulayabileceğiniz özellikler sayesinde formun tasarımı daha da geliştirilebilir.

Örneğin, form üstündeki elemanlara uygulayabileceğiniz özellikler arasında

• autofocus: Sayfa yüklenirken bu özelliği taşıyan ilk input elemanına odaklanır.
• autocomplete: Kullanıcının daha önce doldurduğu form verilerine dayanarak, bir form alanına otomatik olarak öneriler sunar.

• novalidate: Form gönderilmeden önce, form verilerinin doğrulanıp doğrulanmayacağına karar verecektir. Doğrulanacaksa, form gönderilmeden önce hata mesajlarını gösterecektir.
• target: Formu göndereceğiniz hedef sayfayı belirlemenizi sağlar.

Bu özellikler sayesinde form tasarımını geliştirmek oldukça kolay hale geldi. Böylece kullanıcılar daha özenli ve ilgi çekici bir tasarımla karşılaşarak, formu doldurmak için daha fazla motive olacaklardır. Formlar için HTML5 ile birlikte gelen tüm özellikler hakkında bilgi edinerek, form oluşturma işleminizi daha da kolaylaştırabilirsiniz.

Form Doğrulama ve Gönderme

Formlar, web sitelerinde veri toplama işlevini yerine getiren önemli araçlardır. Ancak, kullanıcıların yanlış veya eksik bilgi girmesi durumunda, formun amacı kısmen veya tamamen engellenebilir. Bu nedenle, form doğrulama işlevi oldukça önemlidir ve HTML5 bu doğrulamayı yapmak için birçok özellik sunar.

Bir form elemanının doğru bir şekilde doldurulması gerekiyorsa, required özelliği kullanılmalıdır. Bu özellik, bir alanın boş bırakılamayacağını belirten bir uyarı mesajı gösterir. min ve max attributleri, bir elemana girilebilecek minimum ve maksimum değerleri sınırlandırmak için kullanılabilir. pattern attributu ise kullanıcının girilen verinin belirli bir kalıp veya formata uygun olup olmadığını kontrol eder.

Ayrıca, input elemanların doğrulanması için form etiketinin de kullanımı gereklidir. Bu etiket, form'a ait input elemanlarını tanımlamak için kullanılır. Doğrulamayı sağlamak için, novalidate özelliği kullanılarak doğrulama işlevi devre dışı bırakılabilir.

Form gönderme işlevi, formdan veri alınmasını tamamlamak için gereklidir. submit butonu, formu göndermek için kullanılırken, reset butonu, formdan verileri silmek için kullanılır. HTML5, form gönderme işlevinde formaction ve formmethod özellikleri sunar. Bu özellikler, formun hangi URL'ye ve hangi HTTP yöntemiyle gönderileceğini belirlemek için kullanılır.

Sonuç olarak, form doğrulama ve gönderme işlevleri, web sitesi sahipleri için oldukça önemlidir. HTML5'in sunduğu bu özellikler sayesinde, kullanıcıların yanlış veya eksik veri girmesi engellenerek, form işlevleri başarılı bir şekilde yerine getirilebilir.

Doğrulama ve Required Attributleri

Form oluşturduktan sonra, form elemanlarının belirli bir kurallara uygunluğunu kontrol etmek için doğrulama özelliği kullanılabilir. Bu özellik sayesinde, kullanıcının yanlış veya eksik bilgi girmesi durumunda hata mesajları gösterilebilir. En yaygın kullanılan doğrulama özellikleri arasında min,max,required,ve patternbulunmaktadır.

min ve max özellikleri, sayısal girişlerin minimum ve maksimum değerlerini belirler. Örneğin, bir yaş girişi için minimum değer 18 olarak belirlenebilir. Bunun için, input etiketine min="18"atribütü eklenir. Aynı şekilde, maksimum yaş sınırı da max="100"şeklinde belirlenebilir.

Required özelliği ise, belirli bir girişin zorunlu olmasını sağlar. Örneğin, bir e-posta alıcı adresi için giriş yapılması zorunlu olduğunda, input etiketine requiredattribütü eklenir. Bu sayede form gönderilmeden önce zorunlu alanların doldurulması kontrol edilir.

Pattern özelliği ise, belirli bir format veya desene uygun olmayan girişlerin kabul edilmemesini sağlar. Örneğin, bir telefon numarası girişi yapılırken, input etiketine pattern="\d{3}-\d{3}-\d{4}"atribütü eklenerek, girişin xxx-xxx-xxxx biçiminde olması zorunlu hale getirilebilir.

Doğrulama özellikleri, form elemanlarının doğru şekilde doldurulmasını sağlayarak, daha doğru sonuçlar elde edilmesine katkı sağlar. Bu sayede, formun amacı doğrultusunda kullanıcıların bilgi doldurmasına olanak sağlanır.