HTML formlarında e-posta ve URL giriş alanlarının doğrulanması

Bu öğretici sayesinde HTML formalarında e-posta adresi ve URL giriş alanlarının tüm önemli yönlerini öğreneceksiniz. Amacımız bu girişlerin doğrulamasını etkili bir şekilde nasıl gerçekleştireceğinizi ve farklı giriş durumları için stillemeyi nasıl ayarlayabileceğinizi göstermektir. Bu, sadece kullanıcı deneyimini artırmakla kalmayacak, aynı zamanda elde ettiğiniz verilerin kalitesini de artıracaktır.

En Önemli İçgörüler

• HTML kullanarak e-posta ve URL için temel yapıyı ve doğrulama sürecini öğreneceksiniz.
• Kullanıcıların geçersiz girişler yaptığında CSS ile görsel geri bildirim nasıl sağlayabileceğinizi öğreneceksiniz.
• E-posta adresleri ve URL'ler için ileri doğrulama için Desenlerin kullanımı açıklanacaktır.

Adım Adım Kılavuz

1. E-posta için Temel Giriş Alanı Oluşturma

E-posta için standart bir giriş elemanı oluşturmayla işe başlayın. Tarayıcının otomatik olarak doğrulama yapabilmesi için tipi "email" olarak ayarlamanız gerekmektedir.

Artık HTML tarafından bu giriş alanı, bir e-posta adresi beklediğini ve yanlış girişlerde görsel geri bildirim sağladığını ele alır. Bir kullanıcı giriş yapmaya başladığında, arka planın pembe olduğu, yanlış girişe işaret ettiği şekilde değişir.

2. E-posta Adresinin Doğrulanması

E-posta adresinin doğrulanması basit kurallarla gerçekleşir. En az bir "@" işaretinin bulunması ve ardından en az bir başka karakterin olması gerekmektedir. Bu temel bir NLP doğrulamasıdır. Ancak bu doğrulama kuralı, e-posta adresinin gerçekte var olup olmadığını garanti etmek için yeterli değildir.

Bir geçersiz e-posta adresi örneği "bla@” olabilir. Bu durumda, formun gönderilmesi engellenir ve kullanıcıya bir hata mesajı görüntülenir.

3. Daha Kesin Doğrulama İçin Desenlerin Kullanımı

Daha kesin bir doğrulama için "pattern" özniteliğini kullanabilirsiniz. Düzenli bir ifade ile (Regex) e-posta adresinin belirli gereksinimlere uygun olmasını sağlayabilirsiniz, örneğin belirli bir alan adına sahip olması.

Bu ek doğrulama ile sadece geçerli e-posta adreslerinin kabul edilmesini sağlarsınız, örneğin yalnızca Gmail veya GMX adresleri gibi.

4. Gerekli Giriş ve Stil

E-posta alanının doldurulmasını sağlamak için "required" özniteliğini ekleyebilirsiniz. Kullanıcı formu boş bırakarak göndermeye çalıştığında, hemen bir görsel geri bildirim alır.

Geçersiz girişlerin stilini belirlemek için CSS'de ":invalid" seçicisini kullanabilirsiniz. Böylece kullanıcıya, girişin doğru olmadığını belirten kırmızı bir alan verilir.

5. URL için Giriş Alanı Oluşturma

E-posta gibi URL'ler için de uygun bir giriş elemanı oluşturmak önemlidir. Tarzı "url" olarak ayarlayarak tarayıcının buradaki girişi de doğrulamasını sağlayın.

6. URL'nin Doğrulanması

Geçerli bir URL için temel gereksinimler "http://" veya "https://" ile başlaması ve en az bir sonraki karakteri içermesidir. Kullanıcı sadece "https" girerse bu yeterli değildir.

Aynı prensip diğer protokoller için de geçerlidir, örneğin "ftp". Giriş koşullara uymadığında tarayıcı geri bildirim sağlar ve formun gönderilmesine izin vermez.

7. URL'ler İçin Desenlerle Genişletilmiş Doğrulama

URL'lerin "https://www.example.com" gibi belirli desenler için doğrulamasını daha hassas hale getirmek için ayrıca "pattern" özniteliğini kullanarak kullanıcılarınıza doğru URL'leri girmelerine yardımcı olabilirsiniz.

8. Mobil cihazlarda kullanıcı dostu

Formlarda "e-posta" ve "url" türlerinin kullanılmasının büyük bir avantajı, mobil cihazlarda kullanıcı dostu olmasıdır. Klavye, kullanıcılara e-posta adreslerini ve URL'leri daha kolay girmelerini sağlamak için en uygun şekilde ayarlanır.

Özet

Bu öğreticide web formlarında e-posta adreslerinin ve URL'lerin doğrulanması için en önemli kriterleri ele aldık. Basit ve gelişmiş doğrulamaların nasıl yapılacağını ve daha iyi bir kullanıcı deneyimi oluşturmak için CSS aracılığıyla kullanıcı geri bildirimini nasıl özelleştireceğini öğrendiniz.