Form Doğrulama

Bu makale form doğrulamayı açıklar.

HTML'de form doğrulamayı açıklar.

YouTube Video

HTML Form Doğrulama

HTML Form Doğrulamanın Genel Bakışı

• HTML form doğrulama, kullanıcının formu göndermeden önce verilerin belirli koşulları karşıladığından emin olmak için bir mekanizmadır. Bu, sunucu tarafındaki hataları azaltır ve kullanıcı deneyimini iyileştirir.

required Özelliği

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• required özelliği, formun gönderilmeden önce giriş alanlarının doldurulması gerektiğini belirtir.

pattern Özelliği

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• pattern özelliği, form girişinin belirli bir regex düzeniyle eşleşip eşleşmediğini doğrulamak için kullanılır. Örneğin, kullanıcı adının yalnızca alfasayısal karakterler içerip içermediğini kontrol eder.

min ve max Özellikleri

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• <min> ve <max> özellikleri, bir giriş elemanının izin verilen en düşük ve en yüksek değerlerini belirtmek için kullanılır. Bunlar genellikle number, range ve date gibi giriş türleriyle kullanılır.
• Bu örnekte, 18 ile 99 arasında bir sayı girebilirsiniz.

minlength ve maxlength Özellikleri

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• minlength özelliği, bir giriş alanı için gerekli olan minimum karakter sayısını belirtirken, maxlength özelliği izin verilen maksimum karakter sayısını tanımlar.
• Bu örnekte, 4 ile 12 karakter arasında metin girebilirsiniz.

type="email" özelliği

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• type="email" özelliği, girdinin geçerli bir e-posta adresi formatında olmasını sağlamak için kullanılır. Bu özellik, e-posta adresi giriş alanları için yerleşik doğrulama işlevselliği sağlar.

type="url" özelliği

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url">, doğru bir URL formatı gerektiren bir giriş alanı sağlar. Tarayıcı, girdinin geçerli bir URL olup olmadığını otomatik olarak kontrol eder.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video