HTML5 ile Modern Formlar Nasıl Yapılır?

Günümüzde web sitelerinde formlar olmazsa olmaz bir bileşen. İster bir kayıt formu, ister bir geri bildirim alanı, hatta bir sipariş sayfası olsun, formlar kullanıcıdan bilgi almanın en temel yollarından biri. Ama işin güzel yanı şu: HTML5 ile artık çok daha gelişmiş ve kullanıcı dostu formlar oluşturabiliyoruz. Peki, HTML5 ile gelen yenilikler neler? Bu yazıda, modern formlar oluştururken kullanabileceğiniz en iyi HTML5 özelliklerini adım adım anlatacağım.

HTML5 ile Gelen Yeni Form Özellikleri

Eskiden bir form oluşturduğumuzda, çoğu şeyi JavaScript ile kontrol etmek zorundaydık. Örneğin, kullanıcı geçerli bir e-posta adresi mi girdi? Ya da telefon numarası gerçekten doğru formatta mı? Bunları tek tek yazmak zahmetliydi. İşte HTML5, işimizi kolaylaştıran harika yeni input türleri ve doğrulama seçenekleri sundu.

Yeni <input> Türleri

• email: Kullanıcının geçerli bir e-posta adresi girmesini sağlar.
• url: Web adresi girişini kontrol eder.
• tel: Telefon numarası almak için kullanılır.
• date: Tarih seçimini kolaylaştırır.
• number: Yalnızca sayısal girişlere izin verir.
• range: Kaydırma çubuğu ile değer seçmeye olanak tanır.
• search: Arama çubuğu için özel bir input türüdür.

Placeholder ve Autofocus Kullanımı

• placeholder: Input içine açıklayıcı bir metin ekler. Örneğin, 'Adınızı girin' gibi.
• autofocus: Sayfa yüklendiğinde, belirlenen input alanına otomatik olarak odaklanır.

Pattern ile Giriş Doğrulama

<input type="text" pattern="[A-Za-z]{3,}" title="En az 3 harf içermelidir" required>

Modern Form Örnekleri

<form action="#" method="POST">
  <label for="name">Adınız:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required>

  <label for="phone">Telefon:</label>
  <input type="tel" id="phone" name="phone">

  <label for="dob">Doğum Tarihi:</label>
  <input type="date" id="dob" name="dob">

  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" minlength="6" required>

  <button type="submit">Gönder</button>
</form>

CSS ile Modern Form Tasarımı

input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input:focus {
  border-color: #007BFF;
  outline: none;
}

button {
  background-color: #007BFF;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript ile Form Geliştirme

<script>
document.querySelector('form').addEventListener('submit', function(event) {
  let email = document.getElementById('email').value;
  if (!email.includes('@')) {
    alert('Lütfen geçerli bir e-posta adresi girin.');
    event.preventDefault();
  }
});
</script>

HTML5, modern form oluşturmayı inanılmaz kolay hale getirdi. Artık birçok doğrulama işlemini tarayıcı kendisi halledebiliyor, böylece biz de gereksiz JavaScript kodlarından kurtuluyoruz.

Umarım bu bilgiler işine yarar! 🧡