Html'de form etiketleri ve semantik etiketleri inceleyelim. Modern web sitelerinin olmazsa olmaz iki önemli konusu var: Kullanıcıdan Veri Toplamak için Formlar ve Anlamlı, Düzenli Kod için Semantik Yapılar. Hadi bu konuları derinlemesine inceleyelim.

1. Semantik (Anlamsal) HTML5 Etiketleri

HTML5'ten önce her şey <div> etiketi ile yapılırdı. Bu, kodun okunmasını ve anlaşılmasını zorlaştırırdı. HTML5 ile gelen semantik etiketler, içeriği anlamlı bir şekilde yapılandırmamızı sağlar. Bu, hem arama motorları (SEO) hem de erişilebilirlik (ekran okuyucular) için çok önemlidir.

İşte temel semantik etiketler ve kullanım yerleri:

<header>: Sayfanın veya bir bölümün üst bilgi (başlık, logo, menü) kısmını tanımlar.

<nav>: Sayfadaki ana navigasyon (menü) linklerini içerir.

<main>: Sayfanın ana içeriğini belirtir. Sayfada sadece bir tane olmalıdır.

<section>: İçeriği tematik olarak gruplandırılmış bağımsız bölümleri tanımlar (örneğin, "Hakkımızda", "Hizmetler", "İletişim" bölümleri).

<article>: Bir makale, blog yazısı, haber gibi bağımsız, kendi kendine yeten içerik bloklarını tanımlar.

<aside>: Ana içerikle dolaylı olarak ilgili yan içerikleri (sidebar, reklam, çapraz referans) tanımlar.

<footer>: Sayfanın veya bir bölümün alt bilgi (telif hakkı, iletişim bilgileri, linkler) kısmını tanımlar.

Örnek Bir Sayfa Yapısı: 

<!DOCTYPE html>
<html lang="tr">
<head>
   <meta charset="UTF-8">
   <title>Semantik Web Sitesi</title>
</head>
<body>
   <header>
       <h1>Web Sitemin Başlığı</h1>
       <nav>
           <a href="/anasayfa">Anasayfa</a> |
           <a href="/hakkimizda">Hakkımızda</a> |
           <a href="/iletisim">İletişim</a>
       </nav>
   </header>
   <main>
       <section>
           <h2>Hizmetlerimiz</h2>
           <p>Çeşitli hizmetler sunuyoruz...</p>
       </section>
       <article>
           <h2>Blog Yazısı Başlığı</h2>
           <p>Bu harika bir blog yazısı.</p>
       </article>
   </main>
   <aside>
       <h3>Reklam</h3>
       <p>Buraya bir reklam yerleştirilebilir.</p>
   </aside>
   <footer>
       <p>Telif Hakkı © 2023 - Erkan Keser</p>
   </footer>
</body>
</html>

2. Formlar: Kullanıcı ile Etkileşim

Formlar, kullanıcıdan veri almak (giriş yapma, kayıt olma, iletişime geçme vb.) için kullanılır. Tüm form elemanları <form> etiketi içine yazılır.

Temel Form Yapısı ve Input Türleri: 

<form action="/kayit-islemi" method="POST">
    <!-- Metin Girişi -->
    <label for="adiniz">Adınız:</label>
    <input type="text" id="adiniz" name="adiniz" required> <br><br>

    <!-- E-posta Girişi -->
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required> <br><br>

    <!-- Şifre Girişi -->
    <label for="sifre">Şifre:</label>
    <input type="password" id="sifre" name="sifre" required> <br><br>

    <!-- Tarih Seçici -->
    <label for="dogumtarihi">Doğum Tarihi:</label>
    <input type="date" id="dogumtarihi" name="dogumtarihi"> <br><br>

    <!-- Seçim Kutusu (Dropdown) -->
    <label for="ulke">Ülke:</label>
    <select id="ulke" name="ulke">
        <option value="tr">Türkiye</option>
        <option value="de">Almanya</option>
    </select> <br><br>

    <!-- Metin Alanı (Textarea) -->
    <label for="mesaj">Mesajınız:</label><br>
    <textarea id="mesaj" name="mesaj" rows="4" cols="50"></textarea> <br><br>

    <!-- Gönder Butonu -->
    <input type="submit" value="Kaydı Tamamla">
</form>

Önemli Açıklamalar:

<label>: Her input için bir etiket tanımlar. for özelliği, ilgili input'un id'si ile aynı olmalıdır. Kullanılabilirliği arttırır.

<input>: Kullanıcı girdisi almak için kullanılır. En kritik özelliği type'dır.

type="text": Tek satırlık metin.

type="email": E-posta adresi (temel validasyon yapar).

type="password": Şifre (girilen karakterleri gizler).

type="date": Tarih seçici.

type="submit": Formu gönderen buton.

<select>: Açılır seçim kutusu oluşturur. Her seçenek <option> etiketi ile tanımlanır.

<textarea>: Çok satırlı metin girişi için kullanılır. rows ve cols boyutunu belirler.

required: Input'un doldurulması zorunlu alan olduğunu belirtir (HTML5 validasyonu).