HTML formunu nasıl oluşturacaksınız?

HTML formu oluşturmak için <form> öğesini kullanacağım. İçinde metin kutuları (<input type="text">), şifre alanları (<input type="password">), onay kutuları (<input type="checkbox">), radyo düğmeleri (<input type="radio">), açılır listeler (<select> ve <option>), metin alanları (<textarea>) ve gönderme düğmeleri (<button type="submit"> veya <input type="submit">) bulunacaktır.

Her form öğesi, sunucu tarafında tanımlanması için name özniteliğine sahip olacak ve genellikle <label> ile ilişkilendirilmek üzere id özniteliğine de sahip olacaktır.

<form> öznitelikleri:

• action: Form gönderildiğinde verilerin gönderileceği URL.
• method: Veri gönderme HTTP yöntemi (GET veya POST).
• enctype: Gönderilen verilerin kodlama türü (örneğin, dosya yükleme için multipart/form-data).

Basit bir form örneği:

<form action="/submit-form" method="post">
  <label for="username">Kullanıcı Adı:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Şifre:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Beni hatırla</label><br><br>

  <label for="country">Ülke:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusya</option>
    <option value="us">ABD</option>
  </select><br><br>

  <label for="message">Mesaj:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

Form doğrulaması, hem istemci tarafında (HTML5 doğrulama öznitelikleri, JavaScript kullanarak) hem de sunucu tarafında gerçekleştirilebilir.

HTML5 doğrulama öznitelikleri:

• required: Zorunlu alan.
• minlength, maxlength: Metin alanının minimum ve maksimum uzunluğu.
• min, max: Sayısal alanlar için minimum ve maksimum değerler.
• type (email, url, number, date vb.) otomatik doğrulama sağlar.
• pattern: Giriş için düzenli ifade.

HTML5 doğrulama kullanımıyla örnek:

<form action="/submit-form" method="post">
  <label for="email">E-posta:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Yaş (18-99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Posta Kodu (5 rakam):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Formun stilizasyonu için CSS kullanılacaktır. Daha karmaşık mantık veya asenkron veri gönderimi için JavaScript kullanılacaktır. Erişilebilirliği artırmak için uygun ARIA öznitelikleri ve doğru HTML yapısı kullanılacaktır.